Kotak Pencarian Effect Show Hide di Blogspot
Kotak Pencarian Effect Show Hide. Kotak pencarian atau search box merupakan salah satu tool yang berguna untuk menjelajahi isi blog. Tool ini memang kalah populer bila dibandingkan dengan related post, popular post dan widget kategori atau pun recent post (Anda bisa baca dalam artikel blog saya yang lain)
Namun bukan berarti tool ini bisa menjadi anak tiri, karena bagi kalian yang lagi main adsense, tool ini sangat berguna sekali sebagai alternatif menambah pundi-pundi dolar jika sobat mau mengkombinasikannya dengan akun adsense.
Akan tetapi disini saya tidak akan membahas bagaimana mengaitkannya dengan akun Adsense, namun saya hanya akan menshare bagaimana membuat kotak pencarian yang kreatif dengan memanfaatkan sedikit kode javascript yang ringan.
Kotak Pencarian Effect Show Hide
Untuk membuatnya seperti biasa membutuhkan 3 langkah mudah
Yang pertama pasang HTMLnya di tempat yang kita inginkan
<div class="search-sosprofil">
<div id="search-box">
<form action="/search" method="get">
<input id="search-form" itemprop="query-input" name="q" placeholder="Search..." required="required" type="text" />
<button class="search-button" title="Search" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="search-icon" onclick="openSosprofil()">
<div class="fa-stack" id="search-icon">
<i class="fa fa-search-plus fa-stack-2x"></i>
</div>
<div class="fa-stack" id="close-icon">
<i class="fa fa-times fa-stack-2x"></i>
</div>
</div>
</div>
<div>
</div>
Kemudian pasang CSSnya, anda bisa merubahnya dan disesuaikan dengan gaya blog anda.
.search-sosprofil{position:relative;width:250px;display:inline-block}
#search-box{width:100%;padding-right:38px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#search-box form{position:absolute;top:41px;right:0;display:block;height:31px;padding:0;margin:0;border:1px solid #dedede;border-radius:3px;line-height:30px;background:#fff}
#search-form,.search-button{border:none!important;line-height:28px}
#search-form{color:gray;width:100%;padding:0 30px 0 10px;height:28px;font-size:14px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.search-button{padding:0 10px;text-align:center;margin:0;top:1px;right:1px;font-size:16px;color:#888;position:absolute;background:none;cursor:pointer}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
#search-box,#close-icon{display:none}
.search-icon{color:#555;float:right;cursor:pointer}
.search-icon .fa-search-plus:hover,.search-icon .fa-times:hover{transform:scale(1.5);transition:all .2s}
.search-icon .fa-search-plus,.search-icon .fa-times{color:#fff;transition:all .2s}
Langkah terakhir yaitu memasang javascriptnya. Seperti biasa taruh di atas </body> dan jangan lupa template anda harus sudah menyimpan javascript library sebelumnya.
function openSosprofil() {
var e = document.getElementById("search-box");
"block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
var e = document.getElementById("search-icon");
"none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
var e = document.getElementById("close-icon");
"block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
};
Simpan dan lihat hasilnya.
Cukup mudah bukan? Demikian tutorial membuat Kotak Pencarian Effect Show Hide di Blogspot. Terima kasih telah berkunjung dan membaca postingan Agung Jaka Nugraha.
