Blog Tutorial cak gitotic

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/AVvXsEgfXeIMo4M4fA7rJAYnTLZYi8Elalva2n9tV0jh3hqnXayhVtGupj8Uf2u42iTIbfWLOy7xzFmrXPJjB8BBMd5qnz2FDXjSjtztaUE7lPONfHjMVU9SsfnVK4QO-d5J9LJphjy1trgxW-c/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