Menampilkan Judul Postingan Setelah Melakukan Pencarian

standard 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..Laughing 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.

     

    hr

     

    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 Blushing).

     

    outset

     

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

Berlangganan artikel terbaru via Email
Artikel Lainnya :

12 comments

9 September 2009 01.18

pertamaaaaaaaxxxxx...cekakakakakakKKKKKK :-* ;)) plus postingan balek bos .... huehuehue

9 September 2009 01.27

berhasil dengan mulus, dengan sekali edit bos DOD ... wakakakakakakkkk cip cip cip

9 September 2009 05.01

..wah info lagi..ilmu lagi nih..ok deh..ntar di coba ah..tp postingan ane masih sedikit nih..banyakin postingan dulu ah...

9 September 2009 08.36

bingung Sobbbbbbbbbbbb

10 April 2010 01.32

Makasih tutorialnya, sangat lengkap dan udah berhasil aku pakai di blogku, boleh dicek ke TKP!

10 April 2010 12.50

CENDOL GAN

14 Mei 2010 23.35

kk, makasih ya..
centerol.blogaspot.com

29 Juli 2010 15.11

wah...thx kawan...infox detail bgt mudah di mengerti...gw cb ahk gw newbie nh..mohon di bantu y :D

5 September 2010 17.05

mas kalau ingin hanya menampilkan dalam batasan jumlah postingan gmn ?? ditunggu balasannya

14 Oktober 2010 21.11

Waah thx infonya.. lagi nyari tutorial ini.
salam kenal ya :)

Mari mari ke gubuk saya:
http://www.papatlimo.com/

6 Februari 2011 21.03

makasih atas tutorialnya ya bossssemoga sukses terus ..

27 Maret 2011 23.39

artikel bagus Gan

Poskan Komentar

Reader Community

Recent Comments