Pasang 6 Pilihan Widget Search Box di blog

Pasang 6 Pilihan Widget Search Box di blog - Widget Search box adalah widget pencari yang dipasang di blog berfungsi seperti mesin pencari, Widget ini sangat membantu para pengunjung untuk mencari artikel yang diinginkan, pengunjung hanya tinggal menulis dan mengeklik gambar search disampingnya.





Jika ada yang ingin memasang widget ini silahkan ikuti langkah - langkah berikut ini :

1. Login ke Blogger
2. Masuk ke tata letak -> tambah widget / gadget -> Html/JavaScript
3. Copy paste code dibawah ini ( pilih salah satu ) :

Kode Widget search ini diurutkan sesuai gambar diatas

• Widget Search box 1

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

• Widget Search box 2

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

• Widget Search box 3

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

• Widget Search box 4

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

• Widget Search box 5

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

• Widget Search box 6

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

4. Simpan

Selamat mencoba, semoga berhasil - Pasang 6 Pilihan Widget Search Box di blog

 

Categories: Tutorial Blogger