King Files: Membuat Search Box Blogspot Dengan Mudah dan Cepat

Thursday, March 2, 2017

Membuat Search Box Blogspot Dengan Mudah dan Cepat

Search Box adalah sebuah tool yang bisa dikatakan wajib ada pada sebuah website atau pun blog agar pengunjung mudah untuk mencari dan menemukan artikel yang mereka butuhkan di dalam website atau blog kita. Namun terkadang ketika kita mendownload template entah itu blogspot atau yang lain setelah kita pasang ternyata tidak ada tombol search tersebut padahal kita sudah suka dengan desain template tersebut dan hanya karena tidak fitur search box kita jadi kecewa berat.

Tapi tenang, Versifull punya solusi jitu untuk hal ini. Kali ini saya akan membagikan sebuah cara untuk membuat search box secara manual di blogspot kita, dan tentunya tampilannya ya lumayan lah ga jelek jelek amat ko, dan bisa dimodifikasi jika kalian bisa atau mahir edit script nya, hehe

Ok ga usah banyak omong langsung ajah ikuti langkah - langkahnya berikut :

1. Masuk ke Blogger anda

2. Klik Layout (Kalo bahasa Inggris) atau Tata Letak (Kalau bahasa Indonesia)

3. Klik Add Gadget atau Tambah Gadget di tempat kita akan menambahkan tombol search nanti

4. Pilih HTM/Java Script

5. Copy script dibawah ini :

<style>
#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;
}
</style>

<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>

6. Kemudian Paste di HTML/Java Script yang kita buat tadi

7. Simpan

8. Selesai

Lihat hasilnya Search Box sudah muncul di blog kita. Untuk contoh langsungnya bisa kalian lihat di blog Versifull ini ada Search Box nya :)

Baca juga : Cara Pasang Iklan Adsense di dalam Postingan

Sekian tutorial tentang Cara Membuat Search Box Blogspot Dengan Mudah dan Cepat. Semoga dapat membantu dan menambah wawasan kita semua. Jangan lupa like dan sharenya atau jika ada pertanyaan dan saran bisa berkomentar dengan bahasa yang baik dan sopan.

Available link for download