Menambah Icon Gambar Pada Judul Post

Situseo Blog : Dengan menambah icon gambar pada judul post akan memberikan tambahan tampilan yang menarik pada judul post, untuk menambahkan icon gambar ini tidaklah terlalu sulit, karena kita hanya menambahkan kode background pada kode css judul posting.

Untuk membuatnya siapkan icon atau gambar yang akan di pasang pada sebelah judul post, kemudian masuk pada menu Design - Edit HTML dan cari kode seperti dibawah ini :

.post h3 {
color:#707070;
font-style: none;
font-weight:normal;
font-size: 24px;
font-family: 'Niconne', cursive;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px dotted #ccc;
margin:0 0 20px;
padding:0 0 2px;
}

Jangan berpatokan kode css yang dalam contoh sama dengan kode css yang ada dalam template kalian, yang penting temukan kode .post h3 {, kode .post h3 merupakan kode css standar untuk mengatur judul posting, bisa juga .post h2 atau .post h1. Jika sudah ketemu, tambahkan kode dibawah ini sebelum kode penutup css judul post.

background:url(http://gambar kalian) no-repeat left;

Sehingga keseluruhan kodenya menjadi seperti dibawah ini :

.post h3 {
color:#707070;
font-style: none;
font-weight:normal;
font-size: 24px;
font-family: 'Niconne', cursive;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px dotted #ccc;
margin:0 0 20px;
padding:0 0 2px;
background:url(http://gambar kalian) no-repeat left;
}

Supaya tidak tumpang tindih antara icon gambar dengan judul post, berilah jarak judul post tersebut dengan mengatur bagian paddingnya.

jarak awal adalah padding:0 0 2px; kalian ubah menjadi padding:0 0 2px 60px; (misalnya, kalian bisa atur sendiri).

keterangan :
angka pertama 0 menunjukan jarak bagian atas
angka kedua 0 menunjukan jarak bagian kanan
angka ketiga 2px menunjukan jarak bagian bawah
angka keempat 60px menunjukan jarak bagian kiri

Save template kalian dan lihat hasilnya, semoga dengan menambah icon gambar pada judul post bisa menjadikan blog kalian tampil lebih menarik.

Semoga bermanfaat,