Cara Menyertakan Icon/Gambar Di Depan Judul Posting Blogger - Pendidikan Blog

Cara Mengganti "Post a Comment" Blogger Dengan Teks Lain/Gambar, dengan sedikit mengetahui tag-tag xml template Blogger, kita sanggup memodifikasi atau menyertakan 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 merupakan yang menertibkan 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 hukum CSS posisi dan penampilan gambar di dalam posting yang berbeda-beda; kebanyakan dalam hal border, margin dan padding. Hasilnya, sanggup saja gambar tidak sejajar dengan judul. So, aku akan masukkan styling berikut biar gambar memiliki hukum khusus dan tidak menggunakan hukum biasa yang dibawa oleh template dan berikutnya lebih baik copy dan gunakan instruksi berikut:

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

Anda sanggup merubah nilai 10 pada margin-right untuk menyeleksi jarak antara gambar/icon dengan judul posting. Tambahkan pula styling lainnya jikalau dibutuhkan.

b) Sebelum memasukkan url gambar dan seluruh tag gambar di dalam template, sesuaikan dulu ukuran gambar dengan judul posting, baik dalam hal penyeleksian warna icon maupun tinggi dan lebar icon. Edit gambar apalagi dulu sebelum diupload. Hal ini ditujukan biar gambar memiliki kesesuaian dengan judul posting dan. Jangan hingga gambar terlalu besar/kecil.

7. Setelah semua beres, masukkan tag HTML gambar seumpama cara yang sudah 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 apalagi dahulu, jikalau sudah beres, save template.

Have a nice blogging!

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