Membuat Efek Hover di Kotak Search Blog

Membuat Efek Hover di Kotak Search Blog dengan CSS ~ Triks CSS Efek Hover pada Kotak Pencarian Blog ini bisa kita manfaat kan untuk penghias blog kita agar lebih atraktir dan beda dengan yang lain. Efek yang akan kita buat ini akan memanfaatkan kotak search atau pencarian yang ada pada blog kita masing-masing. ini bertujuan untuk mempercantik tampilan blog kita dan sebagai pembeda tentunya.

Membuat Efek Hover di Kotak Search Blog tentunya sudah tidak asing lagi kita dengar, atau mungkin sebagian dari agan-agan sudah pernah mencobanya. Bagi yang belum silahkan bisa mencoba triks ini untuk penambah ilmu dalam dunia CSS dan Blogging.

Seperti itu untuk demonya bisa agan-agan lihat,, jika memang tertarik silahkan embed scriptnya dibawah ini.
Script Embed
Untuk Script Pemanggilnya [ID]

<div id="wrap-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="URL_IMAGE" type="image"/>
    <input type="text" name="q" value="Pencarian" onfocus="this.value='';" onblur="this.value='Pencarian';" onmouseover="this.value='';" onmouseout="this.value='Pencarian';" />
    </form>
  </div>
</div>

 Script CSS [Embed]

<style>
  #wrap-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #wrap-search:hover input[type='text'] { color:#597C84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #25464D;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
</style>

Rumayan Jan Joss tenan kan..??
Oke Silahkan di Coba dan jangan lupa berkomentar sebagai jejak anda datang kesini.