Cara mengubah tampilan laman hasil pencarian Blogspot

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

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

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.

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 kali ini, saya tidak membahas bagaimana cara membuat, menambahkan kotak pencarian / search box kedalam blog, akan tetapi kita akan mencoba mempelajari bagaimana kita mengubah tampilan laman pencarian Blogspot agar terlihat seperti halaman hasil pencarian Google.

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.

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.

Baca juga
- Tipe - tipe halaman di Blogspot yang perlu Anda ketahui
- Cara menggunakan tag kondisional di Blogspot


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

Sebelum dan sesudah modifikasi laman pencarian Blogspot

Cara mengubah tampilan laman pencarian Blogspot menjadi seperti laman hasil pencarian 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

Halaman hasil pencarian / Search results page yang memiliki desain dan tampilan lebih mudah dan ringkas, tentu akan memudahkan 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 mengubah tampilan laman hasil pencarian Blogspot ini bisa saya sampaikan. Semoga bermanfaat dan selamat mencoba.