Cara Mudah Membuat Search Box - Kotak Pencarian di Blog
Cara Mudah Membuat Widget Search / Kotak Pencarian di Blog | C6969 BLOGGER - Tentu tidak lengkap rasanya bila blog kita tidak disisipi widget yang satu ini.Para pencari informasi pun pasti akan lebih mudah untuk mendapatkan informasi dari blog anda bila blog kita disisipi widget tersebut.
Memang terkadang ada beberapa template yang sudah dilengkapi dengan widget ini , tapi bagaimana dengan template bawaan atau template yang sama sekali memang tidak dilengkapi dengan widget ini.
Jadi disini kami akan memberikan jalan keluar dari masalah tersebut , anda juga dapat memilih beberapa pilihan widgetnya yang tentunya pasti menarik-menarik.
1. Search Box - Kotak Pencarian Bawaan Blogger
Caranya :
1. Login ke akun Blogger
2. Klik Menu Tata Letak
4. Klik Pada Tambahkan Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Simpan dan liat hasilnya Search Box / Kotak Pencarian akan segara tampil di blog.
2. Search Box - Kotak Pencarian Dengan HTML - 1
Caranya :
1. Login ke akun Blogger
2. Klik Menu Tata Letak
4. Klik Pada Tambahkan Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :
<form action="URL-BLOG-ANDAsearch"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Angka 40 menunjukkan panjang kotak search box yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.
7. Simpan dan Lihat hasilnya.
3. Search Box - Kotak Pencarian Dengan HTML - 2
Caranya :
1. HTML/Javascript
2. Dan Pastekan Kode dibawah ini :
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizrABzouWg-gcl-RIV729aG5BI-DZ7pqpEuKDIO7egx6gFpZmyHUxSM8eQk_DyQGoq-Rvd8jBP3DX7fwKfu9gTW8vR6Ldmkh0kbkLDsC7AeQ39JfWkvmBzhmgl4PjQcWelElLP0dbODwIm/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>
3. Simpan dan lihat hasilnya kurang lebih seperti dibawah ini.
4. Search Box - Kotak Pencarian Dengan HTML - 3
Caranya :
1. HTML/Javascript
2. Dan Pastekan Kode dibawah ini :
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</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: 200px;
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/AVvXsEj3HWrIFWvEenmKo_F208AdcHFI2XdPYs5H9Y6fIytipxDON2Iq_5-ZArgGC7JIZYU4C7Z-VBH3akxSSpbAfR1uNGCijNNooHtT979X3fDHNWbK7yVgAnrqa7JY9YqWa0GUBKFatSExXZI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
Biru ganti untuk mengatur tinggi dan lebar kotak search box.
Simpan dan lihat hasilnya kurang lebih akan seperti dibawah ini.
5. Search Box - Kotak Pencarian Dengan HTML - 4
Caranya :
1. HTML/Javascript
2. Dan Pastekan Kode dibawah ini :
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcnMyhYYU2FyzxtNLkjv9ZKtI9qZQXJzmf0Jg6QZjgyqvPI-dZDIL5pDOXMP-tMGibDc1ZMj8c0cBTEmK2ZQtHF5gyqSOPzfzQIMkIroXI7b6Zoq4UpaWxvqAuIk8us7mdzHGW2KjMGOi/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
Biru ganti sesuai dengan keinginan anda.
Merah ganti sesuai keinginan anda dengan Kode dibawah ini :
http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWzSNEaZ0jjgj3RIL1HzdDKv9AM4iILR9LCZi6fF2kQ1JiQxCc6WVXaW6Sppm7f8vxe186GXxsD6nBP4ARqlsbwGkOPwdQp7WG-SYqzlQp6EEpka2Dff48YMw4dk_jTaH0GDJIi8g7V3T/s1600/lostsector-search-box-gray.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_Offe4E9MPiWVxdHz7STF5UnNBHwa1Fk6m13ZYR3A1pmiL7qehJkPrfznVVwsQ0mYkRiyDXui5VVyXZYx-lOpbz5mzmB8JdGuHlTp1BnejeibM0W3IoNCK03UwVmPXiT0Nb05pyfjsJG/s1600/lostsector-search-box-black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPiPG4iByajn_5oVdSHM8PYqGSkdBwgSIjMTsQbTg8ukLNeoAM40Ji05wjR7Dbb0pK5P5Y2atqU3f2RCLcMXCxIM3bx56d19-i2K8Qr0ot4Hm9U6uk0LqlqM3h8tywG2vnLgxVGZlEmGu/s1600/lostsector-search-box-red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWe7e0sHAwoFPKQBchUm-QKYb3IgpnaHeXn3HY7eG_PmlSUsx2gp_FauXoOFWDNiol_5By4ytEwwoh9n_CqBU4wIHwU2XCeiXz9LDSdpvJsDz8Ip7zgPkHbM6fzhW3sBJtHq3DB82UYGvh/s1600/lostsector-search-box-yellow.png
3. Simpan dan lihat hasilnya akan seperti gambar dibawah ini.
Note : Saya tidak bertanggung jawab atas kerusakan/crash karena terjadi kesalahan pribadi dalam penambahan widget yang anda lakukan. Sebelum mencoba kode HTML/CSS diatas , ada baiknya anda mem-backup template anda terlebih dahulu untuk menghindari hal yang tidak di inginkan.
Nah itulah tadi mengenai Cara Mudah Membuat Search Box - Kotak Pencarian di Blog , semoga dapat bermanfaat bagi sobat-sobat semua , Jika artikel-artikel yang kami terbitkan membantu silahkan tinggalkan komentar ataupun +1 anda (seberapa penting +1 anda buat kami) pada artikel ini dan sobat juga dapat berlangganan artikel dengan C6969 BLOGGER baik itu melalu RSS Feed ataupun melalu akun email anda untuk mendapatkan pemberitaan postingan lebih cepat dari yang lainnya melalui email anda.
Silahkan tinggalkan komentar anda dibawah ini.
ReplyDeleteKomentar yang bersifat spam akan langsung di hapus oleh admin blog.
Terima Kasih.