Buku Tamu

Modifikasi Tampilan Judul Posting saat Mengklik Label

Diposkan oleh revolterdie
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/AVvXsEgc1xU7qixbVGZK5ICo13OqUfQlvNXXfNXQROXGAh3KeQTXm6zb4gEZdTnf-L459FH4w_BWDS7onXBQIBwUttB_f_8gb12jlr1ixgL4wSHzeubNChTzWiCqfxvxHk5kLL8T_rXe6Od-n8k/s144/Arrobblue.png'/>
<data:post.title/></div></a>
  • Jangan lupa disimpan.

Selamat memodifikasi judul posting saat mengklik label...

 Reposting * Modfikasi Blog
Share |

Blog Archive

 

Langganan Via Email

Twitter icon facebook icon Digg icon Technorati icon facebook icon Delicious icon More share social bookmark service

Flag Counter

Blog Progress
Admin : Revolter Diehard
Blogger From : Indonesia, Jogjakarta
Status Now : Jangan Lupa Komentar and Follow "Blog Progress" ya, Tar Gw Pasti Komentar Balik

Sahabat Blog Progress