Show hide searchbox blogger

Membuat tampilan blog menjadi unik memang tidak ada habisnya dan kali ini saya coba untuk berbagi cara membuat kotak pencarian yang bisa di munculkan dan di sembunyikan pada blogger.

lihat contoh berikut


selain untuk menambah unik tampilan, trik kotak pencarian seperti ini juga bisa di gunakan untuk menghemat ruang dan kolom. bagaimana caranya, ikuti langkah berikut ini.

Silahkan login terlebih dahulu di editor template blogger anda.
setelah itu letakkan kode HTML kotak pencarian berikut ini di elemen yang anda inginkan, misalnya di header, di menu, atau di sidebar blog anda.
berikut ini adalah kode HTML kotak pencariannya:

<form class="search-form" action="/search" method="get">
    <div class="input-wrapper">
        <input type="text" name="q" placeholder="cari...">
        <a title="Search" class="sc" href="/"></a>
    </div>
</form>

setelah itu, letakkan kode CSS berikut ini di dalam kelompok dimana CSS blog anda di simpan:

.input-wrapper {
  border:1px solid #333;
  width:26px;
  height:26px;
  background-color:#eee;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  overflow:hidden;
  position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 16px;
  display:block;
  width:200px;
  height:26px;
  font:italic bold 12px/26px Arial,Sans-Serif;
  color:#333;
  outline:none;
}

.input-wrapper.focus {
  background-color:#eee;
  border-color:#000;
}

.input-wrapper .sc {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
}

sekarang tambahkan kode jQuery berikut agar fungsi berjalan dengan baik:

$(function() {
    $('.search-form .sc').on("click", function() {
        $(this).hide()
            .parent().addClass('focus')
                .stop().animate({width:200}, 120, "swing")
                    .find('input').trigger("focus")
                        .on("focusout", function() {
            $(this).next().show()
                .parent().removeClass('focus')
                    .stop().animate({width:26}, 120, "swing");
        });
        return false;
    });
});

Perlu anda sesuaikan: ubah lebar sesuai dengan tampilan di blog anda, dengan mengatur kode berikut .stop().animate({width:200}, 120, "swing"

setelah itu simpan dan lihat hasilnya, demikan saja semoga berguna...