Cara Membuat Top Menu Di Blogger

Top menu di blogger sebagian besar template gratisan alias free yang ada, sudah di lengkapi dengan top menu. Namun untuk yang belum ada dan kepingin blognya di kasih Top Menu ini ni tutorialnya... di simak ya..

Ikuti langkah - langkah di bawah ini :

1. Masuk ke account Blogger kamu.
2. Lalu pilih Tataletak/layout dan pilih tab Edit Html.
3. Jangan lupa backup Blog kamu dulu, klik Download Template Lengkap dan juga contreng Expand Template Widget.
4. Cari Kode di bawah ini :


]]></b:skin>

Copy paste kode di bawah ini di atas kode tersebut

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}


1. Kemudian Cari kode di bawah ini :


Catatan agar Top Menu sesuai dengan blog kamu, perlu disesuaikan warna background, dan ukurannya(width dan height).

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>


copy paste kode di bawah ini tepat di bawahnya. Untuk kode yang berwarna merah dan biru sesuaikan dengan kebutuhan menu blog kamu.

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

</div><!-- akhir bg_nav -->



1. OK sudah selesai jangan lupa klik simpan template, trus cek deh blog kamu sudah ada Top menunya kan?

Mudah bukan? Semoga berhasil..

Continue

Menambah Fungsi Read More di Blogger 2

Menyambung artikel saya kemarin, fungsi Jump Breaks dari Blogger ini tak luput dari kelemahan. Bagi mereka yang menggunakan template minim modifikasi, Jump Breaks harus dimasukkan post by post atau harus dimasukkan ketika anda menulis tiap post (karena bukan fungsi otomatis). Kalau kelupaan ya blanggentak... postnya luber-luber.

Kelemahan lain adalah fungsi ini tidak bisa diletakkan di dalam tag <div> dan </div>. Jika Jump Breaks diletakkan di antara kedua tag tersebut, template anda bisa membacanya menjadi sebuah kode. Akibatnya antara lain sidebar njeblos masuk ke bawah post, template jadi acak adul dan lain sebagainya.

Perhatikan kode di bawah ini:

<div>
Awal artikel anda
<!-- more -->
Sisa artikel anda
</div>

Kode di atas adalah contoh kasus yang terjadi ketika anda meletakkan Jump Breaks di antara <div> . Agar tidak mengubah template, anda sebaiknya menutup tag dengan  </div> dan melakukan pemotongan seperti ini:

<div>
Awal artikel anda
</div>
<!-- more -->

<div>
Sisa artikel anda

</div>

Bagaimana cara memperbaikinya? Pertama, hapuslah dulu semua tag  <div> yang muncul di post (atau tulis/kopi paste ulang artikel anda tanpa menambahkan aksesoris dulu dari teks editor). Berikutnya, lakukan pemotongan dengan menggunakan Jump Breaks dan terapkan penambahan aksesoris dengan melakukan blok (shift + klik, masa ga tau sih? hehehe...) dari awal artikel hingga sebelum Jump Breaks dan selanjutnya menambah aksesoris teks setelah pemotongan hingga akhir artikel (masih menggunakan blok).

Begitu? Semoga berhasil.

Post mengenai Read More ini akan saya lanjutkan di lain kesempatan karena hari ini saya kok ngantuk banget. Hehehehe... 

Continue

Menambah Fungsi Read More di Blogger 1

Mendengarkan permintaan banyak penggunanya, pengelola Blogger secara resmi akhirnya mengeluarkan fitur terbaru mereka yaitu Post Summaries dengan Read More (apaan tuh? Singkatnya – potongan artikel dengan penggunaan link berupa teks ‘baca lanjutan’ yang akan memperpendek posting di halaman utama). Dengan adanya fitur ini kita tidak lagi membutuhkan trik penggubah template untuk menampilkan post summaries dan penggunaan read more jadi-jadian di halaman utama.

