Cara Membuat Kotak Search Keren Full CSS Di Blog

Oleh Unknown

Wednesday, 2 October 2013

Bagikan :

Tweet

Cara Membuat Kotak Search Keren Full CSS Di Blog - Udah lama nih gx share tutorial blog yang keren-keren dan full css. Awalnya pengen share tutorial ini dari kemaren-kemaren, tapi baru sempet sekarang dan banyak yang nanyain cara buat kotak search seperti screenshot di atas. Nah, saya akan membagikan caranya secara gratis, ok langsung aja diliat dan dipraktekan

• Login ke Blogger
• Klik Tata Letak >> Tambah Gadget/Add Gadget >> HTML/Javascript
• Masukkan kode berikut

<style type='text/css'>
.searchform {background: url(http://2.bp.blogspot.com/-jMJ8vHdo3JQ/UcBpm_7ifEI/AAAAAAAAZR8/2hXbiX3pzmQ/s1600/search.png) no-repeat; width:550px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform {padding-top:4px;}
.searchform .searchfield {background: #f5f5f5;width: 416px;border: 1px solid #999;overflow: hidden;}
.searchform .searchbutton {background:#008AE6;height: 30px; width: 104px;border:none;font-size: 13px;color: #fff;text-weight:bold;text-align: center;cursor: pointer;}
</style>
<div class='widget-content'>
<br/><center><form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' placeholder='Search...' type='text'/>
<input class='searchbutton' type='submit' value='SEARCH'/>
</form></center>
<span style="font-weight:bold;">Topik Pilihan:</span>  <a href="URL ARTIKEL" rel="nofollow">JUDUL ARTIKEL</a>
</div>

• Simpan dan lihat hasilnya

Sekian tutorial blog yang bisa saya bagikan, semoga bermanfaat dan kalo mau copas kasih sumbernya :v

Tag : Tutorial Blog