বেশ কয়েকদিন পর ব্লগার টিউটোরিয়ালটা আবার লিখলাম। আজকে আপনাদের জন্য
নিয়ে আসলাম পাঁচটি সুন্দর সার্চ বক্স, যা আপনার ব্লগের জন্য কাজে লাগবে।
আশা করি আপনাদের ভাল লাগবে। আসুন তাহলে শুরু করা যাক।
প্রথমে Blogger Dashboard >> Layout >> Add a Gadget থেকে HTML/Javascript Select করুন।
তারপর নিচের যেকোনো একটি Search Box পছন্দ করে তারপর কোডটি Paste করে দিন।
1. Round Corners Search Box
2. Black and White Colour Search Box
3. White Search Box
4.Grew Colour Search Box
5.Red Colour Search Box
প্রথমে Blogger Dashboard >> Layout >> Add a Gadget থেকে HTML/Javascript Select করুন।
তারপর নিচের যেকোনো একটি Search Box পছন্দ করে তারপর কোডটি Paste করে দিন।
1
| <style> #search-form
{ background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px; /* Gradients */ background: -webkit-gradient( linear,left
top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1,
rgb(225,225,225))); background: -moz-linear-gradient( center top,
rgb(243,243,243) 0%, rgb(225,225,225) 100%); /* Rounded Corners */
border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius:
17px; /* Shadows */ box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px
rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px
rgba(0,0,0,.3); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px
rgba(0,0,0,.3); } /*** TEXT BOX ***/ input[type="text"]{ background:
#fafafa; /* Fallback color for non-css3 browsers */ /* Gradients */
background: -webkit-gradient( linear, left bottom, left top,
color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%,
rgb(230,230,230) 100%); border: 0; border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8); font-size: 16px; margin:
4px; padding: 5px; width: 250px; /* Rounded Corners */ border-radius:
17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; /* Shadows
*/ box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px
rgba(0,0,0,.2); -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px
rgba(0,0,0,.2); } /*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{ outline: none; background: #fff; /* Fallback
color for non-css3 browsers */ /* Gradients */ background:
-webkit-gradient( linear, left bottom, left top, color-stop(0,
rgb(255,255,255)), color-stop(1, rgb(235,235,235))); background:
-moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235)
100%); } /*** SEARCH BUTTON ***/ input[type="submit"]{ background:
#44921f;/* Fallback color for non-css3 browsers */ /* Gradients */
background: -webkit-gradient( linear, left top, left bottom,
color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)),
color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%,
rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); border: 0;
color: #eee; cursor: pointer; float: right; font: 16px Arial,
Helvetica, sans-serif; font-weight: bold; height: 30px; margin: 4px 4px
0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none; /*
Rounded Corners */ border-radius: 30px; -webkit-border-radius: 30px;
-moz-border-radius: 30px; /* Shadows */ box-shadow: -1px -1px 1px
rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); -moz-box-shadow: -1px
-1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0
rgba(0,0,0,.4); } /*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover { background: #4ea923; /* Fallback color for
non-css3 browsers */ /* Gradients */ background: -webkit-gradient(
linear, left top, left bottom, color-stop(0, rgb(89,222,27)),
color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)),
color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center
top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%,
rgb(54,120,22) 100%); } input[type="submit"]:active { background:
#4ea923; /* Fallback color for non-css3 browsers */ /* Gradients */
background: -webkit-gradient( linear, left bottom, left top,
color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)),
color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%,
rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }
</style> <form action="URL Of the Page Where the Result Appear"
id="searchbox"> <input name="cx" type="hidden" value="X:Y" />
<input name="cof" type="hidden" value="FORID:11" /> <input
id="q" name="q" size="70" type="text" /> <input name="sa"
type="submit" value="Search" /> </form> |
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFT2EXL4W3GAe719v8eyZ8jMvP7_c-uXkWsN8Y6j8bvJNmA8UDQ3CshbigiHNgKlqUul9xyjdBNtF_dNhRPZJtY0yFZtknya7bA7U8a4ababGnbgSwodpkyZEgMbc2vwQWYWaLA4r1_yM0/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="<a href="http://img1.blogblog.com/img/blank.gif"" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://img1.blogblog.com/img/blank.gif"']);" rel="nofollow">http://img1.blogblog.com/img/blank.gif"</a>; id="sbutton" /></form></div> |
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifEaZbcr7u2tbo4L4vrvM4kxXw9UBpdKhjeVNcKR5LcYfNMP-yldOAcEBY5WUS3RqOnsg973EAGRTFglE3GKnRFiinyEgw87sGFvn25ZIMdLpaNNztYA-J88K1WtpLgg6RfQ9KDuV2oGTn/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 12px;margin:0;}form#w2b-searchform
#s{padding: 6px 6px 6px 26px;margin:0;width:
215px;font-size:14px;vertical-align:
top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="<a href="http://img1.blogblog.com/img/blank.gif"" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://img1.blogblog.com/img/blank.gif"']);" rel="nofollow">http://img1.blogblog.com/img/blank.gif"</a>; id="sbutton" /></form></div> |
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04G3etFPs8MHBA87JsvdTE8TywqlYaE2Sw2YFLjNF8plzalB44-ryXHRjIVy2gWFLhlAQDkuvm64RQsN_zyRhqBNmrI7lI9VgB-F_5HAjXi-uMXvEHhY7EwbIjfUN2DJOsxi0JWaarsCV/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 12px;margin:0;}form#w2b-searchform
#s{padding: 6px 6px 6px 26px;margin:0;width:
215px;font-size:14px;vertical-align:
top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="<a href="http://img1.blogblog.com/img/blank.gif"" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://img1.blogblog.com/img/blank.gif"']);" rel="nofollow">http://img1.blogblog.com/img/blank.gif"</a>; id="sbutton" /></form></div> |
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeNuvw4tRsYNO3OCW4D-YuGR8VW4FhPDNDTA9aFQKp6uhYsLcKvU_9Ue6PQ8iwTqvrcXzsQBQihlET2xiIuKAbaHY-fGNis_YuWfQVCVQvRNLr-zwHXCC7gWZfb-8EzHMfgwu0oemqf_rF/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="<a href="http://img1.blogblog.com/img/blank.gif"" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://img1.blogblog.com/img/blank.gif"']);" rel="nofollow">http://img1.blogblog.com/img/blank.gif"</a>; id="sbutton" /></form></div> |
![http://img1.blogblog.com/img/blank.gif"](http://img1.blogblog.com/img/blank.gif"){kind=link}
0 মন্তব্য(গুলি):
Post a Comment
Welcome!