Search

Blog Me Stylish Search Box Kaise Add Kare ? How To Add Beautiful Blogger Custom Search box

Search Box kisi website / blog ke content ko khjane ke liye
bahut hi important tool hota hai. Isase visitors aapke blog content ko aasani se search kar sakte hai.

iske help se aapki site use karna aasan ho jata hai. isliye sabhi website/ blog me search box jarur hona chahiye.
search box aapke blog design ko bhi better banane me help karta hai.

aapko apne blog par aise search box ka use karna chahiye Jo dikhane me achha ho aur usase aapka blog design improve ho sake.
mai yeha 2 best custom search box ke bare me jankari diya hu . aap chahe to usko use kar sakte hai.








<style>
#nbc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchbluebox1
{
padding:10px;
}
#nbc-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblueinput1
{
-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='nbc-searchblue1'>
<form action='/search/max-results=8' method='get' id="nbc-searchbluebox1">
<input name='q' id='wc-searchblueinput1' 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='nbc-searchbluesubmit1' type='submit' value='Search'/>
</form>
</div>







<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFrIadliNf2pfFyX7Pq-1DhR6WA86ZwXHoFSlrHuRJ0u6pJQSiKv4UNlb82JdKyrDbbypwlMZqbKmRtvcSYUhYP7C7sVXKKIv2on__PA92PUEv0arJdmDkzx57S3yz5NaIy1fvme69bUo/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-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="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Share this

Related Posts

Previous
Next Post »

Thnx