Blogger Quick Search Result With JSON

Integrasi Widget ke Blogger

Pertama-tama masuk ke halaman editor HTML template Anda, kemudian salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px;
  font:normal bold 13px/normal Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 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);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:yellow;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}

#search-result-container a:hover {color:#052748}

#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px/normal "Trebuchet MS",Trebuchet,Tahoma,Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0;
}

#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px/normal Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}

Setelah itu masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<div id="search-form-feed">
  <form action="/search" onsubmit="return updateScript();">
    <input name="q" type="text" placeholder="Telusuri..." id="feed-q-input" onkeyup="resetField();"/>
  </form>
  <div id="search-result-container"></div>
  <div id="search-result-loader">Loading...</div>
</div>
<script>
//<![CDATA[
var searchFormConfig = {
    url: "http://nama_blog.blogspot.com", // URL Blog
    numPost: 9999, // Jumlah maksimal temuan
    summaryPost: true, // `true` jika ingin menampilkan deskripsi posting
    summaryLength: 400, // Jumlah karakter ringkasan posting
    resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian
    noResult: "No result", // Deskripsi `tak ditemukan`
    resultThumbnail: true, // `true` untuk menampilkan thumbnail posting
    thumbSize: 40, // Ukuran & resolusi thumbnail
    fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-quick-search.js"></script>

Klik Simpan Widget.

Konfigurasi Widget

Semua opsi sangat umum. Saya yakin Anda bisa dengan cepat mempelajarinya:

Opsi	Keterangan
url	URL blog Anda
numPost	Jumlah posting yang akan ditampilkan dalam hasil pencarian. Nilai 9999 maksudnya adalah Anda mencoba untuk menampilkan semua posting yang ditemukan
summaryPost	Pilihan untuk menampilkan atau menyembunyikan ringkasan posting dalam hasil pencarian
summaryLength	Digunakan untuk menentukan jumlah karakter ringkasan hasil pencarian
resultTitle	Judul hasil pencarian
noResult	Peringatan yang menunjukkan bahwa posting tidak ditemukan
resultThumbnail	Pilihan untuk menampilkan atau menyembunyikan thumbnail posting dalam hasil pencarian
thumbSize	Digunakan untuk menentukan ukuran dan resolusi thumbnail hasil pencarian
fallbackThumb	Gambar cadangan untuk posting tak bergambar.

---

CSS untuk Tema Minimalis (Layout Dasar)

Digunakan sebagai pengganti kode CSS di atas demi kemudahan dalam hal penyesuaian tema:

#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:block;
  width:100%;
  border:1px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:inherit;
  font-size:13px;
  margin:0;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  left:0; /* ganti menjadi `right:0` untuk mendorong kontainer ke kanan */
  z-index:9999;
  border:1px solid #ccc;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow:0 3px 5px rgba(0,0,0,.2);
  box-shadow:0 3px 5px rgba(0,0,0,.2);
  display:none;
}

#search-result-container mark {
  font:inherit;
  display:inline;
  background-color:#ff0;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  font-weight:bold;
  font-size:110%;
  display:block;
}

#search-result-container h4 {
  margin:0 0 10px;
  font:inherit;
  font-weight:bold;
  color:#B50001;
}

#search-result-container ol {
  background:none;
  border:none;
  margin:0 0 10px;
  padding:0;
}

#search-result-container li {
  margin:0 0 15px;
  list-style:none;
  overflow:hidden;
  word-wrap:break-word;
  padding-left:65px;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 0 2px -55px;
  border:1px solid #ccc;
  padding:2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:9999;
  margin-top:4px;
  font-size:10px;
  display:none;
}

http://www.dte.web.id/2012/09/membangun-aplikasi-quick-search-dengan.html

Tweet