हैलो friends आज के इस पोस्ट में हम बताने जा रहे है Stylish 10 Search Box How To Add Blogger Blog
किसी भी 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 किए हुए कोड को पेस्ट कर दे ।
उसके बाद Save पर क्लिक करे कोड Save हो जाएगा ।
कोड 1
<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
<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
<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
<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
<style type="text/css">#abt-searchbox{border-radius:5px;background:URL(http://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="//img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>कोड 6
<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
<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
<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
<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(http://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
<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>अब अपने Website में जाकर चेक कर सकते है चेक करने के लिए वेबसाईट को Refresh करें । तो दोस्तो कैसा लगा ये पोस्ट हमे बताए।और इस पोस्ट को Social Media में जरुर Share कर दें I Hope की ये पोस्ट आपको पसन्द आया होगा ।
