Cara Memasang Search Box dengan CSS Keren Di Blogger

Tutorial Blogger

Memasang search box di blog anda sangatlah penting untuk memudahkan pengunjung agar mencaari artikel yang ingin ia baca, search box ini akan mencari seluruh artikel anda namu yang paling spesial dari search box ini adalah search form ini menggunakan google search jadi apabila pengunjung mengklik apa yang dia cari dari search box ini akan seperti mengklik dari google dalam hal ini anda mendapatkan lagi visitor organik dari blog anda.

Catatan : Perlu anda ketahui sebelum mencoba ini silahkan back up terlebih dahulu template anda.

Memasang search box di blogger

1. Login ke Dasboard Blogger -> Template

2. Pilih Edit HTML

3. Cari kode ]]></b:skin> gunakan CTRL+F agar memudahkan pencarian.

4. Copy kode dibawah tepat diatas kode ]]></b:skin> tadi.

#searchform {
    position:absolute;
    right:0;
    top:80px;
}
#searchform input {
    border:1px solid #626262;
    background:#000;
    padding:5px 4px 6px;
    color:#999;
    width:215px;
    float:left;
}
#searchform input#searchsubmit {
    width:65px;
    height:30px;
    border:none;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBJ6yJX0ugWtzcUZbtXpA5j4ohiYWAWpHUHZdZFa7rqiAkc3OTXwb8YtlFAbPwuhyphenhyphenR1qY3uBM-xNiz2DXiOYh5ZD3MaS6rn1CD1w7Q18wQyu5rkqfQWRhaAd9ch7fJR-WSQbJxasc8Sc/s1600/bk_search_but.jpg) 0 0 no-repeat;
    cursor:pointer;
}

5. Lanjut lagi.
6. Pergi ke Tata Letak -> Tambahkan Gadget -> pilih HTML/Java Script
7. Copy code dibawah.

<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</form>

Untuk pencarian Lewat Google ini :

<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="sitesearch"
 value="https://ctcoke.blogspot.com/" checked />#<br />
</div>
</form>

Note : ganti https://ctcoke.blogspot.com dengan url blog kalian & # itu untuk text silahkan diganti juga.

8. Simpan.
9. Selesai, silahkan dilihat hasilnya pasti keren.