Membuat kotak-kotak Judul Posting saat Mengklik Label

Dulu OB pernah memposting "Klik Label yang Tampil Judul Posting Saja", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS "main". Bagaimana jika kamu ingin tampil beda? Yah, mau tidak mau kamu harus melakukan modifikasi terhadap template blog yang telah ada. Kode dalam memodifikasi tampilan judul posting ini disadur dari kode membuat daftar isi dari Kang Rohman. Dan sebaiknya diterapkan setelah kamu melakukan trik klik label yang tampil judul posting saja, membuat sidebar dalam kotak yang terpisah, dan membuat posting dalam kotak yang terpisah. Harapannya agar tampilan blog kelihatan serasi, selaras, dan seimbang [kaya tujuan rencana pembangunan lima tahun (REPELITA) saja he.. he.. he...]

Baiklah, supaya kepala tidak tambah puyeng dan dikitari oleh lebih banyak bintang-bintang. Let's go to start this trik :

• Login ke account blogger kamu.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode di bawah ini.

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

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :

Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

• Ganti kode yang berwarna merah dengan kode berikut.

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

Catatan :

Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

• Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya :

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgil3zki4j3lBH538SWeb1bQ6WnawYnmjmonp_zOlG5oifmO_NA8GTtLow2SrPaGCTIQ6AcF5ykmS5fbO6YozvL5LJBaoN40CLLlC4jWCURNAi3sDr_qbOjScTbv7WfSpVfI16lqwS11D0/s144/Arrobblue.png'/>
<data:post.title/></div></a>

• Jangan lupa disimpan.

*sumber:optimasi-blog.blogspot.com.
Selamat memodifikasi judul posting saat mengklik label...