Cara Memasang Kotak Search Di Blog atau Drop Down Cara Memasang Kotak Search Di Blog atau Drop Down

Cara Memasang Kotak Search di Blog atau Drop Down. Kembali saya posting tentang blog setelah sebelumnya saya sudah posting artikel serupa yang berjudul Cara Membuat Widget Entri Populer Gambar Berputar. Pada artikel ini saya akan memberikan kode script dan tutorial memasang di blog.

Kotak Search ditambahkan di blog bukan hanya sebagai pajangan atau hiasan. Tetapi berfungsi agar pengunjung yang ingin mencari sebuah artikel yang menarik yang ingin di ketahuinya. Untuk Widget Search, sebenarnya blogger sudah menyediakannya, tetapi mengapa memilih menggunakan HTML/Javascript? Kalau ada pertanyaan seperti itu saya akan menjawab "Karena widget itu kurang menarik atau polos" Mungkin anda akan berfikir seperti itu juga. Maka dari itu saya posting artikel Cara Memasang Kotak Search Di Blog atau Drop Down. Nah berikut ini saya akan memberikan kode scriptnya dan langkah langkah memasang nya di blog

Cara Memasang Kotak Search Di Blog

1. Login ke akun blogger anda

2. Pada dashboard, pilih blog lalu masuk ke Tata Letak

3. Klik Tambah Gadget pada lokasi dimana kotak search akan muncul

4. Muncul jendela baru gadget blog, cari yang bernama HTML/Javascript

5. Copy kode dibawah ini, lalu pastekan di kolom konten HTML/Javascript

<form action='/search' method='get' style='display:inline;'>
<input id='s' name='q' placeholder='Cari Artikel di Blog Ini...' type='search'/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 250px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh87RRlpMK6xeL81JrrHLR-MmsELyM36DXFu9PDeiy8bZIVhOUFgVG8NALu4tUWrZ29pedtEvsuRp4d_c50-Lq-EGQyjnzPISLZmKCajbLS43WGiVeZdy2NB9sXj8NhZvND4AC62ysVwWQ/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

6. Klik Simpan dan coba lihat blog anda sekarang. Kotak search yang menarik pun sudah muncul

Apa tampilan kotak search menurut anda terlalu panjang? jika iya, ubah angka 250px dengan angka yang lebih kecil

Itu kotak search yang dipasang di sidebar/footer. Tetapi bagaimana cara agar memasang kotak search di menu drop down? Jangan bingung, saya akan memberikannya juga pada postingan ini.

Cara Memasang Kotak Search Di Menu Drop Down Blog

Seperti yang bisa anda lihat di menu drop down blog ini, saya memasangkan kotak search agar lebih lengkap. Berikut ini caranya

1. Login ke akun blogger anda

2. Pada dashboard, pilih blog lalu masuk ke Template

3. Klik Edit HTML dan cari salah satu menu di drop down anda dengan menekan F3 atau CTRL + F

4. Letakkan kode script kotak search dibawah kode drop down. Contohnya seperti ini:

<li><a href="http://jonarendra.blogspot.com">Tutorial</a><li>
<li><a href="http://jonarendra.blogspot.com">Informasi</a><li>
<li><a href="http://jonarendra.blogspot.com">Facebook</a><li>
<li><a href="http://jonarendra.blogspot.com">Komputer</a><li>
<li><form action='/search' method='get' style='display:inline;'>
<input id='s' name='q' placeholder='Cari Artikel di Blog Ini...' type='search'/>
</form></li>

5. Klik Simpan Template

Masih bingung tentang menu dan HTML drop down? jika iya, baca postingan saya Panduan Lengkap Mengedit Menu Horizontal Atau Drop Down. Semoga anda langsung mengerti setelah baca artikel saya yang itu.

Itulah keseluruhan artikel saya kali ini yang berjudul Cara Memasang Kotak Search Di Blog atau Drop Down. Semoga bermanfaat untuk anda yang belum bisa memasang kotak search di blog atau drop down. Jika ada masalah saat penerapan tutorial diatas, silahkan poskan komentar dengan memberikan pertanyaan mengenai masalah anda.