Membuat kotak pencarian seperti bagas31

Membuat kotak pencarian seperti bagas31 - pasti sudah banyak yang tahu kotak pencarian bagas31 seperti apa, apalagi yang suka download. bagi blogger ada yang beberapa mungkin suka dengan search bermodel bagas31, kotak pencarian ini memang responsive digunakan diblog kamu dan gak terlalu berat untuk dipasang. mungkin langsung saja kita mulai.

Caranya :
1. Masuk blogger > Template > Edit Template
2. lalu Tekan CTRL + F di template lalu cari kode </head>
3. Masukkan kode yang ada dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
.button1 {display: inline-block;outline: none;cursor: default;text-align: center;text-decoration: none;font: 13px/100% Arial, Helvetica, sans-serif;padding: 0.94em 2.6em 0.75em;-webkit-border-radius: 1.2em; -moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.button2 {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 12px/100% Segoe UI, Arial;padding:0.2em 1.1em 0.30em;-webkit-border-radius: .2em; -moz-border-radius: .2em;border-radius: .6em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.button2:hover {text-decoration: none;color: #e89e00;}
.button2:active {position: relative;top: 1px;}
.button1:hover {text-decoration: none;color: #e89e00;}
.button1:active {position: relative;top: 1px;}
.button2 {display: inline-block;outline: none;cursor: default;text-align: center;text-decoration: none;font: 12px/100% Arial, Helvetica, sans-serif;padding: .3em 1.1em .53em;-webkit-border-radius: .2em; -moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.button2:hover {text-decoration: none;color: #e89e00;}
.button2:active {position: relative;top: 1px;}
.orange {color: #FFFFFF;border: solid 1px #14A2F4;background: #1e5ff7;background: -webkit-gradient(linear, left top, left bottom, from(#2467ff), to(#004eff));background: -moz-linear-gradient(top,  #14A2F4,  #14A2F4);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#2467ff&#39;, endColorstr=&#39;#004eff&#39;);}
.orange:hover {color: #FFFFFF;background: #1e5ff7;background: -webkit-gradient(linear, left top, left bottom, from(#2467ff), to(#0042d9));background: -moz-linear-gradient(top,  #2467ff,  #0042d9);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#2467ff&#39;, endColorstr=&#39;#0042d9&#39;);}
.orange:active {box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;}
.input {border: 1px solid #D3D3D3;}
.input:hover {border: 1px solid #D3D3D3;}
.input:focus {border: 1px solid #D3D3D3;}
.input2 {background:url(http://upload.kapanlagi.com/c.php?f=201108101916212_rss_4e42769597bda.jpeg) no-repeat 5px 3px #FFFFFF;
border: 1px solid #D8D8D8;text-indent:30px;border-radius: 5px 5px 5px 5px;color: #000000;}
</style>

4. lalu cari kode  <div class='row' id='content-wrapper'>
5. lalu masukkan kode dibawah ini tepat diatas <div class='row' id='content-wrapper'> atau di bawah kode Header.

<div id='content-area'>
<div style='background:#FFF;margin-top:6px;margin-left:15px;margin-bottom:1px;padding-bottom:10px;'>
<form action='http://www.google.com/cse' method='get'>
<input name='cx' type='hidden' value='007866319173451637390:z7mcjzcktr4'/>
<input class='input' maxlength='2000' name='q' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-AqC6zARRL7TCB8YXzBrCMNJcTeBL0esXZlAPHZQr-L060zk56tTRhzL4Y_tXkO8xXe2X2ysCLx2Qz2ZJF6EJlVBCktGRSI9neYFqELXy0kKCEdKeolEzSddHuqeeT-lp94xv5vMp9iE/s130/search+Starnet_2+copy+copy+copy.png) no-repeat 2px 1.7px; width:83%; text-indent:125px; padding: 9px; font-size: 16px' type='text'/>
<input name='hl' type='hidden' value='en'/>
<input class='button1 orange' style='font-weight: bold' type='submit' value='Telusuri'/>
</form>
</div></div>

agar sesuai dengan kotak pencarian artikel blog sobat silahkan ganti kode yang sudah kasih warna merah dengan ID kotak pencarian blog kalian.
6. simpan template lalu lihat hasilnya

RESULT

jika ada yang mau ditanyakan silahkan comment dibawah , itulah cara Membuat kotak pencarian seperti bagas31. semoga bermanfaat