Friday, March 18, 2011

Menampilkan hanya Judul Posting pada item label blog

Untuk mempermudah dan memberikan akses yang nyaman pada pengunjung adalah dengan memanfaatkan widget label yang merupakan standart blogger, mungkin ini sudah tidak asing lagi bagi rekan blogger. Tapi standart blogger yang ada bila kita klik label yang muncul adalah posting pada label beserta dengan image dan uraian singkat dari isi posting.
Sekarang kita akan membuat tampilan yang muncul saat klik label hanya judul posting saja sehingga bisa tampak lebih menarik dan sederhana.

Kita langsung ke TKP saja biar jelas

Langkah Pertama

  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode berikut
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>
<data:adStart/>
<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'/>

Keterangan :
Ganti kode dengan warna merah dengan kode dibawah ini :
( bila kesulitan silakan mencari kode yang mirip dengan kode diatas )

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

Simpan dan lihat hasilnya....!

Note :
untuk menambah tampilan agar lebih menarik berikut langkah yang harus diikuti :
Ganti kode warna biru diatas dengan kode dibawah ini


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



Keterangan :
Kode warna merah : jenis warna border, background dan warna teks ( ubah sesuaikan dengan kebutuhan )
Kode warna biru : image icon didepan judul posting ( ubah sesuai dengan kebutuhan )

Simpan dan lihat hasilnya.
Terima kasih semoga bermanfaat.
Sumber : blog sahabat

No comments:

Post a Comment