Menampilkan Judul Postingan Setelah Melakukan Pencarian

Perhatikan gambar disamping, terlihat jelas blog hanya menampilkan judul postingan saja setelah kita melakukan pencarian / search di blog. Jika sobat bingung maksud saya, silahkan sobat ketik keyword “blogspot” pada kotak search milik saya, terlihat blog hanya menampilkan judul – judul dari postingan saja. Secara default atau bawaan dari template standard, jika kita melakukan pencarian, maka yang akan kita temukan adalah judul postingan berserta urainnya yang panjang lebar, sehingga hasilnya kurang efisien dan memakan tempat. Dan biasanya pengunjung menjadi jenuh dan enggan mengklik halaman selanjutnya untuk mencari kata kunci yang di maksud.

 

Sekarang sobat sudah paham maksud dan tujuan untuk melakukan hasil pencarian dalam bentuk judul postingan. Jika tertarik, silahkan ikuti langkah – langkahnya berikut ini :

1. Login ke blogger dengan ID sobat.

    

2. Klik Tata Letak.

    

3. Pilih Edit HTML.

    

4. Silahkan klik Download Template Lengkap, untuk jaga – jaga jika gagal dan template jadi rusak.. just kidding sob.

    

5. Kemudian klik Expand Template Widget.

    

6. Cari kode <b:include data='post' name='post'/>

    

7. Hapus kode diatas dan ganti dengan kode berikut 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>

    

8. Kemudian Simpan Template.

Silahkan lihat hasilnya, jika berhasil maka akan tampak seperti gambar diatas. Untuk variasi judul postingannya, saya punya 2 variasi yang mungkin bisa sobat terapkan :

 

1. Bentuk hasil pencarian dengan garis putus – putus dibawah setiap judul postingan.

    

   

    

   Jika sobat tertarik dengan variasi yang seperti ini, sobat tinggal menyisipkan kode <hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/> diantara </br>……..</br>, sehingga hasilnya menjadi seperti berikut ini :

    

   <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><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>

    

   Kode warna #CCCCCC adalah warna abu - abu, untuk mengubah warna garis dengan warna lain sobat bisa lihat disini.

    

2. Bentuk hasil pencarian dengan judul didalam kotak - kotak (seperti di blog saya ).

    

   

    

   Untuk hasil yang seperti ini, silahkan sobat ubah kode diatas menjadi seperti berikut :

    

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
   <a expr:href='data:post.url'>
   <data:post.title/></a></div><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>

    

   Untuk kode width:500px, sobat sesuaikan dengan lebar main menu atau lebar kolom postingan sobat. Jika lebar kolom post 500px maka sebaiknya buatlah sebesar 400px saja agar terlihat lebih bagus. Dan untuk kode #FBF5EF adalah background judul post, atur sesuai dengan keinginan.

    

Selamat mencoba..have a nice day, selamat menunaikan ibadah puasa.

Oleh : Dody FariaL Pada hari Selasa, September 08, 2009

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :