Cara Menambahkan Icon/Gambar di Depan Judul Posting Blogger

Cara Mengganti "Post a Comment" Blogger Dengan Teks Lain/Gambar, dengan sedikit memahami tag-tag xml template Blogger, kita dapat memodifikasi atau menambahkan tag-tag HTML sesuai dengan selera kita.

So, bagaimana cara memasang icon/gambar di depan posting Blogger/Blogspot?

1. Masukke dashboard > Design > Edit HTML/template.

2. Klik/centang "Expand Widget Templates".

3. Cari kode/tag berikut:

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

4. Kemudian lihat selengkapnya hingga bab 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 ialah yang mengatur bab judul posting, baik url maupun isi judul (title) posting.

5. Copy instruksi HTML-gambar di bawah ini:

<img src="URL-GAMBAR/ICON" />

6. Letakkan/sisipkan instruksi di antara <a expr:href='data:post.url'> dan <data:post.title/>.

Note:

a) Setiap template memiliki aturan CSS posisi dan tampilan gambar di dalam posting yang berbeda-beda; pada umumnya dalam hal border, margin dan padding. Hasilnya, mampu saja gambar tidak sejajar dengan judul. So, gue akan masukkan styling berikut semoga gambar memiliki aturan khusus dan tidak menggunakan aturan umum yang dibawa oleh template dan selanjutnya lebih baik copy dan gunakan instruksi berikut:

<img src="URL-GAMBAR/ICON" style="border:0;padding:0;margin-right:10px" />

Anda dapat mengubah nilai 10 pada margin-right untuk menentukan jarak antara gambar/icon dengan judul posting. Tambahkan pula styling yang lain bila dibutuhkan.

b) 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 semoga gambar memiliki kesesuaian dengan judul posting dan. Jangan hingga gambar terlalu besar/kecil.

7. Setelah semua beres, masukkan tag HTML gambar menyerupai cara yang telah ditunjukkan di atas. Contoh:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><img src="URL-GAMBAR/ICON" style="border:0;padding:0;margin-right:10px" /><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

8. Preview terlebih dahulu, bila sudah beres, save template.

Have a nice blogging!

Tips-Trik Blogger. Tersaji dengan Esensi.
mencuri ialah pekerjaan pengecut! © buka-rahasia.blogspot.com