Membuat Kotak Pencarian Responsive

1. Masuk ke Dasboard sobat

2. Pilih Tata Letak => add gadget => pilih HTML/javascript

3. Masukkan Kode HTML dibawah dan paste pada kolom yang tersedia

<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>

Selanjutnya masuk pada edit template dan temukan kode </style>, salin CSS berikut tepat diatasnya.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  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:5px 5px;
  width:180px;
}
#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:white;
  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:#17950F;
}
#search-result strong {color:#B75252}

Langkah selanjutnya adalah meletakkan script berikut diatas </body>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<script type='text/javascript'>
//<![CDATA[
(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://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://Tipsblogbaru.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>Hasil Penelusuran Untuk&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>Maaf keyword yang anda cari tidak tersedia</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>

4. Save dan lihat hasilnya
Ganti URL yang saya tandai dengan URL blogmu.