Cara Menampilkan Judul Posting Saja di Blogspot

Judul posting di atas mungkin agak membingungkan apa maksudnya. Ya, saya sendiri pun bingung judul apa yang mesti saya tulis untuk pembahasan kali ini (mari kita bingung ber-jama'ah hahaha...ga lucu bukan???). Maksud dari posting ini adalah, bagaimana jika kita hanya ingin menampilkan daftar judul posting/artikel saja ketika pengunjung memilih/mengklik sebuah kategori artikel atau istilah lainnya label. Tapi tentu saja, judul tersebut dapat juga di klik sehingga menampilkan artikel keseluruhan.

Dengan begitu, loading halaman akan lebih cepat dan tampilan pun lebih rapi. Halaman juga tampak lebih hemat tanpa harus memutar scroll lebih bawah lagi. Hasil ini juga bermanfaat ketika melakukan pencarian. Mari kita coba tipsnya bersama-sama.

Pertama:
* Setelah login, masuk ke Rancangan lalu Edit HTML serta menandai centang pada "Expand Widget Templates".
* Jangan lupa Download Template Lengkap untuk antisipasi.
* Cari barisan kode seperti di bawah ini, kalau tidak ada cari yang menyerupai (beberapa template tidak sama persis menulis kodenya, tapi maksudnya sama). Masih ingat cara mencari kode kan? Benar! menggunakan F3 atau Ctrl + F

<!-- posts -->

    <div class='blog-posts'>

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

Jika sudah ketemu, pelajari detailnya dan bandingkan dengan kode berikut :

<!-- posts -->
  <div class='blog-posts'>
 
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
 
 <ul class='listFS'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</ul>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

* Gantilah barisan kode yang pertama dengan barisan yang kedua.
* Perhatikan mana yang berbeda, jika kode template anda tidak sama persis, lihat barisan mana yang sama dan perlu diganti.

Kedua:
* Cari kode ]]></b:skin>
* Salin kode di bawah ini dan letakkan di atas kode ]]></b:skin> 

.listFS
{
background: url ('http://ateon.fs.googlepages.com/v5_bullets_14.gif') no-repeat 0px 8px;
font: normal 12px sans-serif;
line-height: 2;
list-style-type: none;
margin: 0 0 0 10px;
padding: 0 0 0 20px;
}
.listFS li
{
border-bottom: 1px solid #EFF0F1;
padding: 3px 0 3px 0;
}
.listFS li a:hover
{
text-decoration: underline;
}

* Simpan Template.
* Coba hasilnya dengan mengklik salah satu label/kategori artikel.