Cara Membuat Tombol Search Pintar Dengan CSS ~ Dunia Tutorial Blogger Tutorial

BlogThis! | Email This! | Print This! | 1 comment

Do you like this post?

Cara membuat tombol Search pintar dengan Css pada blog, untuk membuat tampilan indah pada blog anda berikut kami berikan sebuah metode lain untuk membuat tombol Search Pintar dengan CSS. Ikutilah petunjuk berikut ini :

Login ke dashboard blogger Anda --> layout --> Edit HTML
Scroll ke kebawah dan cari tag </head> untuk lebih mudah gunakanlah Ctrl+F.
Copy kode di bawah ini dan paste tepat sebelum tag </head>

<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTNnuJLWKLnoD26f4Q8A3jvTUlDtK3EtDy6n4UmpynKn-E8yDTHBUWVzKU6U0i38Ll9-4DysIXCUBHwleZ2QC_6M3Ul0xUFeDvT701kvex0BtzaeWS6-FgnpPA7DXMOZwm2Fa3uZDdmVo7/);
}
#search form {
margin: 0;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlHtvMtIKP4veqJYstg3Lf7v-dFnkdtBRh7LfM48IP_isiLI9GJplPtxcs3ve9VXgoLLxfx8CEZt2p416AYjPnb9lJPHijd1_X9R2gw33s5yNL42IfN7F_HU3UAbiJ2r_3oKMY7wrS-Ct5/s1600/sform.png) no-repeat;

border:none;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#C6C6C6;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFLyMZBtGvFOdhZ9ZkOIBFr1eH55vWJqDnlYWwcy6AP9p5Kjrfu0MQvUSj6Ae2dEpWaVJRDrkMJMNX0NgtsBf84D4EXPr5z6yZbf_K47GkJiH9WZDkSsNxwKuBZ5K1doqJqxmbx3bkwuT/);

border:none;
font: bold 100% "century gothic", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

</style>

Catatan : Ganti alamat gmabar diatas sesuai keinginan anda jika ingin merubahnya dan berkreasi

Pergi ke Layout --> Rancangan Halaman dan Klik "Tambah gadget"
Pilih "Html/java script" dan tambahkan kode dibawah ini dan simpan

<div id='search'>
<form id="searchform" action="http://BLOGMU.blogspot.com/search" style="display:inline;" method="get">

<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>

Catatan : Ingat, ganti "BLOGMU" dengan alamat Blog kamu.

Dibawah ini adalah tampilan hasilnya