Home ওয়েব ডিজাইন ব্লগার টিপস নিয়ে নিন কিছু স্টাইলিস সার্চ বক্স!

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

,
আজ আমি আপনাদের দেখাবো কিভাবে ব্লগার ব্লগে স্টাইলিস সার্চ বক্স যুক্ত করা যায়। কথা না বাড়িয়ে চলুন দেখে নেওয়া যাক কিভাবে এটি করা যায়।
  • প্রথমেই ব্লগারে লগিন করুন।
  • লেআউটে গিয়ে  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/AVvXsEgAn8GjkEfA0e8O8P-LT_i3aQTZG37hDoMSjvxD8TOmwRKn1kf5vI_FTKy_C8K9t1dUaVj2b8xO58l0pcYuZ9xIxoickSd-GK_3Z2KEWLxc6g6GqyjDCQyayzOEUbZBKi0ulKt0YfFlEjxi/) 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/AVvXsEgAz2VRtRfey6Dbbbw9IX1Oebai1UjDVU6s2mgdtdXfdl4lBWrta66KmgCTgL1fLSg8_r0N6oXip5uhFTtTlSxJSzF9mTux7-RAjRxpK3mezCTw2ibA0MBNdOjRKlgkP75DdQUUazWfk52b/s20/Search-icon.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAz2VRtRfey6Dbbbw9IX1Oebai1UjDVU6s2mgdtdXfdl4lBWrta66KmgCTgL1fLSg8_r0N6oXip5uhFTtTlSxJSzF9mTux7-RAjRxpK3mezCTw2ibA0MBNdOjRKlgkP75DdQUUazWfk52b/s20/Search-icon.png&quot']);" rel="nofollow">http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAz2VRtRfey6Dbbbw9IX1Oebai1UjDVU6s2mgdtdXfdl4lBWrta66KmgCTgL1fLSg8_r0N6oXip5uhFTtTlSxJSzF9mTux7-RAjRxpK3mezCTw2ibA0MBNdOjRKlgkP75DdQUUazWfk52b/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/AVvXsEi7_kXNMs5NQ3As5ay4TQm6o1PY3CyoPV3PbvW5acBAGrHEVSXsxnUS3XoDbgFwDN7TDp2KWqoN4HK0HcsKEqdueccJIAwWORNCUHASXHM_W6lVPg7VglkJOcewl98G1Hx4kQmy-Xl1hAub/s1600/searchicon.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_kXNMs5NQ3As5ay4TQm6o1PY3CyoPV3PbvW5acBAGrHEVSXsxnUS3XoDbgFwDN7TDp2KWqoN4HK0HcsKEqdueccJIAwWORNCUHASXHM_W6lVPg7VglkJOcewl98G1Hx4kQmy-Xl1hAub/s1600/searchicon.png&quot']);" rel="nofollow">http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_kXNMs5NQ3As5ay4TQm6o1PY3CyoPV3PbvW5acBAGrHEVSXsxnUS3XoDbgFwDN7TDp2KWqoN4HK0HcsKEqdueccJIAwWORNCUHASXHM_W6lVPg7VglkJOcewl98G1Hx4kQmy-Xl1hAub/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>







নিয়ে নিন কিছু স্টাইলিস সার্চ বক্স! নিয়ে নিন কিছু স্টাইলিস সার্চ বক্স! Reviewed by Anonymous on 3:39 AM Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.