Cara Memasang Kotak Pencarian (Search Box) di Blog

Cara Memasang Search Box atau Kotak Pencarian di Blog,- Kotak Pecarian atau Search Box adalah sebuah kotak yang digunakan untuk mencari informasi atau artikel lain pada sebuah Wesite atau Blog. Kotak ini sangat bermanfaat pada blog atau Website yang memiliki banyak artikel karena mungkin informasi yang dibutuhkan pengunjung terdapat di blog tersebut. oleh karena itu Search Box sangat berguna di sebuah Blog/Website.

Search Box Sendiri tidak semua template mempunyainya, karena biasanya banyak template yang kita download dari internet atau dari bawaan blogger tidak langsung ada. namun sebenarnya blog berplatform blogger sudah menyediakanya tinggal kita cari dan pasang pada menu Tata letak. walaupun sudah disediakan, banyak blogger yang kurang menyukainya karena tampilanya yang kurang bagus. oleh karena itu banyak yang mencari kode pemasangan dari internet.

Nah berhubungan dengan Search Box atau Kotak Pencarian, disini saya juga akan membagikan tutorial mengenai memasang Search Box di blog. yang saya khususkan bagi anda-anda semua yang ingin memasang kotak pencarian di blog anda yang masih belum ada Search Box. Ok langsung saja berikut Tutorialnya,

Cara Memasang Kotak Pencarian (Search Box) di Blog

1. Pertama silahkan Masuk ke Akun Blogger - Template dan Edit HTML

2. Kemudian Silahkan cari kode ]]</b:skin>, Gunakan CTRL+F untuk mempermudah pencarian.

3. JJika sudah ketemu selanjutnya silahkan Copy kode CSS dibawah ini dan Paste tepat diatas kode ]]</b:skin>.

/* Search Box by
----------------------------------------------- */
#search-box{
position: relative;
border: 1px solid #ddd;
margin: 5px auto;
}
#search-form{
height: 30px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
overflow: hidden;
}
#search-text{
color: #ccc;
border-width: 0;
}
#search-box input[type="text"]{
width: 100%;
padding: 7px 0 7px 7px;
outline: none;
}
#search-button{
position: absolute;
top: 0;
right: 0;
height: 30px;
margin: 0;
text-align: center;
line-height: 0;
border-width: 0;
background: whitesmoke;
cursor: pointer;
font-size: 12px;
font-weight: bold
}

4. Terakhir Simpan Template.

Langkah selanjutnya adalah memunculkan Kotak Pencarian (Search Box) di Widget Blog, untuk caranya bisa dilihat dibawah ini.

5. Selanjutnya Masuk ke Tata Letak - Tambahkan Gadget lalu Pilih HTML/Java Script.

6. Selanjutnya silahkan kasih judul atau tidak dikasih juga tidak apa-apa lalu masukkan kode CSS dibawah ini pada bagian kolom HTML.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search..&quot;;}' onfocus='if (this.value == &quot;Search..&quot;) {this.value = &quot;&quot;}' type='text' value='Search..'/>
  <button id='search-button' type='submit'>GO</button>
</form>
</div>

7. Terakhir Tinggal Simpan.

Panjang Search Box di atas akan menyesuaikan ukuran widget pada blog anda, oh ya hampir lupa search box diatas kodenya saya ambil dari Template Premium Speed up. sekian tutorial blog yang dapat saya bagikan dan Terima kasih.


Sumber https://www.blogespada.net/

Bagikan Artikel ini