Home CSS Cara Memasang Kotak Pencarian (Search Box) di Blog

Cara Memasang Kotak Pencarian (Search Box) di Blog

by Erzed

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

Cara Memasang Kotak Pencarian (Search Box) di Blog 2

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

Nah berhubungan dengan Search Box atau Kotak Pencarian, disini admin juga akan membagikan tutorial seputar memasang Search Box di blog. yang admin 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.

Baca :  Kriteria Website yang Menguntungkan Bagi Pemiliknya

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

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

6. Selanjutnya silahkan kasih judul atau tak dikasih juga tak 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 admin ambil dari Template Premium Speed up. sekian tutorial blog yang dapat admin bagikan dan Terima kasih.

You may also like