Langsung saja ginama Cara memasang widget search box di blogger yauti :
Biasa Pertama anda harus Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.
Mudah kan.....!!!!
Widget Search box 1
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyyIDmBiFuf9eSmggaCEo-fViVNcqOj3K6tV9B5gt00I_cuZH5_nZWyG6ZVPqtBze3cv6QIQsWgf-REhlzixuEo96dyVjh8eitNBsYCNIaze5YIiHW6qufdp3vnMNOIaPcic8dWwe-FhIv/) 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/AVvXsEgGXzNA-2vF9a1dM_2v1M8p4bbuvPpHd_381Pzfu7IBoDrOYkcuuvFnHmKQ4Csa2w818f29l55EgGy4HlPzqRPGriG05VuXbs0MZ6C11KnT6sMPhMq7PzYYlpWzts7gwjoIPY6o6VMI7rzX/) 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/AVvXsEjSsAF4TfuqD8CCIjEEJDESKN6PGLKWEB4UdfWCr-9pu24Ay6NV9axRirBsq4CRDamVSLMih1YLHIJ4rBgDvAQ0-WNKtSHvMzwU_cA1fQUnkfpLowP4AwfFwASTlRNC8u6D65kr8EbbJfv_/) 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/AVvXsEiGFf_u-NTIncKdvpCuhciv0d4I0dVm1u_uXCuvoy6q5iP3PlR-oONh3ylI_8OIvsZhE6a99VCYyxpeHershoHo_pAAMpsr8u8NjX_6F7kSQbuu0KaogwNQqKo9lJSNU3woASqiaZ4iHBIV/) 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/AVvXsEiojR-n_HNIdTCPxEr46h2pKk2zXIomrJjgmOgOWej-GJJ_4LjZGmj9SRmM1G0kStpafdDT_n5hqY-J0g0kFSkXeX5NnPRWWrrOYZhAKQtQgRSlNV77pLP9dP8EvbFANjD4siG1tXtpcIBM/) 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/AVvXsEi8JHCCXXLlb0Wl5QDXmQ3xgdmr3-tHCmeWHddgxOODN8WXmrcgLLjHLFUZ4XuaIMIH__XECIN9PbUP7Gkc1qZsL3jdsiwBwsoUn5qs5JrwMOfm0iXo9i5FaxgC10Mc78R_9h0ZABhpB3MH/) 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>
Biasa Pertama anda harus Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.
Mudah kan.....!!!!
Widget Search box 1
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyyIDmBiFuf9eSmggaCEo-fViVNcqOj3K6tV9B5gt00I_cuZH5_nZWyG6ZVPqtBze3cv6QIQsWgf-REhlzixuEo96dyVjh8eitNBsYCNIaze5YIiHW6qufdp3vnMNOIaPcic8dWwe-FhIv/) 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/AVvXsEgGXzNA-2vF9a1dM_2v1M8p4bbuvPpHd_381Pzfu7IBoDrOYkcuuvFnHmKQ4Csa2w818f29l55EgGy4HlPzqRPGriG05VuXbs0MZ6C11KnT6sMPhMq7PzYYlpWzts7gwjoIPY6o6VMI7rzX/) 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/AVvXsEjSsAF4TfuqD8CCIjEEJDESKN6PGLKWEB4UdfWCr-9pu24Ay6NV9axRirBsq4CRDamVSLMih1YLHIJ4rBgDvAQ0-WNKtSHvMzwU_cA1fQUnkfpLowP4AwfFwASTlRNC8u6D65kr8EbbJfv_/) 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/AVvXsEiGFf_u-NTIncKdvpCuhciv0d4I0dVm1u_uXCuvoy6q5iP3PlR-oONh3ylI_8OIvsZhE6a99VCYyxpeHershoHo_pAAMpsr8u8NjX_6F7kSQbuu0KaogwNQqKo9lJSNU3woASqiaZ4iHBIV/) 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/AVvXsEiojR-n_HNIdTCPxEr46h2pKk2zXIomrJjgmOgOWej-GJJ_4LjZGmj9SRmM1G0kStpafdDT_n5hqY-J0g0kFSkXeX5NnPRWWrrOYZhAKQtQgRSlNV77pLP9dP8EvbFANjD4siG1tXtpcIBM/) 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/AVvXsEi8JHCCXXLlb0Wl5QDXmQ3xgdmr3-tHCmeWHddgxOODN8WXmrcgLLjHLFUZ4XuaIMIH__XECIN9PbUP7Gkc1qZsL3jdsiwBwsoUn5qs5JrwMOfm0iXo9i5FaxgC10Mc78R_9h0ZABhpB3MH/) 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>
Terima kasih, itulah cara memasang Widget Search Box Keren Buat Blogger,,, semoga bermanfaat,,,,!!!
Di tulis olah : Sunu Eiko Nurcahya
jejak-harput.blogspot.com
Harap tinggalkan kritik dan saran anda tentang artikel di atas....!! Terima kasih.
