Menampilkan Hanya Judul Pada Saat Halaman Label Di Klik

 

Apa manfaat kita menampilkan hanya judulnya saja pada label? Pertama, membuat blog kita akan cepat menampilkan postingan-postingan dalam satu label. Kedua, membuat pageview blog kita menjadi bertambah, karena yang di tampilkan tidak full postingan, untuk melihat full postingan harus mengklik judul. Ketiga, space atau tempat yang di perlukan jadi lebih sempit, tidak memakan banyak tempat, jadi juga bisa lebih fokus.

Saat kita menulis dan memposting pasti kita mengelompokannya dengan menggunakan label. Tulisan yang kita buat tentunya beragam jenisnya. Tulisan atau postingan yang ada pada satu label mungkin jumlahnya bisa banyak. Dan saat salah seorang pengunjung mengklik label itu maka akan muncul postingan-postingan yang memakai label itu.

Bisa di bayangkan jika yang muncul adalah full postingan, maka akan membuat loading lama, dan juga membuat pembaca eneg melihatnya,lain halnya jika sudah memakai read more. Untuk itu perlu adanya alternatif lain, bagaimana kita menampilkannya hanya judul-judulnya saja, dan jika pengunjung ingin lebih tahu bisa mengklik judul.

Langsung ke TKP....

 -  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/AVvXsEglU8i-q44NXJI208y78mJ_deIe_dinUELn0pSo4ihhSQp5Wc9YdvR-pJ4xl4oh-xKpkWsD7_CE33hgPdPppOv7cxLk7XnPpuWOVp6C8YPDH2X83769HFwTUcDxLxhyphenhyphendTNA-gobIFE_-rVv/'/>
<data:post.title/></div></a>

Keterangan :
Kode warna merah : jenis warna border, background dan warna teks ( ubah sesuaikan dengan kebutuhan )
Kode warna Ungu : ukuran garis table:
Kode warna pink : image icon didepan judul posting ( ubah sesuai dengan kebutuhan )

Simpan dan lihat hasilnya.
Terima kasih semoga bermanfaat.