Mengganti Logo Blog / Icon Blog - Favicon dengan Logo Sendiri

Bagi anda yang baru membuat blog/Newbe pasti anda kurang puas melihat blog anda terlihat dengan tampilan template default atau kurang menarik, Nah di sini anda bisa belajar mempercantik blog agar terlihat menarik. Sesuai Tema DeltaNet dengan Tutorial Blog kali ini DeltaNet akan memberikan cara Mengganti Logo Blog / Icon Blog - Favicon dengan Logo Sendiri, Lihatlah contoh Icon blog di bawah

Yang sebelah kiri adalah favicon default di blogspot dan yang sebelah kanan adalah favicon modifikasi sendiri. Bikinnya gampang kok. Saya akan tunjukkan kepada anda sekalian bagaimana mengganti logo blog/favicon blogspot:

1. Persiapkan gambar untuk favicon. Anda bisa menggunakan editor gambar kesukaan untuk berkreasi. anda bisa menggunakan Adobe Photoshop.
2. Ukuran icon, anda bisa buat ukuran 27 x 20 pixel. Menurut saya ukuran maksimal untuk tinggi icon agar terlihat proporsional adalah 30 pixel.
3. Simpan dengan ekstensi gif (File, Save As, File Type : gif). Ekstensi untuk favicon sebenarnya bisa dibuat dalam ekstensi gif, ico dan png. juga bisa dibuat beranimasi
4. Upload gambar ke ImageShack, Flickr atau dari Picasa dan dapatkan link direct downloadnya. Contoh "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFhGHDkt5c6sH0-Pb_PeFcZRGKpcaTjIJVAy3MTDL8wuPoLu_En7-wuBILfbCccHMOXgUUqo8Yh5a-UmdaGwo_9rmv-9s5TDFavKoEDPTdg5G4AOw0vzLE7HfmorQMu1d8xCGhfYYQTZo/s512/icon3c.gif"
   
   Anda juga dapat mengupload file favicon ke
   
   1. http://www.iconj.com/favicon_hosting.php
   2. http://www.picpanda.com
   3. http://www.fileden.com
   4. http://mirrorimg.net
   5. http://www.imageboo.com
5. Login ke Dashboard blogspot anda, masuk ke menu Layout, Edit HTML
6. Tekan CTRL+F, masukkan kata: </head>, letakkan kursor anda sebelum tanda </head> tersebut
7. Selipkan syntax berikut :
   <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFhGHDkt5c6sH0-Pb_PeFcZRGKpcaTjIJVAy3MTDL8wuPoLu_En7-wuBILfbCccHMOXgUUqo8Yh5a-UmdaGwo_9rmv-9s5TDFavKoEDPTdg5G4AOw0vzLE7HfmorQMu1d8xCGhfYYQTZo/s512/icon3c.gif' rel='shortcut icon'/> (NB: Ganti alamat https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFhGHDkt5c6sH0-Pb_PeFcZRGKpcaTjIJVAy3MTDL8wuPoLu_En7-wuBILfbCccHMOXgUUqo8Yh5a-UmdaGwo_9rmv-9s5TDFavKoEDPTdg5G4AOw0vzLE7HfmorQMu1d8xCGhfYYQTZo/s512/icon3c.gif sesuai alamat icon anda di ImageShack)
8. Save Template dan lihat perubahan yang terjadi (View Blog) - Selesai

Silahkan dicoba.

Untuk memaksa browser menampilkan favicon diatas, anda dapat menambahkan kode:

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFhGHDkt5c6sH0-Pb_PeFcZRGKpcaTjIJVAy3MTDL8wuPoLu_En7-wuBILfbCccHMOXgUUqo8Yh5a-UmdaGwo_9rmv-9s5TDFavKoEDPTdg5G4AOw0vzLE7HfmorQMu1d8xCGhfYYQTZo/s512/icon3c.gif' type='image/gif' rel='icon' />

Tepat dibawah kode point no. 7.

Favicon dengan tipe file gif bisa muncul dengan baik di browser firefox, namun tidak tampak di IE. Untuk memastikan setiap icon muncul dengan konsisten, tipe file harus .ico. Silahkan kunjungi http://www.html-kit.com/favicon/ untuk membuat file .ico gratis!

Semoga bermanfaat.

Posted on 21.33 / 0 comments / Read More