Catatan Kecil Bona - Berikut ini saya hadirkan screenshot dari widget-widget kotak pencarian kerentersebut beserta kodenya masing-masing. Cara pemasangannya adalah login ke Blogger > Opsi lainnya > Tata Letak > Tambah Gadget > HTML/JavaScript > Copy kode widget dan paste di Konten > Simpan > Klik dan seret gadget ke tempat yang Sobat inginkan > Simpan setelan.
 |
| Kotak Search 1 |
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82zR-jy44BPfA6LrIToAI3bsOM6nbXodtEpJcak0Z3hcYUyqyp2AA7eBg_rzdiTIZ8Gbl-VkBeerjR7LfEkQd1h5ptcVGLIrg9NcoFhawAGCOWw6xic07ZkxSQRUmFfcXWYuCHXi9vQTg/) 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: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>
 |
| Kotak Search 2 |
<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_AbEeJ2-IoslsZNUMKjV-XJd3eAE2RBrYuZ9QYLTup4L7qc1pBT2hsr99VCfkQvVYIXtBsCialIgoDqP5e-QstcJbz0OgXu_Gsib0MBTL5mgzdmscYN0jrLL0Q3RmbSjcG5bURMlJyxx/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get"> <input type="text" id="b" 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="bbutton" /></form></div>
 |
| Kotak Search 3 |
<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIGnR9pFU0Wma9836Cp0Ko8dDH6pDP94Uski0dr5DL4psQK6J8uQBj6BK53D8Xb8pErL5Z1n5vqVUFljmQBPDyBpauO732VoEcbMOxr8LjC9EyLB6gCxBY080w_HXKUMC_uYr5SX0G0YaR/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get"> <input type="text" id="c" 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="cbutton" /></form></div>
 |
| Kotak Search 4 |
<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP83BpMm8vMXaG2Dh6debQ3-ytYZM3_DDII5ntHUcXK90PaHJ33p3G0qoPJpJZhPTM6nsYJyUeKucJoTbRoJF2RcIIeUwymZ9D4BC0Oujt6oJyXpFxma6IBKwUvaega1UPVnIyFZVtBCBX/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get"> <input type="text" id="d" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>
 |
| Kotak Search 5 |
<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7nreB0NEwey7u-Q6zCFV8huRJpU_iShzfa2kTVqwQu1GTOkq0nsAzfEa9HGC37K35XaIjpTJOauS40gZbK2uZNVDroX2J3iA8cuPxl4aR9u0PbToAXnMUHujpR2Nz6Ebshv4kY4D_qY_/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get"> <input type="text" id="e" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>
 |
| Kotak Search 6 |
<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ez_XXzTb3fK21Rida3PNcrhtpbSj_Q88YfJnasoaYXn1m8W99UtAj0qvyLjeUlau2mN6_90T5-5ncuVF6KSEeabY2lCJs_MXn_kXvoDYllLweFy3vt63MSdo2GZQf0o6R6QUEOqllg80/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get"> <input type="text" id="f" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>
Silakan pilih-pilih, dari keenam widget kotak seacrh di atas yang mana yang Sobat suka. Selamat mencoba memasangnya di blog Sobat..
