Cara Mengganti Ikon Pada Address Bar

Jika anda mempunyai blog pada Blogger.Com tentunya tampilan default pada Address Bar Blogger atau yang disebut dengan favicon adalah seperti pada samping sebelah kanan ini.

Tetapi bagi anda yang ingin mengganti tampilan tulisan huruf B pada ikon address bar (kolom alamat pada tab & kolom alamat url untuk mengetikkan alamat situs) pada Blogger sangatlah mudah anda hanya akan menambahkan kode pada HTML template blog anda yang ingin diganti tampilan huruf B (ikon pada address bar blogger) tersebut.

Berikut Caranya :

Dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).

Jika anda susah untuk membuat ikon/icon pada address bar dibawah ini ada beberapa tool/peralatan yang dengan mudah untuk membuatnya.
Setelah anda selesai membuat icon favicon/address bar langkah langkah selanjutnya adalah menyimpan gambar yang sudah dibuat lalu kita upload pada hosting gambar yang biasa kita gunakan seperti photobucket, Imageshack, Album Web Picasa dll. nanti akan dibahas dibawah tutorial.

Setelah login pada blogger
kemudian masuk ke "Tata Letak --> Edit HTML"
Kemudian copy kode berikut dibawah ini :
<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>

atau bisa juga seperti kode dibawah ini :
<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>


Langkah selanjutnya adalah menaruh kode tersebut diatas sebelum/diatas kode :

</head>

Ganti huruf yang berwarna merah dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di tempat hosting gambar.

Langkah kemudian adalah menyimpannya dan selesai.

Panduan Hosting Gambar :


sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :
  1. Login ke picasa dengan account google di http://picasaweb.google.com
  2. Tekan tombol I accept.
  3. Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
  4. Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
  5. Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
  6. Tekan tombol browse dan arahkan pada file yang akan anda upload
  7. Tekan tombol start upload untuk menguploadnya ke dalam server picasa
  8. Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
  9. Klik kanan gambar tersebut dan pilih properties.
  10. Anda akan mendapatkan URL gambar yang kurang lebih seperti dibawah ini
    http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
  11. Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
  12. Link gambar yang bertuliskan
    http://img98.imageshack.us/img98/9617/image3cr0.gif
    anda ganti dengan link yang baru yaitu seperti
    http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
  13. Lakukan hal yang sama untuk gambar2 yang lain


atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif

Note : Images by Mr. Kendhin 
http://trik-tips-tutorial.blogspot.com/2010/02/cara-mengganti-ikon-pada-address-bar.html

Tidak ada komentar:

Posting Komentar