Cara Membuat Widget Kotak Search Keren di Blog

Cara membuat Widget Kotak Search Keren di Blog. Adapun cara berikut ini saya hadirkan screenshot dari widget-widget kotak pencarian keren beserta kodenya masing-masing dan bisa di pasang blog anda. Jika penasaran mari kita buktikan.

Caranya sebagai berikut :

1. Login ke Blogger 
2. Opsi lainnya
3. Tata Letak 
4. Tambah Gadget 
5. HTML/JavaScript 
6. Copy kode widget diantara enam conntoh di bawah dan paste di HTML/JavaScript
7. Klik dan seret gadget tersebut jika ingin pindah tempat 
8. Simpan dan lihat hasilnya.

Contoh Kotak Search 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0KtRN5KEFySvSdBAdb4lAbU8OMfz1nd4tBzuu0C4x7uyY2jEnu5kmtup6JPNjfV-AJooqgbyBjjA7dAs2DRgPkW23i65X6ppaWOofOVDr4zdV4PlWqzmEtRpL5faOIPEALbLRS4k5a09_/) 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>

Contoh  Kotak Search 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8w3eQzgmq9PvruegwvsSCtGbSbYabQoqBua2usC2hnSE8bivJI-f58wJ4QF4rJ7KMOs-_0-CvpvxNZxuDiapzq5lTvtag9X9SVFKnLp1dCP-S00MfjWrVJGcS7aPy2zOSLON3KYVbNf_/) 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>

Contoh  Kotak Search 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjioCrvyrncJ9Gh5z_qbZeUbOzr6UyHog8TEjIdz7MqEron0jCVg0e8QYC6a-d0d-j5BBxT0UAQY_LcrkMqW1k24Y9JSZiR_3OGUte6h1PpZ_Mmeso-H3HKi4h_BOZwHGEioFgVfx5SSQyk/) 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>

Contoh  Kotak Search 4

<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MT6pcxRWjwNjO_kXi1zcJFWogkUiKNqgowfmTYwEUKVncp5X8kpxu8CHwGxJ9Af2sx3E1N402QP9tjsmK4m4gf41H7P3M48LxoIUkjjt1mqLRPsNfOnOQfxKonqHzn8tBXLJEgcJDFO1/) 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>

Contoh  Kotak Search 5

<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmy73xZ1SctiET37kA3vVwf1Eta9OfcKu6pnYsyNsh8yarDiYw0tX5lXyZ08pGRqrzbCeyP8IooOh7ZD2Y_BCRdfuxPzHMJhJZwQSCh0n7MjACXNE67ykTQcNMXLB4N8wZ0FxdOnm5qJLL/) 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>

Contoh Kotak Search 6

<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTDoEIuNaFms893XO4NBKMJ08M5_E3hpRH_3wjxAk3EHCLklp7v2WFO4tW57pF5bRkLt3IuPkeTpPoyxkm0K5mp3d-1zXvxim8bjMwgpf-X1Bfi9a81PglakR3R_QF7P06TCaqJJon2M5d/) 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>

Kemudian silakan anda pilih, dari keenam widget kotak seacrh di atas  yang anda suka dan selamat mencoba memasangnya di blog anda sendiri ok.

Demikianlah Cara membuat Widget Kotak Search Keren di Blog, mudah-mudahan bermanfaat.