Blogger memperkenalkan apa yang disebut Jump Breaks (Lompatan patah-patah? Yang jelas bukan goyang poco-poco, heheheh…). Jump Breaks adalah tag special yang bisa diletakkan dimanapun di halaman post dengan menggunakan text editor Blogger. Jika anda memasukkan Jump Breaks ke dalam post maka bagian atas dari post (atau bagian sebelum Jump Breaks) akan menjadi bagian potongan atau penggalan artikel.

Gimana tuh cara memasukkan Jump Breaks? Jika anda menggunakan text editor versi baru, anda bisa dengan mudah memasukkan Jump Breaks melalui text editor dengan langsung klik tombolnya. Tapi jika anda menggunakan text editor versi lama maka anda harus mengetikkan tag jump break secara manual ke dalam post. Caranya mudah saja, letakkan <!-- more --> pada post untuk memenggal artikel (Perhatikan bahwa  ada tambahan spasi setelah kata more).

Sayangnya jika anda menggunakan template mutakhir versi lama yang sudah diutak-atik sedemikian rupa sehingga, kemungkinan anda akan mengalami masalah. Mungkin dengan penyelesaian berikut masalah bisa diatasi: masuk ke halaman layout blogger anda. Pilih edit HTML dan centang expand Widget templates. Lalu cek kode berikut:

<data:post.body/>

Kalau sudah anda temukan, masukkan kode berikut di bawah kode yang tertera di atas.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Lalu coba untuk memenggal post terbaru anda dan cek halaman depan. Taraaa… post anda sudah terpotong dan muncul kalimat Read More yang berisi link menuju halaman post. Tunggu-tunggu… "Read More"? Bisa diganti nggak tuh... saya ingin menggantinya menjadi "Okelah Kalau Begitu"? Oho! Mudah sekali, masuk ke halaman Layout Blogger, pilih menu Page Elements. Edit bagian Blog Post pada kolom Post Page Link Text dan anda bisa memasukkan kata yang anda pilih di sana.

Bagaimana kalau kata Read More diganti dengan menggunakan gambar? Bisakah? Bisa juga… anda bisa mengganti dengan pilihan gambar. Kode berikut bisa dicoba:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="ganti_dengan_url_gambar_anda" border="0" alt="keterangan gambar" /></a>
</div>
</b:if >

Tentunya anda harus mengubah kalimat "ganti_dengan_url_gambar_anda" dengan url gambar anda dan  "keterangan gambar" dengan keterangan tambahan untuk gambar.

Mudah-mudahan berhasil!

Bahasan tentang Post Summaries dan Read More ini masih belum selesai, tapi berhubung saya belum sarapan – saya cari makan dulu. Disambung di post berikutnya yaa? Hihihi…

Continue

Cara Menambah Widget di Bawah Header Blog

Selamat Hari Natal ya buat yang ngerayani.. semoga Tuhan Yang Maha Esa selalu melindungi kita semua.

Jurus permak Blogs kali ini tentang cara menambah widget di bawah header. Sebagian besar tempalte blogspot kita tidak dapat menambahkan widget di bawah header. Why alias Kenapa kok bisa gitu? ini karena tempalte telah mengunci kode htmlnya agar tidak bisa menambah Widget di bawah Header.

Untuk apa sich kok di tambah widget segala? banyak gunanya, kalau kamu suka adsense bisa nampilin iklan adsense disini, kalau yang suka affilied juga bisa buat nampilin iklannya atau keperluan yang laun juga boleh tergantung selera. Lalu kalau mau nambah widget bagaimana caranya? tenang saja menurut pengalaman di dunia per permakan semua ada caranya. langsung sajo yo....

Ikuti langkah-langkah berikut ini :

1. Masuk ke Account Blogger kamu.
2. Pilih tab Tata Letak klik Edit Html.
3. Jangan lupa backup template dengan klik Download Template Lengkap setelah itu conntreng Expand Template Widget.
4. Cari kode di bawah ini :


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>


5. ubahlah kode berwarna merah menjadi seperti di bawah ini:


<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>


6. Setelah selesai klik Simpan Template
7. Lihat pada Element halaman bila disana sudah terlihat ada tulisan tambah gadget berarti kamu dah berhasil.. selamat ya.. :)

