English French German Spain Italian Dutch Russian Portuguese Japanese Korean

Selamat Datang ..... di Blog TIK Pak Budi...!!! Mari .... kita saling berbagi ilmu yang kita miliki....!! Semoga Alloh selalu menuntun jalan kita...! Amin...



Sunday, April 3, 2011

Cara Membuat Icon Pada Address Bar Blog Anda (Favicons)

0

. Thursday, August 28, 2008

Kita pasti sering melihat blog atau web yang memiliki Icon pada Address Bar-nya. Icon yang dimaksud adalah Favicon. Favicon biasanya digunakan untuk ciri khusus dari blog atau web pemiliknya. Karena ciri khusus inilah, Favicon ini berbeda-beda antara satu blog dengan blog lainnya, antara web dan web lainnya. Yang akan saya bahas adalah merubah Favicon khusus untuk pemilik Blogger Account. Walaupun tidak menutup kemungkinan bisa diterapkan pada web atau blog yang lainnya.

Kita ambil sebagai contoh Favicon Detiknews.com. Pada address bar atau pada tab diperlihatkan Favicon-nya adalah bulatan merah dengan teks 'd'. Pengguna Mozilla Firefox secara otomatis menampilakn Favicon, akan tetapi pengguna Internet Explorer akan menampilkan Favicon setelah Kita menambahkan blog atau web pada bookmark-nya.



Bisa kita lihat, Detikhot.com memiliki Favicon yang berbeda, begitu juga Kapanlagi.com dan Blogger.com. Tentunya kita juga ingin memiliki Favicon yang berbeda dengan blog atau web yang lainnya. Berikut saya sertakan web yang bisa Anda kunjungi untuk membuat Favicon:
Pada saat pembuatan posting ini, saya juga belum merubah Favicon http://annerobudiman.blogspot.com. Saya akan membuat Favicon sendiri menggunakan Adobe Photoshop.

Langkah merubah Favicon standard di blogger.com:

1. Buat Favicon menggunakan Adobe Photoshop dengan nama icongue.png. Untuk hasil yang lebih bagus, hilangkan background sehingga hanya bentuk icon saja yang dipakai.

2. Buat postingan baru dangan judul postingan bantu. Tambahkan gambar icongue.png pada postingan bantu tersebut.




3. Ubah mode postingan menjadi Edit Html sehingga terlihat kode HTML. Copy URL gambar icongue.png ke Notepad.




4. Save Postingan Bantu tanpa harus di-Publish, postingan ini hanya sebagai alat bantu, mungkin akan dibutuhkan di lain waktu. Jadi... fungsinya postingan bantu ini adalah untuk menyimpan icongue.png ke sebuah alamat web. Apabila Anda telah memiliki tempat untuk upload, tidak perlu melakukan langkah 2 dan 3.

5. Klik Tab Layout pada blogger. Ubah mode ke Edit HTML kemudian cari tag html:
< / head >.



6. Tepat di atas tag html < / head >, tuliskan kode di bawah ini:



7. Jangan lupa, yang berwarna merah diganti dengan hasil Copy URL gambar icongue.png pada langkah 3. Begini jadinya pada blog saya http://annerobudiman.blogspot.com:




8. Langkah terakhir adalah Save Template.

9. Begini jadinya blog saya:




10. Kurang bagus memang, tapi Anda pasti bisa lebih bagus. Selamat mencoba !

0 comments:

Post a Comment

 
Design by ThemeShift | Bloggerized by Lasantha - Free Blogger Templates | Best Web Hosting