Cara Membuat Ikon pada Setiap Judul Postingan

Ini adalah posting kedua Muhammad Rizki Fadillah di blog Mas Doyok. Nah, kali ini saya akan membahas cara membuat judul blog memiliki ikon disampingnya. Seperti gambar dibawah.

Gimana? Mantep to? Ayo, mau ke mana? (Waduh, kok jadi nyambung ke Mbah Surip ya?)

Penasaran gimana cara membuatnya? Jika iya, ikuti langkah berikut.

1. Seperti binasa 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.

Itu dia langkah-langkah untuk membuat ikon pada judul postingan. Selamat mencoba dan semoga bermanfaat.