catatan : maxwidgets dapat di ubah sesuai keinginan kamu.

Ok mudah bukan, gmana komentar anda tentang permak blogs ? asik bukan kalau sukses..
Good luck deh buat kalain... semoga berhasil...

Continue

Cara Pasang Shoutbox

Holaho! Gimana kabar, permakers? Tempo hari saya sudah memperlihatkan beberapa pilihan gaya shoutbox. Sudah anda pilih salah satu? Belum? Lho kok belum? Ya sudah sekarang dikerjakan, kalau sudah selesai dikumpulkan di meja guru... heheheheheh... untuk memberi contoh pemasangan shoutbox, saya pilihkan satu ya?  Kenapa satu? Supaya ringkas dong, kalau dipilih enam belas namanya bukan contoh tapi nekat. Pilihan saya jatuh ke http://www.shoutmix.com tanpa ada alasan khusus toh sebagian besar shoutbox memiliki proses yang sama dalam pendaftarannya.

1. Yang pertama anda lakukan adalah melaju ke situs shoutbox dan melakukan pendaftaran (coba cari teks register atau join in untuk bergabung). Di shoutmix.com, klik button create shoutbox. Anda akan dibawa ke form pendaftaran, isi semua form yang dibutuhkan dengan lengkap, setelah selesai mengisi klik continue. Eh, tapi jangan lupa untuk mencentang (centang atau contreng si yang bener?) kotak di depan tulisan "I have read and agree to Terms of Service". Selesai, lanjutkan dengan continue.

2. Pada halaman berikutnya anda akan dibawa ke halaman kontrol shoutmix. Untuk menyingkat waktu, langsung saja klik link Get Codes pada kotak Quick Start. Sebelumnya maaf karena saya mencoba membuat shoutbox ini pada dummy-blog alias blog coba-coba maka beberapa bagian saya blur / kaburkan. Di halaman berikutnya anda sudah masuk ke bagian kode. Tentukan panjang dan lebar kotak, lalu copy kode yang ada di kotak Generates Codes (untuk jaga-jaga bolehlah anda paste ke notepad dulu).

3. Kembali ke Blogspot. Login dengan username dan password anda, jangan username tetangga, kasihan dia. Lalu masuk ke menu Layout blog yang hendak anda berikan shoutbox, pilih Page Elements kemudian pilih lokasi yang tepat untuk memasang shoutbox anda nanti (jangan dipasang di kompor). Misalnya anda memilih sidebar, klik add gadget, pilih  opsi HTML / Javascript dan paste kode shoutbox di lokasi gadget tambahan.

Sudah. Selesai. Finito. Done. Mudah kan? Klik view blog dan makjegagig, shoutbox sudah mejeng. Misalnya ukurannya kegedean atau terlalu lebar, utak atik lagi di kolom panjang lebar shoutmix.

Selamat mencoba.

Continue

Cara Menambahkan Gambar di Header.

Ingin menambahkan gambar di header? gak tau caranya? ok baca terus artikel ini pasti kamu temukan caranya. Waktu pertama kali kita buat Blog di header pasti ada Judul dan Diskripsi Blog, nah seringnya kita pengen ganti atau menambahkan dengan gambar atau logo. Lalu kita berpikir bagaimana ya caranya? tik.. tok.. tik.. tok.. ( sok berpikir) ting!!! ahaaaa.. begini caranya :

1. Masuk dulu ke account blogger kamu.
2. Pilih Tata Letak klik edit pada " nama blog kamu(header)" seperti di bawah ini.
   
3. Setelah muncul Mengkonfigurasi Header (header configuration) klik browser untuk memilih gambar di komputer kita.

setelah pilih gambar klik open, tunggu sampai gambar terlihat lalu pilih penempatan gambar mau diletakan "dibalik judul dan keterangan" atau "selain judul dan keterangan"

4. Setelah semua selesai klik tombol Simpan lalu klik lihat blog untuk melihat hasilnya.

