Tutorial Membuat Tombol Search di Blog Dengan CSS ~ Xmedia

Assalamualaikum teman" :D

Disetiap blog pasti membutuhkan tombol search untuk memudahkan pengunjung untuk mencari artikel yang mereka sukai dan mereka juga jadi betah berlama" di blog kita untuk membaca artikel yang kita buat ..

nah ,pada kesempatan ini saya akan share mambuat tombol search di blog ,kalo mau liat hasilnya lihat saja di paling atas blog saya ,kurang lebih hasilnya begitu ,tapi agak saya modif sedikit ,yuk ikutin caranya ..

1.Login ke blogger kalian masing".

2.klik Template =) Edit HTML

3.Cari code ]]></b:skin>

4.Copy script di bawah ini ke dalam ]]></b:skin>


/*Search Box CSS3 by alfarizi*/

#search{position:relative;float:right;margin:5px 10px 5px 10px}li.search{float:right;line-height:normal}#search input[type="text"]{float:left;background:#444;height:30px;line-height:30px;border:0 none;font-size:12px;font-weight:500;width:120px;padding:0 10px}#search input#search-button{height:30px;line-height:30px;background:#0054BB;border:1px solid #fff;float:right;padding:0 10px;cursor:pointer;color:#fff}#search input#search-button:hover{background:#333}#search input[type="text"]:focus{background-color:#fff;text-shadow:none!important;outline:none;color:#555}

5.Cari code </nav> atau </navigation>
6.Copy script di bawah ini ke dalam </nav> atau </navigation>.

<li class='search'>

<form action='/search' id='search' method='get'>

<input name='q' placeholder='Pencarian...' size='40' type='text'/><input id='search-button' type='submit' value='Cari'/></form>

</li>

7.Save template ,dan lihat hasilnya :D

Sekian wassalam :D