Widget Keren Search Box untuk Blog

Blog Tidak ada komentar

Hai ketemu lagi J-frend'z!!
Widget Search Box Keren untuk Blog
Ada 6 Widget search box ini bisa J-frend'z pasang untuk Blogger dan Wordpress. Cyber Jellyfish Team akan sharing untuk blogger saja yah! maklum lagi males :p hehehe. Berikut ini cara memasang widget search box di blogger/blogspot.

Just Screen Shot :P

Cara memasang widget search box di blogger

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.

Widget Search box 1

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

$0AWidget Search box 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp7aoXp9M5ZtXWkVkWrEhswrfBLfhEcI4UAU4gndfqzEyBvYAEzL2fISWZTd3HcJPNWrzpKQxIyrq3V36b-gdGBiD0UBaS7P9SHZvG7Au33Om-RYUVD7ZLI4_8qIiLDyrXMPHy6H-NyJoB/) 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/AVvXsEh6FTdB4XHwmhWBoGr4-HLjYCXYvoargEW1UuprnuU8sLcExoCe9TBTkfQKhzJsfj4TtlGRbhyphenhyphenkmt1z6BFOmsNrK7o1B06dGSEEWn6CBfltto1E6-OP_0lYjYtkHgnXWEKfzfnwWUggR0Tu/) 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

Widget Search box 5

Widget Search box 6

width:307px >> Silahkan ganti dengan lebar widget blog J-frend'z.

oke bye ^^ semoga bermanfaat :)
Cyber Jellyfish team mator sakalangkong :D

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )