Find What You Need

21 Feb 2010

Label Di Klik Tampil Judul Posting Saja Plus Ada Background

Tag : Menambah,Membuat Tampilan Label Atau Kategori Ada Variasi Di Blog

  Untuk memudahkan pengunjung mencari topik yang dicarinya, biasanya para blogger membuat kategori atau label . Sehingga bila pengunjung menemukan artikel yang  sesuai dengan topik yang dicarinya, tinggal meng klik saja judul dari label atau kategori yang disediakan. Tetapi dalam default template blogger, jika kita meng klik nama atau judul label, maka opsi yang di tampilkan adalah Judul posting dengan isinya.

Untuk menyiasati supaya yang tampil hanya judul posting saja tanpa disertai isi postingan, kita perlu merubah atau menambahkan kode html, untuk itu seperti biasa kita harus :
Sigin di draft blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML
Centang Expand Template Widget ,Kemudian kita cari kode berikut:

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

Selanjutnya kita ganti kode yang diwarnai kuning dengan kode dibawah ini, silahkan di copy :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Sekarang simpan atau save dulu.

Selanjutnya bila kita ingin tampilan judul itu ada border atau ada background sekaligus dipasangi icon, kita tinggal menyisipkan kode berikut, silahkan di copy kodenya :

<div style='padding:5px 0 5px 5px;border-bottom:1px solid #000;margin-bottom:2px;background:#eee;color:black;font-size:15px;'>
<img alt=' ' border='0' src='http://URL gambar icon anda'/>

Paste kan diantara kode ini :
<a expr:href='data:post.url'> Kode yang disisipkan <data:post.title/></a>
Jangan lupa tambahkan tag penutup </div> sebelum tag ini  </a>

Sekarang simpan, dan coba hasilnya.

Belajar Bersama


**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

2 komentar:

cw Pada 4 Februari 2011 pukul 21.37 mengatakan...

nice info...sekalian follow sob..ditunguu follow baccknya

Albaniyu Pada 18 April 2011 pukul 22.52 mengatakan...

Ok...;)

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template