Blogger blog ke liye 6 stylish custom search boxes

Welcome aap sabhi ko Blogging Jankari ki ek aur nayi post mein aur useful jankari ke saath. Aaj ki iss post mein mein baat karunga Blogger ke liye 6 stylish custom search boxes aur kaise add kare ke baare mein. Har ek search boxes keunique codes unke niche diye gaye hein. Aap copy paste karke easily add kar sakte hein Blogger website mein.

कहा जाता है की website या blog design करना भी एक कला है .एक सुन्दर website या blog पाठक और customers दोनों को attract करने का साथ साथ blog का earning को भी increase करता है .आप को पता होगा अछि website बनने और दिखने केलिए बहुत सी चीजों का आपस में मिलना जरुरी है जैसे की उसका logo शुरू करके footer तक आप कोई भी पार्ट को neglect नहीं कर सकते .
उनमे से एक सबसे important पार्ट है एक blog या website का search बॉक्स, दिखने में तो ये बहुत छोटी सी चीज़ हे लेखिन ये website design के time में बहुत ही important role play करता है .

search box वेसे तो search केलिए जाना जाता है लेकिन ये search के अलावा blog या website का looks और design को बढाता है , एसे देखा जाये तो ये both admin और readers केलिए बहुत ही बढ़िया facility है .actually में ये होता है की जब एक reader blog को आता है वो उन चीजों को देखता है जो webpage के home page में होता है यदि आपके पास custom search box है तो वो और भी post को explore कर सकता है जो की एक प्रकार से Hidden में है .

First Read :

Custom Search Boxes For Blogger


जो bloggers Blogger.com blog में blog बनाते है उनका सबसे बड़ा problem होता है ,उनका blog पेज बहुत ही पुराना दिखना मतलब blog professional ना दिखना ,blogger टेम्पलेट पुराना दिखने केलिए उसका old search box, old recent page widget ,old popular page widget responsible है . वेसे तो blogger officially search box provide करता है लेकिन ये उतना ख़ास नहीं है .

तो आज के इस post में आपके लिए कुछ stylish 6 custom search box लाया हूँ .जिसको आप अपने blog में लगा का अपना search box का design को पहले से बेहतर कर सकते हैं और responsive भी बना सकते हैं .जिसको आप आसानी से अपने blogger template में add कर सकते हैं.

Also Read :


Benefits of Adding Custom Stylish Search Box



  • Blog & website Professional दिखना.

  • यूजर का time बचाता है .

  • यूजर को अच्छा experience देता है .

  • Custom search box बहुत ही फ्लेक्सिबल है .


Blogger blog ke liye 6 stylish custom search boxesBlogger blog ke liye 6 stylish custom search boxes, blogger ke liye custom search box, Blogger me kaise custom search box add kare, Blogger tutorials, Blogging Jankari


<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>
Blogger blog ke liye 6 stylish custom search boxes, blogger ke liye custom search box, Blogger me kaise custom search box add kare, Blogger tutorials, Blogging Jankari<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>

Blogger blog ke liye 6 stylish custom search boxes, blogger ke liye custom search box, Blogger me kaise custom search box add kare, Blogger tutorials, Blogging Jankari<style> #nbc-searchexpandbox1 { padding:10px; } #nbc-searchexpandsubmit1 { border:1px solid #111111; background: #111111; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchexpandinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; transition: width 2s; -webkit-transition: width 2s; /* Safari */ -o-transition: width 2s; /* Opera*/ -moz-transition: width 2s; /* firefox*/ width:65px; } #nbc-searchexpandinput1:hover { width:200px; } </style> <div id='nbc-searchexpand1'>          <form action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">             <input name='q' id='nbc-searchexpandinput1' 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-searchexpandsubmit1' type='submit' value='Search'/>          </form>       </div>

Blogger blog ke liye 6 stylish custom search boxes, blogger ke liye custom search box, Blogger me kaise custom search box add kare, Blogger tutorials, Blogging Jankari<style type="text/css"> #nbc-searchbox{background:url(http://4.bp.blogspot.com/-xDMUT_7p820/Ue7AMp2_XZI/AAAAAAAAAho/N2xwuQ1GU1I/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 10px 12px;margin:0;} form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="nbc-searchbox"> <form id="nbc-searchform" action="/search/max-results=8" 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...";}'/> </form> </div>

Blogger blog ke liye 6 stylish custom search boxes, blogger ke liye custom search box, Blogger me kaise custom search box add kare, Blogger tutorials, Blogging Jankari<style> #nbc-searchsimplebox1 { padding:10px; } #nbc-searchsimplesubmit1 { border:1px solid orange; background: orange; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchsimpleinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; } </style> <div id='nbc-searchsimple1'>          <form action='/search/max-results=8'  method='get' id="nbc-searchsimplebox1">             <input name='q' id='nbc-searchsimpleinput1' 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-searchsimplesubmit1' type='submit' value='Search'/>          </form>       </div>

आज का post आपको कैसा लगा comment के माध्यम से बताएं. जो codes आपको में यहाँ Provide किया हूँ वो सब मैंने Google के माध्यम से search करके कलेक्ट किया हूँ.ये 6 custom search box दिखने केलिए सबसे बेहतर हैं और responsive भी ,धन्यवाद .

Post a Comment

1 Comments

  1. bahut hi badhiya jankari Share ki hai sir ji aapne .isko me abhi apne blog me add karke dekhta hu…anyway thank you for the post

    ReplyDelete