Ditulis oleh: Ditulis pada: 5/28/2013
Simple Search Box, Menyembunyikan Search Box Dalam Icon mungkin akan berguna dalam menghemat ruang dalam blog, sehingga tampilan blog akan lebih simple.
Berawal dari coba-coba memodifikasi search box menjadi simple yang berada di balik ikon search dan akan muncul dan melebar ketika disorot mouse ini, saya rasa lumayan juga untuk diterapkan di blog hehehehe...barangkali ada yang mau coba hehehehe.... Cara membuatnya cukup mudah, bagi yang ingin mencobanya ikuti langkah-langkahnya di bawah ini.
1. Silahkan copy kode CSS-nya di bawah ini dan simpan di atas kode ]]></b:skin>
Perhatikan kode yang berwarna merah di atas, itu untuk lebar box ketika disorot mouse. Silahkan sesuaikan dengan lebar tempat penyimpanan search boxnya.
2. Dan untuk pemanggilnya silahkan copy kode HTML di bawah ini dan simpan di tempat di mana Anda ingin menampilkan search boxnya.
#search input[type="text"]:hover, #search input[type="text"]:focus {
width:300px;
border: 1px solid #333;
border-radius:50px;
padding-left:35px;
}
#search input[type="text"] {
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4zTPDVJGxcIvWWvL6OqdV7JTn8XfeaLyiVWEpy_llYNRvJPyTGBVZohWb4Kc2-Yxct8ycRlXVfAKcG0b-cySfjwXM8Oq2hyphenhyphenUR2TmHd8T8Rv-VJsd-gh7sMc__KexeP1gxdklG6Sg0sgE/s1600/tombolcari.gif")no-repeat center left 6px;
width:0px;
font-size: 13px;
color: #222;
padding: 10px 10px 10px 25px;
transition: all 0.5s ease-in-out;
margin:5px 0;
z-index: 9;
position: absolute;
border: 1px solid #333;
border-radius:50px;
right:5px;
}
Perhatikan kode yang berwarna merah di atas, itu untuk lebar box ketika disorot mouse. Silahkan sesuaikan dengan lebar tempat penyimpanan search boxnya.
2. Dan untuk pemanggilnya silahkan copy kode HTML di bawah ini dan simpan di tempat di mana Anda ingin menampilkan search boxnya.
<form action='/search' id='search' method='get'>
<input id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Type and enter here ....'/>
</form>
Nah mudah kan? Untuk demonya silahkan ikuti link demo di bawah ini, silahkan sorotkan mouse ke ikon search di pojok kanan atas.