Saturday 3 April 2010

Cara Mengganti Icon Address Bar Default Blogspot

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon kecil pada address bar (kotak untuk mengetikkan alamat web) seperti gambar di samping, . Jika kita punya blog di Blogspot maka icon default blogspot lah yang akan tampil, kemudian dibarengi dengan alamat blognya.


Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu 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).

kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon

2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator dan aplikasi paint komputer atau aplikasi edit foto lain di komputer anda.

Saya akan memberitahu bagaimana mengubah ukura foto dengan menggunakan paint, caranya tekan "ctrl+w" Ubah angka 100 pada horizontal dan vertikal semau anda dan lihat hasilnya!! Setalah jadi silahkan upload ke situs  penyimpan foto misal Album Picasa, Bila masih belum tau cara mengupload ke situs Album Picasa silahkan menuju kesini. dan ambil url gambarnya!! bila tidak tahu silahkan kesini.


Bila bingung pilih saja tool Favicon Generator, caranya silahkan lihat dibawah ini:
Kunjung:
http://www.favicongenerator.com
atau
http://www.favicon.co.uk
Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau
http://favicon-generator.org
atau
http://www.favicon.cc
Anda dapat membuat favicon sendiri sesuai kreasi Anda

Klik pada tombol Browse...

Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon

Klik pada tombol Generate Favicon.

Setelah proses selesai, klik pada Click Here to Download your favicon.

Save ke komputer anda.

Kemudian Upload ke situs penyimpan foto misal Album Picasa, Bila masih belum tau cara mengupload ke situs Album Picasa silahkan menuju kesini. Dan ambil url gambarnya!! bila tidak tahu silahkan kesini.

Setelah itu .....
masuk ke "Tata Letak -->; Edit HTML" trus tempatkan "script dibawah ini" tepat diatas kode 
<b:skin><![CDATA[/* Atau bisa juga diatas kode </head> (sama-sama bisa kok!!)

<link href='Alamat Url Gambar Anda' rel='SHORTCUT ICON'/>

atau bisa juga seperti kode dibawah ini :
<link rel="shortcut icon"Alamat Url Gambar Anda"/>

Atau kalau kamu tidak mau pusing, atau ingin mencoba tutorial ini secara cepat, dan membuktikan kebenarannya 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

5 comments:

  1. Wah trik bagus.. Tx sobat!salam kenal

    ReplyDelete
  2. Setelah saya koreksi ternyata saya salah ketik, saya minta maaf kepada sobat sekalian, yang seharusnya ditaruh diatas kode "head" saya ketik dibawah mohon maaf ya!! Dengan begitu Tutorial diata sudah saya perbaiki!! scriptnya juga bisa ditaruh diatas code <![CDATA[/*

    ReplyDelete