Skip to main content

Simple Search Box, Menyembunyikan Search Box Dalam Icon

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>


#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==&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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB