0 Cara Membuat Kotak Search di Blog

Sangat peting bagi sobat blogger intuk menambahkan kotak pencarian supaya memudahkan pengunjung mencari sesuatu di bolog sobat sekalian....
berikut cara menambahkan kotah pencarian....
 
Cara Membuat Kotak Search di Blog


1. Login ke blog anda
2. Masuk ke Rancangan -Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode </head> dan masukan kode berikut diatas kode </head>

#search{margin-left:11px;}

input#s {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb6Fj1TxwxKH-QomveUzMw0g0mWptYkAcXpiKFTo3eDy5czpH4CNBykPbA8YLWSFPkmNVWmiLTFkdWtMOZJDlZusPT84jji0HSWzWjEcA72-ZmGpkrihtB2hBSW5ssFdra75BnZkL01dy8/s1600/fields.jpg) top left repeat-x;
border: 1px solid #CCCCCC;
padding: 6px 4px 6px 4px;
font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #6D6D6D;
width: 275px;
float: left;
}

input#search-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsxGxZzxzRZu_3su_Rp_L3JFRCzkIbGQIexoqZpBwT27YFn5ruvZQJJGBSs5Y3I6OHAVeB9habeYsF2aDd5VcbLbcCYFH1U3HUrmfQ3VNozGSWdnBx_TYSg2xBYtKye-YWu24WvhyphenhyphenTJqH/s1600/search.png) 0 0;
border: 0;
width: 25px;
height: 27px;
position: absolute;
margin: 4px 0 0 -30px;
cursor: pointer;
}

5. Setelah itu silahkan anda cari kode <div id='sidebar-wrapper'> dan Masukan kode berikut tepat di bawahnya

<div id='search'>
<form action='/search' id='search-form' method='get'>
<input id='s' name='q' onfocus='doClear(this)' type='text' value='search'/>
<input id='search-submit' type='submit' value=''/>
</form>
</div>

6. Save

ket: ganti tulisan search dengan tulisan yang ingin anda tampilkan di dalam kotak

Artikel Terkait