Rabu, 02 Maret 2011

Mengganti Logo Header dengan Logo Blog Kita


  Dalam edit template 'Elegant Style dan SEO Friendly' sebelumnya saya belum menyertakan proses/cara mengganti logo o-om di samping header blog. Sehingga hasilnya yang terlihat adalah logo o-om.com terpampang di samping header blog farrocom. Logo itu juga menjadi link menuju blog o-om.com. Blog kita, khas kita kok logonya memakai milik orang lain. Maka saya berusaha menggantinya dengan logo sederhana kreasi saya. Membuat logonya juga dari ponsel dengan bantuan IDesigner. Saya mulai tahapan-tahapannya. dengan

  Pada dasarnya, setiap gambar yang disematkan di template atau posting blog adalah gambar yang telah di upload ke internet. Berarti gambar itu juga memiliki link tautan sendiri. Kemudian link gambar itu ditempelkan ke template dengan kode html tertentu. Seharusnya di file template 'Elegant Style dan SEO Friendly' juga mengandung unsur link logo itu. Untuk mencari kode logo di file xml template saya harus tahu dulu link gambar logo o-om.
  Langkah pertama saya buka blog farrocom.blogspot.com yang masih terpampang logo o-om dengan Opera Mini. Buka Gambar logo dengan menekan shortcut angka 1 keypad. Gambar telah terbuka, saya catat/Copy link gambar yang dapat dilihat di address bar Opera Mini. Hasilnya yaitu link ini http://sites.google.com/site/oomblog/logo_baru.gif . Gambar dengan nama logo_baru.gif . Ukuran gambar juga terlihat yaitu 85x85 pixel. Berarti nanti gambar penggantinya ukurannya juga harus 85x85 pixel.
Berikutnya memulai mengedit kode. Download file xml template kemudian buka dengan Moby Explorer(caranya pilih Menu->Text Editor Open..). Selanjutnya cari link gambar dengan memilih Menu->Find->Find.., kemudian masukkan nama gambar logo_baru.gif . Lalu Ok. Hasilnya kita akan ditunjukkan kode link itu yang ada di file.

<div class='ad-banner'>
<a href='http://www.o-om.com'>

<img src='http://oom.blog.googlepages.com/logo_baru.gif'/> </a>

</div>

<b:section class='ad-banner2' id='ad-banner2' preferred='yes'/>

</div>

  Selanjutnya ubah kode yang berwarna merah di atas dengan link gambar baru. Sebelumnya upload lah dulu gambar logo di web hosting gambar seperti Picasa, Photobucket, Flickr dll. Saya sarankan kalau uploadnya dari ponsel sebaiknya di Flickr.com. Alasannya karena paling mudah untuk upload gambar dari ponsel. Jangan lupa ukuran gambar dibuat 85x85 pixel supaya sama dengan template sebelumnya. Untuk mengetahui link atau alamat gambar yang telah di upload caranya sama dengan saat mencari link gambar logo_baru.gif bawaan template. Hanya dengan begini kita sudah mengganti logo di samping header. Tapi jangan selesai dulu.
  Pada kode diatas ada alamat blog o-om.com, yang seperti ini http://www.o-om.com . Perancang template ini menambahkan kode berupa link yang menyertakan alamat blognya. Tujuannya agar kalau logo diklik, akan membawa ke blog atau web yang alamatnya disematkan pada kode. Jika kode itu tidak diubah maka logo kita akan tetap bermuatan link blog orang lain. Ganti lah alamat blog o-om.com dengan alamat blogmu.
Hasil perubahan kode untuk blog farrocom seperti berikut.

<div class='ad-banner'>
<a href='http://farrocom.blogspot.com'>

<img src='http://farm5.static.flickr.com/4135/5437288513_8e026292d2_z.jpg'/> </a>

</div>

<b:section class='ad-banner2' id='ad-banner2' preferred='yes'/>

</div>

Setelah semua selesai di edit. Lalu Save as dan beri nama baru. Sekarang upload template ke blogspot kembali. Selesai dan lihat hasilnya.

2 komentar:

  1. luar biasa!terima kasih banyak atas ilmunya.kini saya bisa memakai template elegan SEO friendly tanpa rasa risih

    BalasHapus
  2. mas bisa tolong saya mas, saya pas pakai template ini, ada readmore ny.. trus readmore ny g bisa maksimal.. bisa bantu ngilangin read more ny g mas... tolong ya.. ni blog q mas. blog-rofiq.blogspot.com

    BalasHapus