Kotak Pencarian Modern dengan JSON Search Result

Widget ini sebenarnya di buat oleh DTE.web.id, dan di sini saya hanya akan mempermudah anda untuk memasang widget ini (o) Sebelumnya, seperti apakah modern search result itu?? perhatikan gambar ini..!!!

Udah tau kan, apa itu modern search result. Saya menyebut nya modern, karena widget ini emang cocok buat tema-tema modern. Buktinya banyak template premium menggunakan widget ini. :d

Cara 1

Tanpa mengedit HTML.

cara ini direkomendasikan untuk anda yang, belum faham tentang kode-kode yang bikin pusing kepala itu. :-s

Menuju Tata Letakkemudian tambahkan elemen HTML/Javascript, dan masukkan kode berikut.

 <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;
}
</style>
<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="https://mbah-siyam.googlecode.com/svn/modern-search.js"></script>

Klik simpan, enjoyy (c)

Konfigurasi Widget

Berikut ini adalah beberapa konvigurasi dari widget ini :

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.

Cara 2

cara yang kedua adalah, dengan mengedit HTML. Cara ini derekomendasikan untuk anda yang akan membuat template dan ingin menambahkan widget ini.

dengan edit html

CSS

#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;
}

Javascript

<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="https://mbah-siyam.googlecode.com/svn/modern-search.js"></script>

HTML

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

untuk kode html, anda bisa meletakkan nya di atas kdoe html Sidebar kamu. Atau bisa kamu letakkan di bagian menu dropdown.
Sudah cukup mengerti peletakkan kode-kode di atas kan? :) kalo masih bingung, silahkan bertanya (c)

7 komentar

Balas

Anonim

23 Maret 2014 pukul 07.22

Tukang copas lo...

Farrij Tri Annafiu

24 Maret 2014 pukul 03.44

Widget ini sebenarnya di buat oleh DTE.web.id,

lo gak bisa baca?? emang nya sumber cuma harus di taruh di pojok bawah gitu?? alesan loe bilang gw copas apa?? jelasin... kalo emang di blog gw ada yang copas tanpa sumber, sebut aja yg mana, nanti kan bisa gw hapus & kalo loe laki, jangan cuma komentar pake anonim, pake identitas asli loe...