Saturday, 12 December 2015

Cara Membuat Kotak Pencarian di Blog

·   0
Cara Membuat Search Box di Blog atau Kotak Pencarian itu sangatlah mudah untuk di praktikan atau di terapkan di blog kita. Di sini saya akan membahas tentang membuat Kotak Pencarian atau dalam bahasa inggrisnya yaitu Search Box yang sangat berfungsi bagi blog Teman-teman sekalian untuk memudahkan dalam mencari artikel yang akan kita inignkan, Sebelum berlanjut ke tahap selanjutnya perlu kalian ketahui terlebih dahulu tentang search box atau kotak pencarian. Fungsi Secarh Box atau Kotak Pencarian pada blog kita yaitu untuk memudahkan pengunjung jika si pengunjung akan mencari informasi yang dia inginkan. Tidak hanya itu juga kegunaan dari search box, search box ini juga sebgai  pendukung jika Teman-teman sekalian inign mendaftarkan blog Teman-teman sekalian ke Google Adsense. Mengapa begitu? Karena dengan adanya search box maka blog kita akan terlihat profesional di mata google. Maka setiap blog jika artikelnya sudah melebihi seratus artikel wajib di pasang search box ini guna untuk memudahkan dalam menemukan artikel yang kita cari. Okelah langsung saja kita ke TKP guys.

search box di blogger
Ini adalah kotak pencarian di blog atau bisa di sebut juga search box

          Di sini saya akan membuat dua kotak pencarian yang berbeda, kotak pencarian yang pertama bermodel seperti ini.
kotak pencarian tipe 1
Kotak pencarian model pertama
Nah itu adalah gambar search box pertama, apabila Teman-teman tertarik dengan search box di atas dan igin memasangnya di blog silahakan pasang saja Teman-teman.

1. Sebelum membuat search box atau kotak pencarian langkah yang pertama dan yang paling utama Teman-teman lakukan adalah menuju halaman blogger terlebih dahulu atau login ke blogger dahulu.

2. Setelah login ke blogger jangan langsung pergi ke "Template" tetapi pilih "Tata Letak"

3. Setelah itu "Tambahkan Gadget" dan pilih "HTML/Java Script"

4. Kemudian copy kode ini dan pastekan.

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


5. Klik simpan dan lihatlah hasilnya apakah tampilan search box sudah ada di halaman blogger Teman-teman sekalian. Jika sudah ada maka Teman-teman sekalian sudah berhasil membuat search box ini, dan apabila Teman-teman ingin mengubah posisi search box ini Teman-teman sekalian bisa menggesernya melalu tata letak.

         

          Cara membuat search box versi dua. Sebelum mebuat search box ke dua ini alangkah lebih baik jika Teman-teman sekalian melihat demo gambarnya dulu. Siapa tahu tertarik dan jatuh cinta. ckckck
kotak pencarian model 2
Ini model search box 2
Gambar di atas merupakan gambar search box ke dua. Apabila Teman-teman merasa jatuh cinta atau tertarik dengan yang satu ini maka Teman-teman sekalian bisa memasangnya pada blog Teman-teman guna untuk menghiasi blognya.

1. Sama seperti di atas yang pertama dan paling utama sahabat blogger lakukan adalah login dulu ke blog masing-masing.

2. Setelah login ke blogger jangan langsung pergi ke "Template" tetapi pilih "Tata Letak"

3. Setelah itu "Tambahkan Gadget" dan pilih "HTML/Java Script"

4. Kemudian copy kode di bawah ini dan paste di "HTML/Java Script"

<!-- KODE KOTAK PENCARIAN ATAU SEARCH BOX DI BLOG  -->
<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 30px;
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: 30px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 30px;
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>

5. Setelah itu klik simpan dan lihat hasilnya. Jika berhasil tepuk tangan untuk kita semuanya. Kalian luar biasa hahahaha/

Itulah cara membuat search box atau kotak pencarian di blog yang berfungsi untuk mencari artikel yang akan kita tuju. Search box ini memiliki fungsi yang sangat fundamental bagi blog Teman-teman sekalian, di samping itu search box juga berfungsi sebagai pendukung jika inign mendaftar ke Google Adsense supaya cepat di terima dan di full approve.
Subscribe to this Blog via Email :