ShoutMix chat widget

Jumat, 10 Juni 2011

Cara Mengganti Logo Blogger dengan Logo Sendiri

Tips Blogger yang akan saya bahas kali ini bukan hal yang baru, tapi melaikan merupakan hal yang wajib diketahui oleh para Blogger. Biasanya bagi blogger yang masih pemula atau baru Belajar Blogger, seperti halnya saya sendiri, kurang tahu dan masih bertanya-tanya bagaimana Cara Mengganti Logo Blogger Dengan Gambar Sendiri. Yang merasa kurang paham dengan cara ini bisa melihat contohnya pada Adress Bar Blog saya ini, jika blogger yang baru membuat blognya biasanya pada adress bar masih menggunakan logo Blogger yaitu huruf "B". Nah untuk merubahnya yang sahabat perlukan adalah gambar yang sahabat inginkan untuk dijadikan logo, tapi syarat gambarnya harus sudah terupload di Internet. Jangan khawatir banyak penyedia upload foto di Internet, contohnya saja PhotoBucket dan Picassa.


Gambar diatas adalah favicon modifikasi saya. Bikinnya gampang kok. Saya akan tunjukkan kepada sahabat semua bagaimana mengganti favicon blogspot :


Persiapkan gambar untuk favicon. Sahabat bisa menggunakan editor gambar kesukaan untuk berkreasi. Saya menggunakan Adobe Photoshop.
Ukuran icon yang saya buat adalah 30 x 30 pixel. Menurut saya ukuran maksimal untuk tinggi icon agar terlihat proporsional adalah 30 pixel.

Simpan dengan ekstensi gif (File, Save As, File Type : gif). Ekstensi untuk favicon sebenarnya bisa dibuat dalam ekstensi gif, ico dan png. Saya pilih gif karena lebih mudah pembuatannya dan ukurannya relatif kecil, juga bisa dibuat beranimasi (tidak saya bahas sekarang)
Upload gambar ke Flickr atau dari Picasa dan dapatkan link direct downloadnya. 
Contoh yang saya pakai ada di
https://lh3.googleusercontent.com/-3gKCXaa53FM/Te2kYKwe7uE/AAAAAAAAANc/_3zyjkHSR8w/s144-c/Alkazep.jpg

Login ke Dashboard blogspot Sahabat, masuk ke menu Layout, Edit HTML
Cari Teks :

<title><data:blog.pageTitle/></title>
<link href= YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    <b:skin><![CDATA[/*

Untuk memudahkan Tekan CTRL+F, masukkan kata:  <title><data:blog.pageTitle/></title> ,

Gantikan syntax berikut :
(NB: Ganti alamat
https://lh3.googleusercontent.com/-3gKCXaa53FM/Te2kYKwe7uE/AAAAAAAAANc/_3zyjkHSR8w/s144-c/Alkazep.jpg  sesuai alamat icon sahabat di ImageShack)
pada  teks : YOUR-FAVICON-URL

untuk lebih jelasnya, akan tampak seperti berikut :

<title><data:blog.pageTitle/></title>
<link href= https://lh3.googleusercontent.com/-3gKCXaa53FM/Te2kYKwe7uE/AAAAAAAAANc/_3zyjkHSR8w/s144-c/Alkazep.jpg ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    <b:skin><![CDATA[/*

Save Template dan lihat perubahan yang terjadi (View Blog) - Selesai.

Semoga bermanfaat.

0 komentar: