pencarian di Blogger /Blogspot Menjadi Seperti Google Search

Cara mudah mengubah tampilan laman hasil pencarian di Blogger /Blogspot Menjadi Seperti Google Search

Cara nya cukup simple dan mudah, Kemudahan menjelajah yang dirasakan pengunjung pun saat berada didalam blog Anda,  akan terasa berpengaruh terhadap pengalaman pengguna yang lebih baik. Salah satu nya cara untuk memberikan kemudahan pada pengalaman pengguna tersebut adalah dengan menambahkan elemen kotak pencarian / search-box.

Menu Search-box atau kotak pencarian menjadi salah satu elemen penting yang berfungsi untuk memudahkan dan menavigasi pengunjung, khususnya saat pengunjung mencari dan menelusuri artikel ataupun konten lainnya yang ada di dalam blog Anda.

Dasar Pada penggunaannya, pengunjung hanya tinggal mengetikkan kata kunci kedalam search box tersebut, untuk menemukan konten-konten terkait yang mereka butuhkan sesuai dengan kata kunci yang di inputkan, atau di inginkan begitulah sekiranya.

Nhaa:: Kemudian, hasil dari pencarian kata kunci tersebut akan ditampilkan pada sebuah halaman khusus pencarian (Search Results Page) yang memang sudah ada didalam blog Blogspot Anda.

Namun Untuk kali ini, saya tidak membahas bagaimana cara membuat, menambahkan kotak pencarian / search box kedalam blog, akan tetapi kita ini akan mencoba mempelajari bagaimana kita mengubah tampilan laman pencarian Blogspot nya, agar terlihat sama persis seperti halaman hasil pencarian Google.

Okeh, Sebagai informasi tambahan, halaman pencarian di Blogspot ini masuk kedalam tipe halaman indeks. Dimana secara default,  tipe halaman ini tampil serupa dan mengikuti bentuk halaman homepage, halaman search label, ataupun halaman yang dibuka dengan mengklik link older post dan newer post di bawah postingan.

Ini hanya Khusus untuk halaman pencarian (search results page) di blog Blogspot, kita bisa memanggilnya melalui kode "data:blog.searchQuery" , kode ini biasanya disandingkan dengan sebuah tag kondisional.

Namun sebelum Anda mengubah tampilan laman pencarian ini, ada hal - hal yang perlu Anda perhatikan sebelumnya.

1. Pastikan Anda selalu memback-up template blog sebelum melakukan modifikasi template untuk menghindari error dan tidak berfungsinya modifikasi yang Anda lakukan.
2. Pastikan di blog Anda sudah terpasang Search-box / kotak pencarian dan diset pada pencarian khusus blog Anda saja.
3. Sebelum mengubahnya silahkan Anda perhatikan dulu tampilan laman pencarian yang ada saat ini, caranya : inputkan kata apa saja kedalam search - box kemudian tekan enter,  lalu lihat hasilnya.  
4. Bentuk dan pengaturan desain laman pencarian ini, bisa Anda sesuaikan dengan tampilan template blog Anda yaitu dengan mengatur nilai pada kode css yang saya sertakan pada tutorial ini.
5. Modifikasi ini lebih baik diterapkan pada template yang sudah menggunakan bentuk dan model auto read more atau yang sejenisnya.

Berikut gambar contoh hasil laman pencarian Blogspot sebelum dan sesudah modifikasi

Lihat Gambar SS contoh dari Sebelum dan sesudah di modifikasi laman pencarian Blogspot nya

Cara mudah untuk mengubah tampilan laman pencarian di Blogspot menjadi seperti laman hasil pencarian di Google 

1. Login ke blog Blogspot Anda
2. Pilih blog yang akan di modifikasi laman pencariannya
3. Lihat menu disisi kiri, pilih menu template
4. Back up template blog lama Anda, kemudian masuklah ke menu edit html
5. Langkah selanjutnya adalah cari kode dibawah berikut (gunakan ctrl+f untuk mempermudah pencarian)

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

6. Setelah kode diatas ketemu, hapus dan ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.searchQuery'>
<br/>
<div class='search-result'>
<a expr:href='data:post.url' ><data:post.title/></a>
<div class='link-snippet'><data:post.url/></div>
<div class='item-snippet'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script async='async' type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script></div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

7. Tambahkan kode CSS  dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style> untuk mengatur tampilan laman pencarian Blogspot.

.search-result {margin: 0px 40px;padding: 0px 0px 20px 0px;}
.link-snippet {font-size: 13px;color: #09a000;}
.item-snippet {font-size: 13px;}
.search-result a {color: #1a0dabf;font-size:18px;}
.search-result a:hover {color:#1a0dab;text-decoration:underline !important;}
.search-result a:visited {color:#7e1a8b;}

8. Simpan perubahan dan lihat hasilnya.

Catatan
Ganti kode berwarna biru pada kode css diatas untuk mengatur jarak, ukuran, maupun warna sesuai dengan keinginan Anda.


Kesimpulan nya begini

Dari Halaman hasil pencarian / Search results page yang memiliki desain dan tampilan lebih mudah dan ringkas, tentu akan memudahkan para pengunjung dalam mencari dan menemukan konten yang mereka inginkan. Hal ini saya yakini bisa menambah pengalaman pengguna yang lebih baik, terutama saat menggunakan fasilitas search-box sehingga mampu meningkatkan jumlah pageview di blog Anda.

Demikianlah artikel tentang cara mudah mengubah tampilan laman hasil pencarian di blogger /Blogspot ini yang bisa saya sampaikan, saya tidak ada maksud untuk menggurui, ini murni sekedar berbagi tips trik dan cara yang sederhana, Semoga bisa bermanfaat buat siapapun anda, dan selamat mencoba ya.