Saturday, September 10, 2016

Cara Memasang Search Box dengan CSS Keren Di Blogger

Cara Memasang Search Box dengan CSS Keren Di Blogger
Tutorial Blogger Img src: bloggerstutorial-09

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/AVvXsEgEK6CreqMrZQkcwxH2VZ0mcd7ES00K7h21sAG2xAAljICXOquutgs4PHz4Y1SQfKnZpHupxPtZRDdMs_bZBAWaJMw0bGc9tD2fQDW7YTfI81cnQPs4a2aTy-kWbMvRI6OLk7kejcDZURg/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="http://bloggerstutorial-09.blogspot.com/" checked />#<br />
</div>
</form>

Note : ganti http://bloggerstutorial-09.blogspot.com dengan url blog kalian & # itu untuk text silahkan diganti juga.

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

Baca juga gan Cara Mempercepat Loading Blog agar loading blog agan cepat dan disenangi pengunjung blog kalian, terima kasih yah sudah berkunjung semoga bermanfaat.

Cara Memasang Search Box dengan CSS Keren Di Blogger Rating: 4.5 Diposkan Oleh: Alwinto
 

Top