Kotak pencarian atau dalam bahasa inggris di sebut sebagai Search Box yakni sebuah kotak kolom yang dipakai oleh pengunjung dalam mencari konten artikel blog yang mereka butuhkan dikala menjelajahi blog anda.
Kotak pencarian (Search Box) ini sangat penting kehadiranya dan menjadi salah satu elemen widget blog yang wajib ada di setiap blog atau website. Kehadiran kotak pencarian atau search box ini bukan tanpa alasan sebab kehadirnya di dalam blog sanggup membantu dan memudahkan para pengunjung blog dalam mencari artikel atau postingan yang mereka cari (red. butuhkan) dan blog anda akan menjadi blog yang user friendly.
Untuk menciptakan kotak pencarian atau Search Box di blog blogspot itu ada dua cara yaitu:
Pertama, menciptakan kotak pencarian atau search box memakai bawaan blogger, atau
Kedua, menciptakan kotak pencarian atau search box versi sendiri
Untuk menciptakan kotak pencarian atau search box bawaan blogger cara cukup mudah. pertama anda login terlebih dahulu ke Blogger, sesudah itu anda klik Tata Letak atau Lay Out, kemudian anda klik Add Gadget dan anda cari gadget "Kotak Penelusuran atau Search Box" , Jika sudah ketemu klik Save.
Selamat kini blog anda sudah ada Search Box atau kotak pencariannya. Namun, perlu diingat kotak pencarian atau search box bawaan blogger ini tampilannya kurang menarik berdasarkan pendapat saya. Jika anda menyukii tampilan serch box versi bawaan blogger silahkan anda pasang dan gunakan kedalam blog anda. tapi kalau anda tidak suka dengan tampilan kotak pencarian atau search box versi bawaan blogger anda juga sanggup menciptakan kotak pencarian atau search box versi anda sendiri.
Sedangkan untuk menciptakan kotak pencarian atau serch box versi sendiri caranya cukup gampang dan tidak beda jauh langkah caranya dengan menciptakan kotak pencarian versi bawaan blogger hanya butuh sentuhan isyarat HTML & CSS saja. Untuk membuatnya anda ikuti langkah-langkah di bawah ini:
Cara Membuat Search Box Keren di Sidebar Blog Blogspot
Ikuti Langkah di Bawah ini1. Login ke www.blogger.com
2. Klik Layout atau Tata letak
3. Klik Add Gadget Pilih HTML/Javascript
4. Setelah itu, Masukkan isyarat di bawah ini pada Formnya
<style>
#search-box {
position: relative;
width: 100%;
margin: 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;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get'
target='_top'>
<input id='search-text' name='q'
placeholder='Search Keyword Here....' type='text'/>
<button id='search-button'
type='submit'><span>Search</span></button>
</form>
</div>
#search-box {
position: relative;
width: 100%;
margin: 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;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get'
target='_top'>
<input id='search-text' name='q'
placeholder='Search Keyword Here....' type='text'/>
<button id='search-button'
type='submit'><span>Search</span></button>
</form>
</div>
5. Simpan & Lihat hasilnya.
Jika berhasil tampilanya akan menyerupai di bawah ini
Demikianlah tutorial kali ini "Cara Membuat Search Box Keren di Blog Blogspot". Semoga sesudah anda memasang search box atau kotak pencarian ini di sidebar blog anda. Blog anda menjadi blog yang user friendly, sehingga para pengunjung blog betah berlama-lama dalam menjelajahi setiap artikel di dalam blog anda.
Terima Kasih, telah berkunjung dan meluangkan waktunya untuk membaca artikel sederhana ini dengan judul "Cara Membuat Search Box Keren di Sidebar Blogspot". Semoga artikel kali ini bermanfaat dan menambah wawasan anda.
Salam sukses untuk kita semua.



No comments:
Post a Comment