Cara Mengganti Icon Di Address Bar Blogger dan Wordpress

Ingin membuat icon address bar dengan logo icon sendiri tapi gak tahu caranya? 

Tenang aja friends, pada tulisan ini saya akan mengulas cara-cara agar blog/site anda memiliki logo icon seperti yang teman-teman inginkan. Oh iya, khusus buat wordpress yang menggunakan subdomain wordpress misalnya : www.namaaku.wordpress.com, teknik ini tidak dapat digunakan (pengalaman sendiri).

Sebelum itu, saya akan menjelaskan sedikit tentang apa sih yang dimaksud dengan address bar itu supaya friends gak bingung nantinya (khusus buat yang gak tau aja yah....hehehehe). Address bar itu adalah tempat di mana kita mengetikkan alamat tujuan suatu website. Berada di bawah dari kolom menu bar (file, edit, view, history, dll) Jadi semua alamat dari website berada pada daerah address bar ini. Contohnya lihat saja gambar di bawah ini :

Nah di sebelah kiri dari address bar ini kita dapat menjumpai ada sebuah gambar atau icon. Kalau di Blogspot maka icon default yang akan tampil adalah gambar ini :, kalau di Wordpress seperti gambar ini :

Nah..logo icon inilah yang nantinya akan kita ganti dengan logo icon milik kita sendiri (animasi ataupun tidak). Cara ini sebenarnya bisa secara manual ataupun dengan meng-upload. Tapi yang akan saya bahas adalah secara manual. Untuk meng-upload langsung, anda dapat menggunakan plugin maxblogpress favicon dan anda dapat mendownloadnya DI SINI. atau untuk Wordpress dapat menggunakan Plugin  Blog Icon dan anda dapat mendownloadnya DI SINI. Kemudian aktifkan plugins tersebut. Dan silahkan upload icon yang telah Anda buat tadi.

Berikut ini langkah-langkah manual yang dapat anda lakukan :

1. Pertama-tama siapkan logo icon yang akan anda gunakan nanti. Anda bisa membuatnya sendiri  dengan photoshop, coreldraw atau software apa saja yang penting untuk membuat gambar, atau bisa juga anda googling di mbah google untuk mencari logo icon yang anda inginkan. Untuk ukurannya, terserah anda aja mau menggunakan ukuran berapa. Yang harus diingat bahwa semakin besar ukuran logo icon, maka akan semakin lama proses yang dibutuhkan untuk membukanya di halaman website anda. Ukuran yang lazim digunakan adalah 18x18 pixel, 24×42 pixel, 32×32 pixel, 50×50 pixel, 0,42 x 0,42 cm, 0,71 x 0,71 cm. Untuk formatnya, terserah anda aja (gif, jpg, png, bmp dll)

2. Jika anda sudah memiliki logo icon sendiri, anda harus meng-uploadnya untuk mendapatkan alamat url logo icon anda. Anda dapat meng-uploadnya ke salah satu server image gratisan misalnya photobucket.com, picasa.google.com, servimg.com, googlepages.com, html-kit.com, atau tinypic.com. Kalau saya lebih senang menggunakan tynipic.com karena lebih simpel dan tanpa perlu signup. 

Kalau anda malas untuk mengupload, atau koneksi anda lagi lemot, anda bisa meng-copy url logo icon animasi di bawah ini :

  –>  http://i255.photobucket.com/albums/hh146/doumbozo/animasi/2anigif.gif

 –>  http://i255.photobucket.com/albums/hh146/doumbozo/1anigif.gif

 –>  http://i255.photobucket.com/albums/hh146/doumbozo/7anigif.gif

–>  http://i255.photobucket.com/albums/hh146/doumbozo/3anigif.gif

–>  http://i255.photobucket.com/albums/hh146/doumbozo/5anigif.gif

–>  http://i255.photobucket.com/albums/hh146/doumbozo/6anigif.gif

–>  http://i255.photobucket.com/albums/hh146/doumbozo/4anigif.gif

3. Jika url logo icon anda sudah siap, langkah selanjutnya anda login ke web admin anda.

4. Untuk BLOGGER : masuk ke menu Design / Tata Letak -> Edit HTML, selanjutnya tekan F3 pada keyboard anda sehingga muncul tampilan "Find" di bagian bawah browser anda. Ketikan </head> di kotak "Find" tadi hingga akan muncul tampilan seperti di bawah ini :

Selanjutnya ketik atau copy code di bawah ini sebelum/di depan dari </head>,

<link href='url logo icon anda' rel='SHORTCUT ICON'/>

Dan kalimat yang berwarna merah, anda ganti dengan link url yang diperoleh pada saat mengupload logo icon anda tadi. Sehingga nanti tampilannya akan seperti di bawah ini : (saya menggunakan logo icon url milik saya)

<link href='http://i51.tinypic.com/p3ih4.png' rel='SHORTCUT ICON'/></head>

Selanjutnya anda klik SAVE TEMPLATE. Nah silahkan lihat kreasi anda di website anda sendiri.

Jika cara di atas tidak berhasil, maka anda dapat memindahkan semua script code yang dibuat tadi ke tempat lain. Kalau yang tadi anda meletakkannya DI ATAS / SEBELUM script code </head> , maka cara kedua adalah dengan memindahkan semua script code tadi DI BAWAH / SETELAH script <head>. Perhatikan...!!!!!!! antara </head> dengan <head>

5. Untuk WORDPRESS : Pada side bar sebelah kiri, buka APPEARANCE -> EDITOR. Maka akan terbuka tampilan "Edit Themes". Sekarang cari pada side bar sebelah kanan pada bagian "Templates" tulisan "Header (header.php)", lalu klik di situ. Maka akan muncul tampilan script header yang akan anda ubah. Langkah selanjutnya sama dengan cara di Blogger, mulai dari tekan F3 dan seterusnya. Cuman di sini, letak script code berada di atas </head>, lihat gambar di bawah :

 Setelah anda memasukkan script tadi, selanjutnya klik "Update File". Silahkan lihat perubahan di website anda.

Mudah-mudan tulisan ini dapat membantu anda yang ingin mempercantik tampilan blog/site anda.

Selamat mencoba.