3 Cara Buat Search Box (Kotak Pencarian) Di Blogspot

Translate this Article...

Cara Blogger - Pada dasarnya dalam Template apapun baik Blogspot WordPress ataupun yang lainnya akan secara otomatis sudah menyediakan Widget Navigasi Search Box saat pertama kali dipasang pada blog. Namun untuk sebagian penyedia template terdapat beberapa yang tidak secara langsung memberikan Navigasi Search Box, yang mengutamakan agar pengguna template melakukan pengeditan secara pribadi sehingga dapat juga mempelajari cara untuk menambah Widget yang belum ada.

Tutorial Cara Menambah Kotak Pencarian di Website Blog :

1. Menggunakan JavaScript
Karena menggunakan metode JavaScrip yang tentunya dapat ditambahkan dan difungsikan pada Blog, cara ini dapat digunakan untuk beberapa Platform Blog baik Blogspot WordPress ataupun penyedia Blog lainnya.

• Masuk ke Dashboard Blogger, pilih menu “Layout/Tataletak”
• Plih menu “Add/Tambahkan Gadget” lalu pilih “HTML/JavaScript”
• Masukan kode :

<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

• Ubah nama-blogmu.blogspot.com dengan alamat blog anda
• Kemudian pilih “Save/Simpan“

2. Widget Search Box (Kotak Pencarian)
Widget SearchBox pada umumnya sudah diberikan oleh berbagai penyedia Platform blog seperti Blogspot WordPress dll. Tetapi ada ada juga platform yang tidak menyediakan kolom pencarian ini secara gratis, contoh Weebly. Jika anda menggunakan Weebly Blog untuk menambah Widget Search Box anda bisa melakukan Upgrade Account sehingga mendapatkan fitur penuh. Kali ini yang kita bahas adalah tutorial Blogspot, ikuti langkah di bawah ini :

• Masuk ke Dashboard Blogger, pilih menu “Layout/Tataletak”
• Plih menu “Add/Tambahkan Gadget” lalu cari dan pilih “Blog Search”
• Kemudian “Save/Simpan” pengaturan tersebut

3. Search Box Sederhana
Cara yang kedua ini merupakan cara paling mudah yang bisa anda lakukan tanpa edit HTML. jika anda tertarik silahkan ikuti tutorial berikut ini:

• Login akun Blogger anda.
• Pilih menu “Tata Letak” kemudian pilih Add Gagdet, lalu pilih “HTML/Javascript”
• Copy dan Paste kode berikut ini kedalam kolom “HTML/Javascript”

<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: #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 Artikel Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

• Selesai, jangan lupa klik Save/Simpan

Nah... Itulah cara menambah kotak pencarian internal dalam blog. Anda juga bisa melakukan pengeditan kotak pencarian mengganti warna ataupun tampilan dengan memodifikasi HTML/JavaScript. Tentunya untuk melakukan modifikasi ini anda harus paham dasar-dasar HTML atau juga bisa mencari Navigasi Pencarian Keren yang dibagikan secara gratis di Internet.

Dihimpun dari berbagai sumber :
https://forum-malaikatkomputer.blogspot.com
https://buktiinaja.blogspot.com

Posted by : Erlina Irawati