Loading...

Cara membuat JSON Search Box Widget Untuk Blogger

ajatshare 23:02 | 10 Comments

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>



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
Masukan email Anda untuk Dapatkan Update terbaru dari AjatShare BloggerPrint PDF
Cara membuat JSON Search Box Widget Untuk Blogger
Cara membuat JSON Search Box Widget Untuk Blogger - written by ajatshare, published at 23:02, categorized as Javascript, Widget . And have 10 comments
Facebook Twitter Google+ Linkedin Technorati Digg DMCA.com

10 comments

Tambah komentar

pertamax kang :D, kalo blog kang ajat pake JSON juga?

Tidak sob...search diblog ini menggunakan javascript.

Menarik nih mas bahasannya
Kalo pke widget ini jd lebih gampang mencari artikel yg di cari mas
Trims ya :)

Unik juga widget Search Box nya Kang. Ijin Nyoba ya.

betul mas, sebetulnya cara ini sudah banyak digunakan cuma sedikit saya modifikasi bagian penempatannya dan tanpilannya saja.

biasa aja...kalau mau coba silahkan sob...

Hasil modifin nya bagus mas
Minimalis tapi keliat dinamis... :)

Nice Post ! , Postingan Berkualitas Keren Gan ^_^

Blogwalking From Andrekocak Blog - SilverQueen,Cerita Bukan Dewasa
Visit Back ~

Jangan terlalu memuji itu hanya artikel biasa aja koq, banyak blog lain yang lebih bagus dan keren daripada punya saya.
Ok....terjun langsung...!

  • Berkomentarlah dengan baik, sopan dan sesuai dengan isi konten serta tidak [SPAM].
  • Untuk menyisipkan kode dalam komentar harap di [Konversi] terlebih dahulu.
  • Jika ingin bertanya di luar judul artikel "Cara membuat JSON Search Box Widget Untuk Blogger". Harap menggunakan tombol [OOT].

Forum DiskusiOut Off Topic (OOT)Formulir KontakArsip Blog
-->