Gmana mudah bukan ? atau masih bingung? seperti biasa kalau yang masih bingung ninggalin pesan di komentar aja, pasti di balas kok.. ok..

Semoga berhasil ya..

Continue

Cara Sembunyikan Judul dan Diskripsi Blog

Yes setelah kemaren sudah di kasih tau cara permak bagian navbar, sekarang kita permak blog bagaian Header. Waktu pertama kali buat blog dan templatenya masih standart pasti di bagian header blog terdapat Judul dan diskripsi. Ada yang suka dengan Judul dan diskripsi bawaan blogger tapi ada juga yang pengen menggantinya dengan gambar logo. Nah kalau yang pengen menggati judul dan diskripsi blog dengan gambar, sembunyikan dulu Judul dan diskripsinya. Gimana caranya bang? ok sekarang di kasih tau cara sembunyikan judul dan diskripsi blog dulu ya ? ntar kalau sudah bisa baca artikel cara memasang gambar di header OK bro.... langsung ke KTP eh TKP

Ikuti langkah - langkah di bawah ini :

1. Masuk dulu ke Account blogger kamu.
2. Pilih Tata Letak trus klik Edit HTML ( jangan lupa contreng "Expand Template Widget").
3. Untuk menyembunyikan judul Blog cari kode di bawah ini :
   
   
   #header h1 {
   margin:5px 5px 0;
   padding:15px 20px .25em;
   line-height:1.2em;
   text-transform:uppercase;
   letter-spacing:.2em;
   font: normal normal 200% Georgia, Serif;
   display:none;
   }
   
   
   
   lalu tambahkan kode yang berwarna merah sebelum tanda " }"


4. Untuk menyembunyikan Diskripsi Blog cari kode di bawah ini :
   
   
   #header .description {
   margin:0 5px 5px;
   padding:0 20px 15px;
   max-width:700px;
   text-transform:uppercase;
   letter-spacing:.2em;
   line-height: 1.4em;
   font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
   color: #999999;
   display:none;
   }
   
   
   
   lalu tambahkan juga kode berwarna merah sebelum tanda "}"


5. setelah selesai klik simpan template

Jadi dech Judul dan Diskripsi Blog sembunyi.....
Bagaimana Permakers bisa kan? kalau bingung tinggalin pese di komenar aja, pasi di jawab..
Kalau sudah sembunyi tinggal nambahin deh gambar logo di header biar gak keliatan kosong. Mau tau caranya? baca aja Cara Menambahkan Gambar di Header.

OK semoga berhasil ya....

Continue

Pilih-pilih Shoutbox

Salah satu widget menarik yang disediakan terutama untuk blogspot adalah sistem chatting langsung tayang yang dinamakan shoutbox (istilah lainnya chatterbox, tagboard atau saybox). Widget ini memiliki keistimewaan karena mudah digunakan dan siapapun dapat berinteraksi langsung dengan cepat dan instan. Pesannya tentu singkat karena memang diformat seperti itu, kalau pesannya panjang, biasanya sudah disediakan kolom komentar di bawah post atau bisa email langsung si empunya blog. Karena sifatnya yang cepat singkat padat, pesan yang sudah terlalu lama ngendon di bawah urutan akan dihapus perjumlah shout tertentu (ini tentunya untuk menghemat space di server supaya tidak kebanyakan).

Pemirsa! Pe... epe... mi... imir.... sa... asa, Pemirsa! Kali ini saya tidak menjelaskan panjang lebar karena kalau terlalu panjang kasihan ibu-ibu dan kalau terlalu lebar kasihan bapak-bapak. Cara untuk memajang shoutbox saya ceritakan di post berikut, untuk kali ini - saya tebar beberapa pilihan shoutbox. Anda bisa pilih salah satu sebelum nanti masuk ke acara berikutnya, yaitu memasang shoutbox di blog.

Monggo... dipilih-dipilih...

http://cbox.ws

http://www.yellbox.com

http://www.shout-box.com

http://saybox.co.uk

http://oggix.com

http://www.sbox.ws

http://www.shoutmix.com

