Cara Membuat Kotak Pencarian DiBlog

Hallo sobat blogger !...kali ini Blog sidakaton akan memposting dan membahas cara membuat widget kotak pencarian seperti yang Blog sidakaton gunakan ini atau bisa dilihat juga lewat Screenshoot diatas. Kotak pencarian kali ini telah di modifikasi dari segi bentuk sehingga terkesan elegan dan indah, untuk masalah loading, sudah tentu sama sekali tidak memberatkan, karena kotak pencarian ini dibuat seringan mungkin ( krupuk kale ringan he he he ) gimana sobat tertarik untuk membuatnya? oke sobat..kalau begitu mari langsung saja kita sama-sama bahas dan simak tutorialnya dibawah ini

• Klik Tata Letak / Rancangan
• Klik Tambah Gadget
• Pilih HTML/Javascript
• Masukan kode di bawah ini

<style type="text/css">
form.system_search {
background: -webkit-gradient(linear, left top,left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317,#ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
padding: 1px;
width: 300px;
margin: 1px 3px;
-moz-box-shadow: 0 2px 5px #111;
-webkit-box-shadow: 0 2px 5px #111;
box-shadow: 0 2px 5px #111;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px
}

form.system_search input[type="text"] {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYcQZ0Tn98VBFvMo4h2gUpTN9I5UXJ1VWDzcWr_isBub_yp6cSH99_eoTlfLffgc99S54S4seldaKEjV62gQCvvYPFxH4mgMLUYCGUeTuLPwZOZbdKdW0PkcftYz81oHgXjgmbdJLdsO_/s1600/background.png)repeat;
    border: 1px solid #ddd;
-moz-border-radius-topleft: 14px;
-webkit-border-radius-topleft: 14px;
-khtml-border-radius-topleft: 14px;
border-top-left-radius: 14px;
-moz-border-radius-bottomleft: 14px;
-webkit-border-radius-bottomrleft: 14px;
-khtml-border-radius-bottomrleft: 14px;
border-bottom-left-radius: 14px;
-moz-box-shadow:inset 0px 1px 2px #555;
-webkit-box-shadow:inset 0px 1px 2px #555;
box-shadow:inset 0px 1px 2px #555;
color: black;
width: 230px;
margin: 7px;
height: 20px
}

form.system_search input[type="submit"] {
background: #FF8181;
background: #E70000;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0101', endColorstr='#cc000',GradientType=0 );
border: 1px solid #cc0000;
border-bottom:solid 1px #ff6868;
border-left:solid 1px #FF6868;
margin-left: 0;
-webkit-border-radius-topright: 14px;
-khtml-border-radius-topright: 14px;
border-top-right-radius: 14px;
-webkit-border-radius-bottomright: 14px;
-khtml-border-radius-bottomright: 14px;
border-bottom-right-radius: 14px;
box-shadow:0px 2px 5px #000; 
height: 25px
}
</style>
<form class="system_search" style="font-size:11px;" method="get" name="searchform" action="http://www.google.com/search" target="_blank"><input type="hidden" name="sitesearch" value="http://blogger-sidakaton.blogspot.com/"><input onfocus="searchfield_focus(this)" type="text" name="as_q" size="20" placeholder="Cari Artikel" /><input type="submit" value="Cari" title="Cari artikel" />
</form>​

• Klik simpan

Sebelum disimpan silahkan ganti kode http://blogger-sidakaton.blogspot.com/ dengan URL blog sobat dan setelah itu klik SIMPAN.......
Demikianlah sobat cara membuat kotak pencarian diblog, semoga artikel ini bermanfaat buat sobat sekalian



source: System Of Blog