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://i54.tinypic.com/r85dfm.gif)no-repeat left center;
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://i54.tinypic.com/r85dfm.gif)no-repeat left center;
}
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,
Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!
mantap sob, ajarin donk buat template blog!
BalasHapusgampanglah sob, tp tdk skrg yach,.. :D
BalasHapusnanti klw gw bnr2 mood.jaaah pke mood sgla.wkwkwkk