Sobat SOBER - Tips Blog kali ini Cara Membuat Kotak Search Engine Responsive pada Blog, Search Engine pada blog merupakan bagian penting pada blog yang bisa memudahkan kita dalam mencari apapun di Blog kita sendiri. Ada salah satu alternatif dengan menggunakan gadget google penelusuran yang sudah ada di dafar list gadget Blogger.com.
Kotak search engine ini fungsinya sama dengan search engine lainnya kelebihan kotak search engine ini benar-benar responsive sesuai dengan gaya template manapun. akan tetapi pada intinya sama fungsi dan kegunaannya sih, ya itu tergantung dan selera sobat dalam memilah-milah hal seperti ini.
Baca juga : Cara Agar Syntax Highlighting satu kali Click atau Double Click
Untuk itu saya share cara memasang search box / kotak penelusuran dengan niat membantu blogger pemula agar lebih mudah dalam menambahkan kotak search engine yang responsive.
Langkah 1 : Login Blogger tentunya
Langkah 2 : Pilih Layout / Tata Letak --> Add a Gadget / Tambahkan Gadget --> Pilih HTML/Javascript kemudian paste kode dibawah ini
<style>
#search-box {
position: relative;
width: 100%;
margin: 10px 0 0 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: #1a7db7;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>Note :
Yang ditandai kuning bisa di edit sesuai selera agan, yang lain juga bisa kalo agan mau merubah warna tombol search engine edit yang berwarna biru sesuaikan dengan selera.
Sekian Tips Blog kali ini mengenai Cara Membuat Kotak Search Engine Responsive pada Blog, semoga membantu dan bermanfaat.