Tentunya masih banyak pilihan jenis, bentuk, warna dan situs penyedia. Namun seperti biasa, saya batasi tujuh aja contoh yang dimunculkan, hehehe... Setelah menemukan yang anda suka, meluncurlah ke tkp - situs penyedia shoutbox maksudnya - lalu mendaftar / register di sana. Hanya dengan mengisi form standar, anda akan mendapatkan kode html yang bisa ditempatkan di widget anda dengan memilih gadget html / javascript. Lebih lengkapnya akan saya beberkan di post berikut.

Selamat memilih.

Continue

Cara Buat Navbar Jadi Transparant

Satu lagi nich cara permak blogs bagian navbar, kalau kemaren udah di kasih tau cara menyembunyikan Navbar dan cara membuat navbar otomatis hidden. Nah sekarang di kasih satu lagi nich cara buat navbar jadi transaparant, maksudnye transparant gimana bang? maksudnye jika pointer tidak berada di Navbar blogger navbar akan kelihatan samar atau transparant, tapi jika Pointer berada di navbar blogger maka Navbar akan kelihatan jelas dan terang.Trus gimane caranye bang? ok tanpa banyak cingcong langsung aje ye ke TKP.......
Seperti biasa ikuti langkah - langkah di bawah ini :

1. Log In ke Blogger lalu ke menu Layout dan masuk Edit HTML
2. Kemudian cari kode



]]></b:skin>




3. Lalu copy kode dibawah kemudian paste/tempatkan diatas kode tadi



]]></b:skin>

#navbar-iframe{opacity:0.2;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:0.5;filter:alpha(Opacity=100, FinishedOpacity=50)}




4. Kemudian klik simpan Template dan lihat hasilnya .. bim salabim ka arba arba jadi dech...

Oh ya catatan, Jika kalian sudah menggunakan trik menyembunyikan atau auto-hide navbar blogger harap dihapus dulu kodenya okey..

Semoga berhasil

Continue

Cara Pasang Icon Yahoo Messenger

Salah satu widget yang akan mendekatkan anda pada pembaca blog adalah dengan memasang ikon Yahoo! Messenger atau instant messenger lain. Ikon ini menjadi semacam status penunjuk bahwa pembaca blog bisa dengan langsung menghubungi anda melalui YM untuk konsultasi mengenai artikel yang anda tulis atau sekedar berkenalan. Hei, siapa tahu jodoh, kan? :D

Kali ini saya akan mengajak anda memasang ikon Yahoo! Messenger. Kenapa YM? Karena instant messenger ini memiliki pengikut paling banyak, bahkan mungkin yang terbanyak di antara instant messenger lain sejak era chatting lewat MIRC berakhir. Dengan menggunakan ikon ini, pengunjung akan tahu saat account Yahoo! Messenger menyala aktif. Syarat pertama untuk bisa memasang ikon ini tentunya adalah anda harus punya account YM lebih dulu.

Cara untuk memasang ikon YM di blogspot cukup mudah. Anda hanya perlu memasang kode khusus dari Yahoo di widget anda. Bagaimana tuh caranya? Masuk ke dashboard Blogspot anda, pilih menu Layout atau Tata Letak lalu tambahkan gadget di halaman Page Element. Pilih format HTML/Javascript untuk meletakkan kode berikut:

<a href="ymsgr:sendIM?account_yahoo_anda"><img border="0" src="http://opi.yahoo.com/online?u=account_yahoo_anda&m=g&t=2&1=cn"></a>

Anda hanya perlu mengganti kata account_yahoo_anda dengan id YM anda.

Save. Selesai. Mudah kan?

Eit tunggu dulu, masih ada tambahan dikit lho...

Ini yang seru: anda bisa memilih gambar yang hendak anda gunakan, karena Yahoo sudah menyediakan banyak pilihan. Serunya lagi? Yahoo selalu mengupdate jumlah gambar yang mereka sediakan.

Caranya adalah mengganti kode t=2 di atas dengan nomor jenis gambar yang anda pilih, misalnya t=10 atau t=12. Sampai tulisan ini ditulis ada 24 jenis icon yang sudah disediakan oleh Yahoo, berikut adalah icon tersebut mulai t=1 sampai dengan t=24:

1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 
13. 
14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 

Semoga berhasil! ;)

Continue

Cara Pasang Favicon

“Apa sih Favicon itu?”

“Favicon adalah singkatan dari Favorite Icon.”

“Oh… Favorite Icon ya…?”

“Betul.”

“Ya ya…”

“…”

“….”

“Ada lagi yang ingin ditanyakan?”

“Apa itu Favorite Icon?”

“….”

Favicon adalah gambar kecil yang tampil pada tab browser atau di tampil di depan url pada kolom address pada browser anda. Untuk mendapatkan jati diri, memperkenalkan situs supaya lebih unik atau cuma karena sudah bosan dengan ikon blogger (huruf b warna putih dengan background oranye) yang muncul di semua blog keluaran blogspot, anda bisa menggunakan favicon. Cara untuk menggantinya mudah sekali kok. Siapkan piring anda. :D

Cara Kreatif:

Pertama tentunya anda harus menyiapkan gambar anda, format boleh apa saja mulai dari jpeg, gif sampai png (format yang biasa digunakan untuk icon adalah .ico). Nah setelah gambar siap, kini yang jadi masalah adalah ukurannya. Kalau memiliki niat yang sudah di ubun-ubun dan tekad yang bulat , maka anda bisa menyiapkan image editor anda dan melukis atau menulis gambar favicon anda (pakai resolusi kecil untuk hasil akhir terbaik – sekitar 16x16px).

Tapi kalau anda sangat-sangat menyukai sebuah gambar dan mengalami kesulitan meredusi ukurannya, manfaatkan beberapa link berikut – mereka akan mengecilkan ukuran gambar sekaligus merubah format gambarnya ke .ico untuk anda:

• http://www.favicon.cc/
• http://tools.dynamicdrive.com/favicon/
• http://www.favicongenerator.com/
• http://www.htmlkit.com/services/favicon/
• http://www.degraeve.com/favicon/
• http://www.favicon.co.uk/
• http://www.prodraw.net/favicon/index.php

Kok cuma tujuh aja nih? Yang lainnya sih banyak, anda tinggal cari saja di search engine, kan?

Setelah gambar siap, upload ke hosting gambar gratis. Ada banyak kok, misalnya photobucket atau imageshack. Ambil direct link ke gambar yang sudah anda upload.

Langkah berikutnya adalah tancap gas ke dashboard Blogspot anda. Masuk ke menu Layout atau Tata Letak. Pilih Edit HTML. Lirik kode-kode yang muncul, jangan takut, mereka tidak akan menggigit anda. Masukkan kode berikut di antara tag <head> dan </head> (saya biasa meletakkan sebelum tag </head> atau di bawah <title><data :blog.pageTitle/></title>).

Kode Favicon:

<link rel="shortcut icon" href="direct_link_gambar_anda_tadi.jpg" />

Selesai? Simpan perubahan yang anda lakukan. Refresh blog anda dan taraaaa… favicon sudah mejeng.

Cara Jalan Pintas:

Oke, anda adalah orang supersibuk yang siang ini harus terbang ke Singapura untuk bertemu client dan malam nanti ada meeting di Arab Saudi. Anda tidak sempat membuat favicon sendiri. Atau anda benar-benar tidak tahu bagaimana menggunakan image editor. Santai saja, internet menyediakan segalanya. Di lokasi berikut anda bisa mendownload atau mendapatkan pencerahan pilihan favicon yang sesuai dengan situs anda.

1. http://www.iconj.com
2. http://www.freshfavicon.com/
3. http://favicon-generator.org/gallery/
4. http://mppierce66.home.comcast.net/~mppierce66/web/fi/
5. http://www.fineicons.com/en/favicon-gallery
6. http://blog.econsultant.com/favicon-gallery-index
7. http://thefavicongallery.com/

Yah? Kok tujuh lagi? Habis saya suka angka tujuh. Hehehe…

Semoga Berhasil. ;)

Continue