KOTAK Pencarian wajib ada di situs web atau blog. Gunanya untuk memudahkan pengunjung mencari informasi yang mereka butuhkan.
Kotak pencarian juga sangat dibutuhkan blogger untuk menemukan posting yang, misalnya, akan dijadilan internal link di sebuah posting baru. Contohnya seperti gambar dibawah ini.
Berikut ini cara membuat kotak pencarian responsif (mobile friendly), fleksibel, dan fast loading di sidebar blog.
1. Template > Customize > Advance > Add CSS
2. Masukkan kode di bawah ini:
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
3. Klik "Apply to Blog"position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
4. Back to Blogger
Catatan:
Bisa juga dengan cara: Template > Edit HTML > Copas kode di atas tepat di atas kode ]]</b:skin> lalu "Save Template".
5. Klik "Layout" > Add a Gadget > Edit HTML/Javascript
6. Copas kode di bawah ini di kolom "Content"
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div
7. Save!<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div
Kini Kotak Pencarian Responsive sudah muncul di Sidebar Blog Anda. Good Luck!
Tidak ada komentar:
Posting Komentar