28 June 2014

Membuat G Vusion Search di Blog


G Vusion Search

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
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic