Membuat G Vusion Search di Blog

Membuat G Vusion Search di Blog

Rio Ilham Hadi

28 June 2014

Membuat G Vusion Search - Setelah sekian lama tidak memposting tutorial, akhirnya sekarang saya bisa membagikan tutorial kepada sobat semua, tutorial kali ini adalah membuat kotak search keren ala template G Vusion template yang di buat oleh Kiki Dee saya tertarik dengan kotak search G Vusion silahkan lihat demonya di bawah ini...

Jika ingin membuat G Vusion Search sobat ikuti langkah-langkah di bawah ini :

Langkah Pertama : Masukan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

 /* CSS Search */
#search {position:relative;font-size:13px;font-family:'Open Sans',sans-serif;width:auto;height:100%;margin:0 auto;text-align:center;}
#search-form {border-radius:2px;margin:0 auto;background:#f97e76 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') 96% 50% no-repeat;border:0 none;height:36px;line-height:13px;width:92%;font-family:'Open Sans',sans-serif;font-size:13px;font-weight:400;color:#fff;padding:0 10px;transition:all 0.5s ease 0s;}
#search-form .search-button,#search-form .search-button:hover{transition:all 0.5s ease 0s;height:36px;width:36px;line-height:13px;background:#fff;border:0 none;float:right;cursor:pointer;outline:none;}
#search-form:hover{background:#d26a64 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') 90% 50% no-repeat;}
#search-form:focus{background:#46515e url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') -10% 50% no-repeat;text-shadow:none!important;outline:none;color:#fff;}
#box {display:none}
.search-text {font-size:13px;font-family:'Open Sans';float:right;cursor:pointer;}
.search-text:hover {color:#fff} 

Langkah Kedua : HTML search ini bisa di pasang di mana saja... terserah sobat.. :D

 <div id='search'>
<div class='content-wrapper'>
<form action='/search' id='searchform' method='get'>
<input id='search-form' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here ...'/>
</form>
</div>
</div> 

Langkah Terakhir : Simpan...

Itulah Tutorial "Membuat G Vusion Search di Blog" jangan lupa Like, share dan komentarnya ya,,, Kunjungi terus blog ini dan tunggu tutorial selanjutnya..

CSS and HTML by : Kiki Dee
Shared by                : Dunia Blanter / Rhinokage Rio

Share This