Thursday, 9 February 2012

Tips, Trick dan Cara Pasang Favicon di Blogger

Sekalipun hanya berupa gambar yang teramat kecil, namun sebagian besar blogger menaruh perhatian besar terhadapnya. Banyak hal dilakukan blogger untuk "mengaktualisasikan dirinya melalui favicon". Ya..., favicon tak ubahnya sebuah profil blogger atau identitas diri yang perlu dibuat secara khusus dalam berbagai karakter yang kadang kala mencerminkan watak atau kepribadian pemilik blog, semangat, obsesi, bisa juga agar bisa menjadi symbol orientasi posting atau bahkan bisa juga berisikan gambar yang bersifat iseng semata .

Favicon akan selalu terlihat saat web/blog dibuka. Dia akan terlihat pada ujung disebelah kiri address bar dalam box kecil yang selalu disediakan oleh semua browser serta akan ditampilkan juga pada tab. Ada beberapa jenis file image yang dapat digunakan sebagai favicon (.ico, .gif, .jpg, .png). Bahkan di Mozilla anda dapat menggunakan favicon animasi gif. Sayangnya tak satupun browser lain yang kompatibel terhadap animasi gif kecuali SeaMonkey. Ketika sebuah blog di blogger kita buat, favicon default blogger akan dapat langsung terlihat. Favicon berbentuk logo blogger dengan ukuran 16x16 (pixel) » . Favicon blogger seperti ini dapat kita rubah/ganti dengan favicon baru. Buatlah sebuah image kecil berukuran 16x16 (px). Jika anda malas untuk membuat, lakukan saja browsing dan temukan situs-situs penyedia favicon gratis.



Cara Membuat (pasang) Favicon di Blogger
Ada beberapa cara untuk memasang favicon di blogger. Anda dapat melakukannya melalui Page Elements atau Edit HTML.

Cara I: Pasang Favicon Melalui Elemen Laman (Page Elements)


Edit Favicon
Klik: Perbesar Gambar
  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Design (Rancangan).
  4. Halaman Rancangan | Elemen Laman (Design | Page Elements).
  5. Arahkan cursor ke ujung kiri-atas halaman, kemudian klik Edit pada Elemen yang bertuliskan Favicon. Tunggu beberapa saat hingga terlihat sebuah window baru "Konfigurasikan Ikon Favorit (Upload custom favicon)".
  6. Halaman Konfigurasikan Ikon Favorit (Upload custom favicon):
    • Klik "Choose File (Browse)"
    • Pilih file image yang akan digunakan sebagai favicon. File gambar harus berbentuk bujur sangkar (segi empat sama sisi). Sebaiknya gunakan yang berukuran di bawah 20x20 (pixel).
    • Klik Simpan (Save).
  7. Favicon baru (custom favicon) hasil upload akan terlihat di ujung kiri-atas Halaman Rancangan | Elemen Laman (Design | Page Elements).
  8. Favicon ini biasanya tidak akan dapat langsung terlihat saat dibuka di browser yang sama dengan ketika edit favicon dilakukan. Favicon hanya akan terlihat setelah anda restart browser atau PC. Agar anda bisa langsung melihat hasilnya, bukalah blog di browse berbeda yang sebelumnya belum digunakan untuk membuka blog anda.
Sampel Favicon:
: http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-favicon-indonesian-flag.jpg

Cara II: Pasang Favicon Melalui Edit HTML


  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Design (Rancangan).
  4. Klik Edit HTMl.
  5. Cari kode kode <head>.
  6. Letakkan kode berikut di atas kode <head>.
    <link href='http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-favicon-indonesian-flag.jpg' rel='icon' type='image/jpg'/>
  7. Klik Simpan Template (Save Template).
  8. Buka blog duntuk melihata hasilnya.
    Catatan:
    Untuk melihat hasil pemasangan favicon, buka blog di browser lain yang belum digunakan untuk membuka blog anda! Jika editing di Opera, buka blog di Mozilla atau Chrome!

Cara III: Trick Membuat Favicon Langsung Terlihat



Dengan cara ini anda tak perlu restart bowser, PC atau membuka blog dibrowser berbeda. Favicon akan langsung terlihat begitu blog anda buka!
  1. Edit HTML Kembali ke halaman edit html dan cari kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'>
  2. Simpan kode html Favicon di atas(kode html dalam box warna biru).
  3. Klik Simpan Template (Save Template).
  4. Langsung buka blog dan lihat hasilnya!

Catatan/Keterangan:
  1. Dimanapun pasangnya, gunakan image berukuran 16x16 (px).
  2. Saat pasang favicon lewat Page Elemen (Elemen Laman) harus menggunakan image berbentuk bujur sangkar (segi empat sama sisi), sedangkan jika menggunakan cara ke II dan ke III (Edit HTML) tak harus dalam bentuk bujur sangkar.
  3. Gunakan file image favicon .ico, .gif, .jpg, .png.
  4. Jika ingin menampilkan favicon beranimasi pada Mozilla atau SeaMonkey anda dapat menggunakan gambar animasi (gif) sebagai favicon.
    Favicon animasi gif:
    http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-okong-mbleding-favicon.gif
    <link href='http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-okong-mbleding-favicon.gif' rel='icon' type='image/gif'/>

Beberapa tips penggunaan kode html favicon



Favicon berekstensi .ico:
<link href='favicon.ico' rel='icon' type='image/x-icon'/>
Favicon berekstensi .jpg:
<link href='favicon.jpg' rel='icon' type='image/jpg'/>
Favicon berekstensi .gif:
<link href='favicon.gif' rel='icon' type='image/gif'/>
Favicon berekstensi .png:
<link href='favicon.png' rel='icon' type='image/png'/>
Posted by at 22:55
Labels: , ,

3 comments:

  1. info cerdas Ir. Nur ustadi, M. Pd18 November 2013 at 19:36

    Boleh juga mas, saya mau praktekkan. Tks

    http://colectioninfo.blogspot.com

    ReplyDelete
  2. Indonesia21 March 2015 at 08:47

    Keren trimakasih ya bang ....

    main juga ke blog ane ya pertanianindonesia.com

    ReplyDelete
  3. Unknown9 August 2016 at 13:26

    memang keren dan daging semua, mas admin numpang tanya blog anda apakah masih diupdate?

    ReplyDelete

Subscribe to: Post Comments (Atom)