প্রথম পাতা » , » নিয়ে নিন কিছু স্টাইলিস সার্চ বক্স!

নিয়ে নিন কিছু স্টাইলিস সার্চ বক্স!

..........................পোস্টে লেখক .....sohel
আজ আমি আপনাদের দেখাবো কিভাবে ব্লগার ব্লগে স্টাইলিস সার্চ বক্স যুক্ত করা যায়। কথা না বাড়িয়ে চলুন দেখে নেওয়া যাক কিভাবে এটি করা যায়।
  • প্রথমেই ব্লগারে লগিন করুন।
  • লেআউটে গিয়ে  Add a Gadget এ ক্লিক করুন।
  • তারপর HTML/JavaScript সিলেক্ট করুন।
তাহলে একটি পপআপ উইন্ডো ওপেন হবে, এবার নিচের যেই সার্চ বক্সটি আপনার কাছে ভালো লাগে তার কোডটুকু ঐ পপআপ উইন্ডোতে পেস্ট করুন। তাহলেই আপনার ব্লগে যুক্ত হয়ে যাবে স্টাইলিস একটি সার্চ বক্স

<style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;

font:14px verdana;
}

</style>
<div id='wc-searchblack1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchblackbox1">
            <input name='search' id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>







1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
#w2b-searchbox{background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52kXMKrFe5gX89FM-7KjlDGSijSKQ9BtS-Zz0ImCYFQ5gYRowM9RfngOHNxSSPyJzVss7mwczImjJkIPi20LWTNDW2vUYCAyfbBj5G27aGlS52omQI9tQ9YWxEJ9kl28iBaFxwloUTgaR/) 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&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://img1.blogblog.com/img/blank.gif&quot']);" rel="nofollow">http://img1.blogblog.com/img/blank.gif&quot</a>; id="sbutton" />
</form>
</div>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("<a href="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBA7tbKczLdyzkhiZDQPYuI7tpzWF1xQ9xg1CExkjg-Z2uMNxw3LYCNP03WL9Oi3EWB1fAXxGf_ZLGxgYSIeSKipf_Zl4zhk25BhhUryQBKQoiOT8JUY06df61CMF8_x68DSjAc4r-3kI/s20/Search-icon.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBA7tbKczLdyzkhiZDQPYuI7tpzWF1xQ9xg1CExkjg-Z2uMNxw3LYCNP03WL9Oi3EWB1fAXxGf_ZLGxgYSIeSKipf_Zl4zhk25BhhUryQBKQoiOT8JUY06df61CMF8_x68DSjAc4r-3kI/s20/Search-icon.png&quot']);" rel="nofollow">http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBA7tbKczLdyzkhiZDQPYuI7tpzWF1xQ9xg1CExkjg-Z2uMNxw3LYCNP03WL9Oi3EWB1fAXxGf_ZLGxgYSIeSKipf_Zl4zhk25BhhUryQBKQoiOT8JUY06df61CMF8_x68DSjAc4r-3kI/s20/Search-icon.png&quot</a>;) no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 52%;
}
#MBBOldSearch #MBBSsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id="MBBOldSearch">
    <form action="/search">
        <input name="q" id="MBBSinput" type="text" />
        <input value="Search" id="MBBSsubmit" type="submit" />
    </form>
</div>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style type='text/css'>
/*<![CDATA[*/
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{    background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("<a href="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSsMA0h7wNff63WbhXU61N8vDDRu-iGZGg9aGp7e9ZROr0R-xBJC6v4Yy1YPznufG7FUpjWCwRBBR4be3-ft23aOnoaK0ulUs-x7uNF41fhKMHe7K9FNFpem9QlvTUdfnPjjKCVeXTQG1b/s1600/searchicon.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSsMA0h7wNff63WbhXU61N8vDDRu-iGZGg9aGp7e9ZROr0R-xBJC6v4Yy1YPznufG7FUpjWCwRBBR4be3-ft23aOnoaK0ulUs-x7uNF41fhKMHe7K9FNFpem9QlvTUdfnPjjKCVeXTQG1b/s1600/searchicon.png&quot']);" rel="nofollow">http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSsMA0h7wNff63WbhXU61N8vDDRu-iGZGg9aGp7e9ZROr0R-xBJC6v4Yy1YPznufG7FUpjWCwRBBR4be3-ft23aOnoaK0ulUs-x7uNF41fhKMHe7K9FNFpem9QlvTUdfnPjjKCVeXTQG1b/s1600/searchicon.png&quot</a>;) no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 12px;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
/*]]>*/
</style>
<div class='noop-searchbox' id='noop-searchbox'>
<form action='/search' id='noop-searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<button id='sbutton' type='submit'><span id='simg'></span></button>
</form></div>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
#wc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
 
#wc-searchgreenbox1
{
padding:10px;
}
 
#wc-searchgreensubmit1
{
border:1px solid green;
background: green;
 
padding:5px;
color:#ffffff;
font:14px verdana;
}
 
#wc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
 
font:14px verdana;
}
 
</style>
<div id='wc-searchgreen1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="wc-searchgreenbox1">
            <input name='search' id='wc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>







Labels: ,