Membuat Icon Pada setiap Judul Postingan

Penasaran gimana cara membuatnya? Jika iya, ikuti langkah berikut.
1. Seperti  biasa, kita login ke Blogger, lalu tujulah menu Tata Letak > Edit HTML.
2. Lalu, untuk mencegah hal-hal yang tidak diinginkan, seperti rusaknya template, silakan backup dulu templatenya.

3. Cari kode yang mirip-mirip dengan kode berikut.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Ket: Tidak semuanya berkode seperti diatas. Ada beberapa yang menggunakan tag h2 atau h1. Makanya saya bilang cari yang mirip-mirip dengan kode diatas.
4. Lalu ketikkan kode berikut sebelum kode tutup kurung kurawal (}).

background:url(URLGAMBARANDA)no-repeat left;

Sehingga menjadi:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:url(URLGAMBARANDA)no-repeat left;
}

5. Lalu atur padding (jarak sela) supaya jarak antara teks dan ikon menjadi pas. Misalnya ubah kode padding:0 0 4px; menjadi:

padding:0 0 4px 50px;

Ket:

• Yang diwarnai dengan warna merah adalah padding atas.
• Yang diwarnai dengan warna biru adalah padding kanan.
• Yang diwarnai dengan warna ungu adalah padding bawah.
• Yang diwarnai dengan warna hijau adalah padding kiri.

Aturlah padding supaya tampilannya klop antara judul posting dengan ikon. Supaya anda yakin, sebaiknya pratinjau dulu dengan mengeklik Pratinjau.

 

6. Kalau sudah yakin, klik Simpan Template.

7. Selesai.