10 Beautiful Responsive Search Box Blogspot Blog

10 Beautiful Responsive Search Box Blogspot Blog

हैलो friends आज के इस पोस्ट में हम बताने

जा रहे है Stylish 10 Search Box How To Add Blogger Blog

Yani ki.Search Box..के बारे में

किसी भी Blog me आप जाते हो और कोई
पोस्ट आपको Search करना हो तो उस पोस्ट
का First Word डालकर Search करे तो वो
पोस्ट को आप पढ़ सकते है और ऐसे में एक ही
वेबसाईट में जब सारी Information आपको मिल जाएगी क्योकि जो post आपके सामने नही रहता है आप उस पोस्ट को Search box
के माध्यम से खोज कर उसे पढ़ सकते है

तो इस लिए ब्लॉग पर Search Box लगाना जरुरी है and आप तो जानते ही होंगें की
ब्लॉगर के लिए कुछ Important Widget होते है जिन्हे Website Blog पर लगाना जरुरी
है जिससे हमारे ब्लॉग का डिजाईन बेस्ट लगे
आप अक्सर Google मे कोई – कोई post Search करते है और कई बार ऐसे ब्लॉग पर
जाते है जो बिल्कुल WordPress Website.
की तरह दिखता है लेकिन इसकी एक वजह
ये है की उनके ब्लॉग में Important Widget
सही जगह पर और सही Widget add होती है
ये वेबसाईट ब्लॉग के लिए सबसे जरुरी है

हमने आपके लिए 10 Stylish Search Box
लेकर आए है और मुझे लगता है की आपको
ये सभी Search Box पसन्द आएँगें कौन Search box कैसा है इसके लिए Search Box Code के उपर स्क्रीनशॉट देख सकते
है हमने सभी कोड का स्क्रीनशॉट दिया है
ताकि आपको कोड को Choose करने मे
कोई परेशानी ना हो हम आशा करते है कि
ये सभी Search Box Widget आपको
पसंद आए ।

Sirf आप नीचे दिए गए स्टेप को सही से
Follow करे ।

Note ; ये सभी html/javascript कोड है

और ये सभी एक ही Method से add होगें

Step.1 नीचे दिए गए कोड में से जो पसन्द
आए उसे Copy कर लें

Step.2 अब Blogger में लॉगिन करे उसके
बाद Dashboard में जाएं   Dashboard में
जाने के बाद Layout पर क्लिक करें

Step.3 Layout पर क्लिक करने के बाद
Sidebar में add A Gadget पर क्लिक करे
न्यु विंडो खुलेगी उसमे html/javascript पर
क्लिक करें ।

Step.4 अब फिर से न्यु विंडो खुलेगी जिसमें
2 box दिखेंगी एक छोटा और एक।बड़ा
छोटा वाले बॉक्स मे टाईटल डालना है
जैसे की Search Box या फिर इसे खाली भी
छोड़ सकते है । और बड़ा वाले बॉक्स मे Copy
किए हुए कोड को पेस्ट कर दे ।

Some Essential Articles For You  6 Tarika Adsense CpC Kaise Badhaye Complete Jankari

उसके बाद Save पर क्लिक करे कोड Save हो जाएगा ।

कोड 1

Code 1 Screen Shot

<style>#MBBOldSearch {display: block;clear: both;margin: 10px 0;}#MBBOldSearch #MBBSinput {background: url(https://4.bp.blogspot.com/-C7mh2vX4gp4/Ue6-L3iTnXI/AAAAAAAAAhI/-K6xVaVoM1g/s1600/noxdo_blogspot_com_Search-icon.png) 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/max-results=8″> <input name=”q” id=”MBBSinput” type=”text” /> <input value=”Search” id=”MBBSsubmit” type=”submit” /> </form></div>

कोड 2

Code 2 Screen Shot

<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>

कोड 3

Code 3 Screenshot

<style>#search-form {background:#e1e1e1; /* Fallback color for non-css3 browsers */width: 365px;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%);border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;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); }input[type=”text”]{background: #fafafa;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;border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);-webkit-box-shadow: -1px -1px 2pxrgba(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);}input[type=”text”]:focus{outline: none; background: #fff;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%);}input[type=”submit”]{background:#44921f;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;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;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);}input[type=”submit”]:hover {background: #4ea923;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;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=”/search/max-results=8″ 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>

कोड 4

Code 4  Screenshot

<style> #search-box-default {width:100%;position:relative;margin:0 auto;float:none;height:36px;} #bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;} .bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color:#fff;border: none;width:14%;display: block;top:0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;} .bo-sb-buttonwrap:hover {background-color:#e6e6e6;} .bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;}.bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: ”;position:absolute;border: 2px solid black;box-sizing: content-box;top: 9px;}.bo-sb-submit:before {content: ”;background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;} #bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;}#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233,.6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id=”search-box-default”> <form action=”/search” id=”bo-search-box” method=”get”> <input id=”bo-sb-input” name=”q” placeholder=”Search Here…” type=”text” required/> <span class=”bo-sb-buttonwrap”><button class=”bo-sb-submit” value=”” type=”submit”></button></span> </form> </div>

