Simple Search Box, Menyembunyikan Search Box Dalam Icon

Simple Search Box, Menyembunyikan Search Box Dalam Icon mungkin akan berkhasiat 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 dikala disorot mouse ini, aku 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 instruksi CSS-nya di bawah ini dan simpan di atas instruksi ]]></b:skin>

#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/AVvXsEjx4ErGq9BT_E4Iz_zHpXxXXeejLO06YU6TPi57Phq1CJb-pvkzgn1DQE7QbHYM0O0tgjcmI6MnqTFOeB9EjqEhrQzQZJYcwq0accDwjkvOIhAgGHI3ib7Q8kcPmEdvJYyjbLFrlXZ4MBY/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 instruksi yang berwarna merah di atas, itu untuk lebar box dikala disorot mouse. Silahkan sesuaikan dengan lebar daerah penyimpanan search boxnya.

2. Dan untuk pemanggilnya silahkan copy instruksi HTML di bawah ini dan simpan di daerah di mana Anda ingin menampilkan search boxnya.

<form action='/search' id='search' method='get'>
<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' 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.

DEMO