Cara Menambahkan Icon/Gambar di Depan Judul Posting Blogger

Icon/Gambar 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. Seperti pernah saya singgung di posting 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.
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 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.
5. Copy kode HTML-gambar di bawah ini:
<img src="URL-GAMBAR/ICON" />
6. Letakkan/sisipkan kode 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, bisa saja gambar tidak sejajar dengan judul. So, 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:
<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 jika 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 agar gambar memiliki kesesuaian dengan judul posting dan. Jangan sampai gambar terlalu besar/kecil.

7. Setelah semua beres, masukkan tag HTML gambar seperti 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, jika sudah beres, save template.

Have a nice blogging!

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

Cara Menambahkan Icon/Gambar di Depan Judul Posting Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 18 Comment(s):

Farhan said...
This comment has been removed by the author.
YauNi said...

Copas boleh jangan lupa BackLink (Cantumkan Sumber!) :) Happy Blogging with smile.

Unknown said...

@Yauni: Bener banget bro. Thanks sudah mengingatkan orang lain tentang copas. Happy blogging juga.

Rifat said...

Ohh gitu yea,ok nnt tak coba.

Unknown said...

Makasih tipsnya Gan,berhasil ku terapkan di blogku.Salam hangat dari Papua.

blog raharja said...

dahsyat tipsnya mas

DIGITAL BACA said...

jadi lebih keren klo sebelum judul posting ada iconya
terima kasih informasinya :)

Nuim Hayat said...
This comment has been removed by the author.
Anna Adrianggie Ahkam said...

makasihh,, infonyaa kerenn .. :)

rouf said...

kang... salam kenal
sebelumnya saya minta izin untuk pasang link atas postingannya diblog ini, saya link ke blogku. buat pengingat dan bisa nambah jalinan silaturrahim online.

"untuk postingan ini, saya mau tanya"
saya ingin memberi icon sebelum judul postingan, tapi tidak ada kode
nya, bagaimana solusinya ya...

skali lagi makasih.

Rohis Facebook said...

sy pake ya pak.., soalx nyasarx kemari.., thx. *smile

Sopiyan Hadi Kasri said...

Like This ,,, dan terimakasih atas semua informasi yang tercantum di blog ini_ Berbagi adalah suatu kegiatan yang menyenangkan

aWangg said...

bermanfaat bro
ditunggu blogwalkingnya

pulsareload-88 said...

banyak-banyak terimakasih Gan...
aku cari memasukan icon disamping judul posting baru ketemu di sini Gan...
Salam Sukses...

indranesia said...

Walaupun template blog saya sederhana..tapi dengan pasang icon di depan judul post rasanya lumayan pas juga bang..thanks yah bang

softwikia said...

nyobain ah

Moh Toha said...

aku kok gagal terus tu apanya ya yg kurang

Unknown said...

Nah ini nih yang ane cari. Oke thanks gan atas informasinya. Langsung ane praktekan...

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap