menampilkan judul postingan Blog setelah Melakukan Pencarian

menanggapi permintaan saudara Eko Fadly, sekarang saya posting artikel ini.

Seperti pada blog saya, blog saya hanya menampilkan judul postingan saja setelah kita melakukan pencarian / search di blog. Jika anda bingung maksud saya, silahkan anda lihat gambar disamping. 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 serta uraiannya, sehingga hasilnya kurang efisien dan memakan tempat. Dan biasanya pengunjung menjadi jenuh dan enggan untuk mengklik halaman selanjutnya untuk mencari kata kunci yang di maksud.



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

1. Login ke blogger dengan ID sobat.
   
   


2. Klik Tata Letak.
   
   


3. Pilih Edit HTML.
   
   


4. klik Download Template Lengkap, untuk sebagai persiapan jika gagal dan template jadi rusak.
   
   


5. Kemudian klik Expand Template Widget.
   
   


6. Cari kode :

<b:include data='post' name='post'/>

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 dan lihat hasilnya. jika berhasil maka akan tampak seperti gambar diatas. Untuk variasi judul postingannya, saya punya 2 variasi yang mungkin bisa anda terapkan :

1. Bentuk hasil pencarian dengan garis putus – putus dibawah setiap judul postingan.
   
   
   
   Jika anda ingin tampilan yang beda, anda hanya tinggal menyisipkan kode : <hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/> diantara </br>��..</br>, sehingga hasil htmlnya 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, sesuaikan dengan selera anda.





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





Untuk yang seperti ini, silahkan anda 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>

2. Untuk kode width:500px, bisa anda sesuaikan dengan lebar main menu atau lebar kolom postingan anda. Jika lebar kolom post 500px maka sebaiknya sesuaikan dengan template blog anda agar terlihat lebih bagus dan menarik. Dan untuk kode #FBF5EF adalah background judul post, atur sesuai dengan keinginan.
   
   

Selamat mencoba.

www.imam77.co.cc