Mempercantik Tampilan Judul Posting pada Label

Pada postingan yang agak lama (hehe) udah pernah dibahas tentang mengubah tampilan label saat diklik, yang itu lho, kalo label diklik akan muncul list judul postingan aja. Tapi pada artikel sebelumnya cuma dengan tampilan default, dan masih biasa. Dan sekarang saya mau sharing gimana mengubah tempilan itu jadi lebih bergaya, dengan maksud ditambahi background gitu... :D

Ohya, posting ini juga didukung oleh beberapa temen dan email yang masuk untuk membantu mengubah menjadi tampilan seperti ini. Halah, preview-nya kayak gini jadinya:

Daripada moler-moler gak karuan, mau tau kan giana triknya???oke..langsung aja...

1. Login ke Blogger kemudian Layout/Tata Letak terus Edit HTML
2. Centang pada Expand Template Widget
3. Cari kode yang berwarna merah, selengkapnya begini:

   <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>

   Keterangan:
   Kode di atas akan terlihat kalau Anda memiliki model Label yang model List Judul Posting saja, maksud saya seperti posting yang lalu.
4. 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>

   Keterangan:
   Ganti kode warna yang berwarna hijau dengan warna yang Anda sukai.
Tapi jika ingin juga menambahkan tanda panah di depan title postingan, Anda tinggal menambahkan kode gambar ke dalamnya, selengkapnya, Anda dapat mengganti kode tadi dengan kode di bawah 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;'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHXkBdgeiMT0fHaCyTIa8LGtaiaAb0AqOHj_itorbETrIGz5QsmNxyKsr87KwtyQUIScVrNi8zkDS8Jr1PX1Nyczwmg4JQyDoRwxLXgd5GA0omzWD1LmAHCNfOpJ3UdM7s3FBmDVQ0LA/s144/Arrobblue.png'/>
<data:post.title/></div></a>

5. Oke, tinggal simpan perubahan!!!

Semoga berhasil yah, dan semoga mengerti dengan tutorial yang saya berikan karena saya juga sudah menyisipkan screenshot untuk memperjelasnya :D

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 die-silver.blogspot.com

Gunakan Tombol berikut untuk menyimpan halaman :
Mempercantik Tampilan Judul Posting pada Label
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..