Search Box / Kotak pencarian Valid Blogger Admin : Unknown

Cara membuat Search Box / Kotak pencarian blogger di widget sidebar.

Sebelumnya catatansaif sudah pernah share cara membuat kotak pencarian keren untuk blog, kali ini ada yang unik lagi yang lebih valid dan menyeluruh. Tanpa tunggu lama2 mari kita coba.

Langkah-langkah pemasangan:

• Pertama login ke blogger
• Kemudian pilih menu Tata Letak
• Pilih Tambahkan Gadget
• Setelah itu masukkan kode perintah CSS di bawah ini

<style type="text/css" scoped="scoped">
#search-result {
  max-height:467px;
  overflow:auto;
}
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#0f5079;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:2px 5px;
  width:467px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:black;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#0f5079;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>
<script type="text/javascript">
(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
       // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
       // When the keyword is submitted...
    $form.on("submit", function() {
        // Get the input value
        var keyword = $input.val();
        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');
        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://catatansaif.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://catatansaif.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {

                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });
    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);
</script>

Catatan :
Warna biru dengan alamat Url blog sobat
Warna merah adalah lebar kontener/kotak pencarian silahkan sesuaikan.
Warna hijau adalah warna background silahkan disesuaikan. [ ganti warna dengan kode atau tulisan bahasa inggris.

• Langkah terakhir simpan dan lihat hasilnya.