12 Mempercantik Tampilan Judul Posting Ketika Label Diklik Dengan Background

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

hanya menampilkan judul posting ketika label diklik Panjang amat judulnya? Sebelumnya saya pernah posting trik cara hanya menampilkan judul posting ketika label atau category diklik, untuk trik kali ini cara memodifikasi tampilan judul posting tersebut dengan memberikan background pada judul postingnya seperti contoh pada gambar disamping. Tapi trik ini bisa dilakukan kalau sobat sudah melaksanakan trik sebelumnya.

Berikut langkah langkahnya:

 

Login ke Blogger kemudian Layout/Tata Letak terus Edit HTML

  1. Centang pada kotak kecil disamping Expand Template Widget
  2. Cari kode yang berwarna merah, ingat kode ini hanya terlihat jika trik sebelumnya sudah anda lakukan, jika belum lihat kembali disini 

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

   3.  Selanjutnya ganti kode yang berwarna merah tadi dengan kode berikut ini:

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<data:post.title/></div></a>

Note: 
Ganti kode warna yang berwarna hijau dengan warna yang Anda sukai.Tapi jika ingin juga menambahkan icon di depan title postingan, sobat tinggal menambahkan kode gambar ke dalamnya kode diatas, selengkapnya, sobat dapat mengganti kode tadi dengan kode berikut:

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<img alt='>>>' border='0' src='alamat gambar icon anda letakkan disini'/>
<data:post.title/></div></a>

  4. Oke, tinggal simpan template!!!

Semoga berhasil dan bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

12 komentar :

  1. senengnya kalau bisa utak atik HTML...
    makasih tutorialnya mba...

    BalasHapus
  2. aslmkum wr.wb
    salam sahabat
    wah bagus Ukhti Anna ,rehat akan saya coba thnxs n good luck ya

    BalasHapus
  3. @ narti: iya ukh, ukhty bisa jg kok hanya sibuk aja kali ya?

    @ dhana: wa'alaikumslm wr wb. kok bnyk yg keliru ya? nama anaa bukan anna? org sibuk jg nie?

    syukron jazaakumullahu khrn apresiasinya!

    BalasHapus
  4. mantab nih tutorialnya, sipdah lanjutkan

    BalasHapus
  5. sudah ku follow, follow balik ya,. boleh juga nih info nya,. di coba ah,.,. thanks,.

    BalasHapus
  6. terimakasih apresiasinya!

    BalasHapus
  7. Bagus infonya..tp g ada contohnya y mba...terima kasih banyak..

    kl ada waktu silahkan mimpir2 ke tempat saya
    http://fullydownloadzer.blogspot.com

    BalasHapus
  8. makasih infonya mba... sudah saya praktekan di blog saya... Alhamdulillah berhasil...
    http://autodesign-tomspiez.blogspot.com

    BalasHapus
  9. Terimakasih tutornya mbak..
    tapi setelah saya ikuti semua langkah2 diatas (1-2)
    kok gak bisa jg ya ?

    BalasHapus
  10. webnya mantap,.,, kontennya sangat membantu, dan templatnya ngefan banget. ini template bgus, kapan bisa buat kaya gini??? tadi dah tak coba dengan dasaran sama, tapi tetap gak bisa. hehe

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!