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 saat disorot mouse ini, aku rasa tidak mengecewakan 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 aba-aba CSS-nya di bawah ini dan simpan di atas aba-aba ]]></b:skin>
Perhatikan aba-aba yang berwarna merah di atas, itu untuk lebar box saat disorot mouse. Silahkan sesuaikan dengan lebar daerah penyimpanan search boxnya.
2. Dan untuk pemanggilnya silahkan copy aba-aba HTML di bawah ini dan simpan di daerah di mana Anda ingin menampilkan search boxnya.
Sumber https://www.kompiajaib.com/
#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/AVvXsEiDm2PwWf00GAO4Y3Mo6jmRFg2ewZzk-Ar3QeNSK5Sf6wkKouMWt3W2zDYGSVtCwZnhuPXU6voMln-g_oRRKMgaDdm5h5ua4virQPNxCi4qzbsGlJXPXssIPCgw_SJ9H1yvVivpCo5X3yE/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 aba-aba yang berwarna merah di atas, itu untuk lebar box saat disorot mouse. Silahkan sesuaikan dengan lebar daerah penyimpanan search boxnya.
2. Dan untuk pemanggilnya silahkan copy aba-aba 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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Type and enter here ....'/>
</form> Nah gampang kan? Untuk demonya silahkan ikuti link demo di bawah ini, silahkan sorotkan mouse ke ikon search di pojok kanan atas.
0 Response to "Simple Search Box, Menyembunyikan Search Box Dalam Icon"
Posting Komentar