कोड 5

Code 5 Screnshot

<style type=”text/css”>#abt-searchbox{border-radius:5px;background:URL(https://2.bp.blogspot.com/-vGjST2sX6Ts/T88uy-eRYUI/AAAAAAAAAog/xhJ2A0nGnpw/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>

कोड 6

Code 6 Screnshot

<style type=”text/css”>#nbc-searchbox{background:url(https://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>

कोड 7

Code 7 Screensshot

<style><!– Design by Https://Hindivhelp.blogspot.com–>@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates);.field {display:flex;position:realtive;margin:5em auto;flex-direction:row;box-shadow:1px 1px 0 rgb(22, 160, 133),2px 2px 0 rgb(22, 160, 133),3px 3px 0 rgb(22, 160, 133),4px 4px 0 rgb(22, 160, 133),5px 5px 0 rgb(22, 160, 133),6px 6px 0 rgb(22, 160, 133),7px 7px 0 rgb(22, 160, 133);}.field>input[type=text],.field>button {display:block;font:1.2em ‘Montserrat Alternates’;}.field>input[type=text] {flex:1;padding:0.6em;border:0.2em solid rgb(26, 188, 156);}.field>button {padding:0.6em 0.8em;background-color:rgb(26, 188, 156);color:white;border:none;}</style><form method=”get” action=”/search”><div class=”field”><input type=”text” name=”q” id=”searchterm” placeholder=”what are you searching for?” /><button type=”button” id=”search”>Find!</button></div></form><script class=”cssdeck” src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script>

कोड  8

Code 8.Screenshot

<pre><style>#search-box {position: relative;width: 100%;margin: 0;}#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}#search-box input[type=”text”]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}</style><div id=’search-box’><form action=’/search’ id=’search-form’ method=’get’ target=’_top’><input id=’search-text’ name=’q’ placeholder=’Search this website’ type=’text’/><button id=’search-button’ type=’submit’><span>Search</span></button></form></div></pre>

कोड 9

Code 9 Screenshot

<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(https://3.bp.blogspot.com/-rBTMRhkUv5A/Ue6_qllr4lI/AAAAAAAAAhc/Hbq9V3tFvqo/s1600/noxdo_blogspot_com_Search-icon2.png) 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/max-results=8′ 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>

कोड 10

Code 10 Screenshot

<style>/*————————————————————–1.0 – BASE SITE STYLES————————————————————–*/*,*:after,*:before {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.cf:before,.cf:after {content:””;display:table;}.cf:after {clear:both;}/*————————————————————–2.0 – SEARCH FORM————————————————————–*/.searchform {background:#f4f4f4;background:rgba(244,244,244,.79);border: 1px solid#d3d3d3;left: 50%;padding:2px 5px;position:absolute;margin: -22px 0 0 -170px;top: 50%;width:339px;box-shadow:0 4px 9px rgba(0,0,0,.37);-moz-box-shadow:04px 9px rgba(0,0,0,.37);-webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px}.searchform input,.searchform button {float: left}.searchform input {background:#fefefe;border: none;font:12px/12px ‘HelveticaNeue’, Helvetica,Arial, sans-serif;margin-right: 5px;padding: 10px;width: 216px;box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px}.searchform input:focus {outline: none;box-shadow:0 0 4px#0d76be inset;-moz-box-shadow:00 4px#0d76be inset;-webkit-box-shadow:0 0 4px#0d76be inset;}.searchform input::-webkit-input-placeholder {font-style:italic;line-height: 15px}.searchform input:-moz-placeholder {font-style: italic;line-height: 15px}.searchform button{background: rgb(52,173,236);background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)), color-stop(100%,rgba(38,145,220,1)));background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);background: linear-gradient(to bottom,rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#34adec’, endColorstr=’#2691dc’,GradientType=0 );border: none;color:#fff;cursor: pointer;font: 13px/13px ‘HelveticaNeue’, Helvetica,Arial, sans-serif;padding: 10px;width:106px;box-shadow: 0 0 2px#2692dd inset;-moz-box-shadow: 0 0 2px#2692dd inset;-webkit-box-shadow: 0 0 2px#2692dd inset;border-radius: 9px;-moz-border-radius: 9px;-webkit-border-radius: 9px;}.searchform button:hover {opacity:.9;}</style><form class=”searchform cf” action=”/search”><input type=”text” name=”q”placeholder=”Type here to search anything”value=””  method=”get” /><button type=”submit”>Search</button></form>

Read Also ;Blogger me Whatsapp button kaise add kare100% Working html/javascript with Css Code

Message us Call Now facebook messanger Wharsapp chat widget Email All in one widget

Blogger Blogspot ke Liye 10 Stylish awsome Follow us Button Widget

Some Essential Articles For You  website/Blog kaise बनाए full Guide

अब अपने Website में जाकर चेक कर सकते
है चेक करने के लिए वेबसाईट को Refresh करें ।

तो दोस्तो कैसा लगा ये पोस्ट हमे बताए।और

इस पोस्ट को Social Media में जरुर Share कर दें I Hope की ये पोस्ट आपको पसन्द आया होगा ।

Leave a comment