Simple Search Box, Menyembunyikan Search Box Dalam Icon

Simple Search Box
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("http://1.bp.blogspot.com/-N_4TWVUmXv4/UDdKJf5NwCI/AAAAAAAAIgY/AGrKXgwkrTo/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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments