Menambah Icon Pada Judul Postingan

M

emasang gambar atau icon di dalam blog pada satu sisi mungkin akan membuat blog kita lebih menarik tapi di sisi lain juga akan membuat loading blog kita semakin lambat. Tapi untuk temen-temen blogger yang ingin blognya tampil lebih menarik, kali ini saya punya satu lagi cara untuk memperindah blog, yaitu dengan menambah icon atau gambar di sebelah judul postingan. Tampilan judul postingan setiap template blogger berbeda-beda, tapi kebanyakan dari template tidak menyediakan fasilitas icon untuk judul postingannya. Nah, jika temen-temen tertarik berikut ini saya akan berikan langkah-langkah pembuatannya :
 

Langkah Pertama

[1]. Siapkan gambar atau logo yang ingin anda pasang dalam format .gif atau .png karena kualitasnya lebih bagus.
[2]. Resize gambarnya menjadi (20px x 20px) atau (25px x 25px). Usahakan ukuran gambarnya jangan terlalu besar agar loading blog tidak berat. 
[3]. Jika sudah, upload icon atau gambarnya ke image hosting yang anda gunakan atau upload saja pada blogger anda.

[4]. Setelah upload, copy alamat gambarnya. Untuk contoh url gambar diatas : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYOTAlrpyX_UfA9Ill6FJzMz6gBevjgy5wa61MkJT_-p0KVJlwkYMpnyk6iAvDoY6K0A-gYD1J2N9NsLdTtq4ty6KAisANJSoj3cKjTNToUplX_kAOlnBbOafBZplsJYrTDozW82pQvc/s1600/mata+%255B+HARI+%255D.png.

Langkah Kedua

[1]. Login ke blogger dengan akun anda
[2]. Kemudian menuju Tata Letak  
[3]. Pada tab menu klik Edit HTML  
[4]. Silahkan back-up dulu template dengan mengklik kotak kecil Expand Template Widget jika dirasa perlu. 
[5]. Cari kode berikut :

.post h3 {
color: #444;
font-size: 140%;
font-weight:100;
padding: 6px 0 5px 48px;
margin: 3px 5px 3px 5px;
border-bottom: 1px solid #ddd;
}

[6]. Setiap template mempunyai kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah tulisan post h3  
[7]. Kalau sudah ketemu, tambahkan kode background: url(URL gambar) no-repeat; dan edit nilai padding menjadi 6px 0px. Sehingga hasilnya menjadi seperti ini :

.post h3 {
color: #444;
font-size: 140%;
font-weight:100;
padding: 6px 0 5px 48px;
margin: 3px 5px 3px 5px;
background:  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2nOk449fDaSkcepkTsWvg2Ihl8_BKAE5aaLHLilDgcSLPZf-mihmWar75Ob8hnOQXaykmtrYMePk4R3r2ouq5NJiFYA_xVVJVKICFmdivtTSe5ihSCR2E48DuX8Mq5IVoL66X_9cpFw/s1600/headset-icon.png") 6px 0px no-repeat;
border-bottom: 1px solid #ddd;
}

[8]. Kalau sudah, klik Save Template  
[9]. Selesai

Anda bisa ganti background icon atau gambar sesuai selera, dan jika temen-temen sudah memasangnya dengan benar maka hasilnya akan tampak seperti gambar di bawah ini :

 

Bagaimana, menarik bukan..?!! hehe5..

Selamat mencoba yaa..