Menambahkan Icon/Gambar di Depan Judul Posting Blogger

Gambar/Icon di depan judul posting blog dapat menambah daya tarik. Icon tersebut juga dapat memberikan kesan tampilan judul posting yang indah dan dapat memberikan perwakilan akan arti penting judul posting tersebut. Di Blogger, kemungkinan untuk menambah dan memodifikasi berbagai macam pernak-pernik sangatlah mungkin, dengan sedikit memahami tag-tag xml template pada Blogger, kita dapat memodifikasi atau menambahkan tag-tag HTML sesuai dengan selera yang kita inginkan.

Contoh Tampilannya :

Ok...mari kita langsung prakteknya saja :

1. Login ke Blogger.com
2. Masuklah ke dashbor > Rancangan > Edit HTML/template.
3. Klik/centang "Expand Widget Templates".
4. Cari kode/tag berikut:
   

   <b:if cond='data:post.url'>

5. Kemudian lihat selengkapnya hingga bagian tag-tag berikut:
   

   <b:if cond='data:post.url'>
   <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
   </b:if>

   Tag-tag diatas adalah yang mengatur bagian judul posting, baik url maupun isi judul (title) posting.
   
6. Copy kode HTML di bawah ini:
   

   <img src='https://lh5.googleusercontent.com/-K7_Mpr-es7E/TnhC2v126sI/AAAAAAAAADA/fQqyYcLcjIM/wall.png' style='border:0;padding:0;margin-right:8px'/>

7. Letakkan atau sisipkan kode di antara <a expr:href='data:post.url'> letaknya disini <data:post.title/>.
   
   Note:
   
   1) Setiap template memiliki aturan CSS posisi dan tampilan gambar di dalam posting yang berbeda-beda; pada umumnya dalam hal border, margin dan padding. Hasilnya, bisa saja gambar tidak sejajar dengan judul. Baiklah saya akan masukkan styling berikut agar gambar memiliki aturan khusus dan tidak menggunakan aturan umum yang dibawa oleh template dan selanjutnya lebih baik copy dan gunakan kode berikut ini :
   

   <img src='https://lh5.googleusercontent.com/-K7_Mpr-es7E/TnhC2v126sI/AAAAAAAAADA/fQqyYcLcjIM/wall.png' style='border:0;padding:0;margin-right:8px'/>

   Anda dapat mengubah nilai 8px pada margin-right untuk menentukan jarak antara gambar/icon dengan judul posting. Tambahkan pula styling yang lain jika dibutuhkan.
   
   
   2) Sebelum memasukkan url gambar dan seluruh tag gambar di dalam template, sesuaikan dahulu ukuran gambar dengan judul posting, baik dalam hal pemilihan warna icon maupun tinggi dan lebar icon. Edit gambar terlebih dahulu sebelum diupload. Hal ini ditujukan agar gambar memiliki kesesuaian dengan judul posting dan. Jangan sampai gambar terlalu besar/kecil.
8. Setelah semua selesai, masukkan tag HTML seperti cara yang telah ditunjukkan di atas.
   Contoh:
   

   <b:if cond='data:post.url'>
   <a expr:href='data:post.url'><img src='https://lh5.googleusercontent.com/-K7_Mpr-es7E/TnhC2v126sI/AAAAAAAAADA/fQqyYcLcjIM/wall.png' style='border:0;padding:0;margin-right:8px'/><data:post.title/></a>
   <b:else/>
   <data:post.title/>
   </b:if>

9. Preview / Pratinjau terlebih dahulu sebelum di tampilkan, jika sudah selesai, Simpan Template.
   

Menambahkan Icon/Gambar di Depan Judul Posting Blogger