Cara membuat JSON Search Box Widget Untuk Blogger

Pada kesempatan kali ini saya akan berbagi tips widget tentang penambahan kotak pencarian ke blog blogger dengan menggunakan JSON yang mengambil konten blogger ke XML dan hasil pencarian ditampilkan pada halaman aktif yang sama. Blogger menyediakan halaman pencarian normal untuk menemukan konten yang menggunakan parameter q ( misalnya - http://ajatshare.blogspot.com/search?q=programming ). Dengan Advanced JSON kotak pencarian pengunjung dapat mencari setiap permintaan yang berkaitan dengan blog Anda dan hasil pencarian akan ditampilkan dalam popup menggunakan event onsubmit dengan menggunakan CSS sederhana. Jadi mari kita mulai bagaimana cara untuk menambahkan widget kotak pencarian yang keren ini!

Langkah 1 : Buka dashboard Blogger Anda dan pilih blog .
Langkah 2 : Arahkan ke >> Template >> Edit HTML
Langkah 3 : Klik di manapun dalam kode dan tekan Ctrl + F dan mencari < / body>
Langkah 4 : Copy kode yang diberikan di bawah dan tempatkan di atas / sebelum < / body>

<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
   url: "http://ajatshare.blogspot.com",   // Search Site URL
   numPost: 100,     // Jumlah hasil pencarian
   summaryPost: true,    // enable-disable Search Result Summary
   summaryLength: 400,    // Panjang dalam kata-kata
   resultTitle: "SEARCH RESULTS FOR", // Judul kontainer
   noResult: "No result",    // Tidak ada hasil
   resultThumbnail: true,    //enable-disable Thumbnail (gambar)
   thumbSize: 110,    // Ukuran gambar dalam px
   fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqy2fu8cr-XnUTMilMHAJcoUHsLK9uz5149K1DzcjAl5_vMkG2nmuVKJnTWkBXkslp3FFknFFMcyTDxzG1UHFG6oCpD6pDgBrBX-drvM8FDihouodXkvzzVvTWcfXJ_Oc00eXAJCuE375/s1600/no-img.jpg" //No Thumbnail
};
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script src='https://ajatshare.googlecode.com/svn/trunk/search-box.js' 
type='text/javascript'/>
<style>
#feed-input {border: 0 none;width: 150px;height: 28px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
#feed-input:focus{width:170px;margin-left:0px;}
#search-btn {background: none repeat scroll 0 0 #359BED;border: 0 none;color: #FFFFFF;padding: 6px 10px;height: 30px;cursor: pointer;}
#search-container { height:auto; overflow:auto; border-radius: 10px; margin-top:8px; margin-bottom: 3%; background-color: #6984BB; padding:10px 10px 0; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); -moz-box-shadow:1 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); display:none;}
#search-container mark { background-color:transparent; color:black; font-weight:bold;}
#search-container a { text-decoration:none; color:#0D3E71; font-weight:bold; font-size:15px; display:block;}
#search-container a:hover { color:#39914E;}
#search-container h4 { width : 500px; margin:0 0 10px; font-family: &#39;Segoe UI Light&#39;, &#39;Open Sans&#39;, Verdana, Arial, Helvetica, sans-serif; color:#FFF; text-align: left;}
#search-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0;}
#search-container li { margin:10px 0 1px; padding:0px 8px 0px 0px; list-style:none; background-color:white; overflow:hidden;
 word-wrap:break-word; border-radius:3px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; border:1px solid #ccc;}
#search-container li img { display:block; float:left; margin:5px 5px ;}
#search-container li p { font-size: 11px; text-align: left;}
#search-loader { left:5px; z-index:999; background-color: #6984BB; width: 10%; color:white; padding:3px 5px; margin-bottom: 10px; font-size: 13px; -webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; display:none;}
#search-container li p { margin:0; padding:5px 0px;}
#search-container li:hover { background:#FAF4D7;}
#search-container .closebtn {font-size: 25px;color: #A8A8A8;padding-bottom: 10px;text-align: center;position: absolute;right: 25px;top: 25px;font-family: arial;}
</style>

Langkah 5 : Setelah berhasil menempatkan CSS dan JavaScript di atas, salin kode di bawah ini dan tempat di mana Anda ingin menampilkan Kotak Pencarian di blog Anda. Anda bahkan dapat Tambah Gadget di panel tata letak Anda dengan menambahkan Gadget "HTML/JavaScript".

<form action="/search" onsubmit="return updateScript();">
<input id="feed-input" name="q" placeholder=" Search Site " size="40" type="text" />
<input id="search-btn" onkeyup="resetField();" type="submit" value="Search" />
</form>

Langkah 6: Sekarang langkah terakhir dan yang paling penting! Menempatkan hasil pencarian kontainer di blog sobat di mana hasil pencarian akan muncul! .
Cari dan temukan posisi yang tepat di mana harus diletakan kode di bawah ini. Periksa posisi yang paling tepat dengan mencari di kotak pencarian di atas.

<div id='search-container'/>
<div id='search-loader'>Loading...</div>

LIVE DEMO - Cara membuat JSON Search Box Widget Untuk Blogger

Catatan:
Lakukanlah perubahan warna dan sesuaikan dengan warna templatenya, dan inilah kode warna yang harus diganti atau dirubah.

- Latar belakang Search Container:
  mengubah warna background - #search-result-container
- Warna Text Search Kontainer Judul :
  warna perubahan - #search-result-container h4
- Latar belakang Search Results :
  mengubah warna background - #search-result-container li
- Warna Teks Hasil Pencarian Judul :
  warna perubahan - #search-result-container a