Is this the first question?

Yes, this is the first question.

गोण्डा लाइव न्यूज एक प्रोफेशनल वेब मीडिया है। जो समाज में घटित किसी भी घटना-दुघर्टना "✿" समसामायिक घटना"✿" राजनैतिक घटनाक्रम "✿" भ्रष्ट्राचार "✿" सामाजिक समस्या "✿" खोजी खबरे "✿" संपादकीय "✿" ब्लाग "✿" सामाजिक "✿" हास्य "✿" व्यंग "✿" लेख "✿" खेल "✿" मनोरंजन "✿" स्वास्थ्य "✿" शिक्षा एंव किसान जागरूकता सम्बन्धित लेख आदि से सम्बन्धित खबरे ही निःशुल्क प्रकाशित करती है। एवं राजनैतिक , समाजसेवी , निजी खबरे आदि जैसी खबरो का एक निश्चित शुल्क भुगतान के उपरान्त ही खबरो का प्रकाशन किया जाता है। पोर्टल हिंदी क्षेत्र के साथ-साथ विदेशों में हिंदी भाषी क्षेत्रों के लोगों के बीच बहुत लोकप्रिय है और भारत में उत्तर प्रदेश गोण्डा जनपद में स्थित है। पोर्टल का फोकस राजनीतिक और सामाजिक मुद्दों को उठाना है और आम लोगों की आवाज बनना है जो अपने अधिकारों से वंचित हैं। यदि आप अपना नाम पत्रकारिता के क्षेत्र में देश-दुनिया में विश्व स्तर पर ख्याति स्थापित करना चाहते है। अपने अन्दर की छुपी हुई प्रतिभा को उजागर कर एक नई पहचान देना चाहते है। तो ऐसे में आप आज से ही नही बल्कि अभी से ही बनिये गोण्डा लाइव न्यूज के एक सशक्त सहयोगी। अपने आस-पास घटित होने वाले किसी भी प्रकार की घटनाक्रम पर रखे पैनी नजर। और उसे झट लिख भेजिए गोण्डा लाइव न्यूज के Email-gondalivenews@gmail.com पर या दूरभाष-8303799009 -पर सम्पर्क करें।

Blogger me custom Search Box Kaise Add kare

आज की पोस्ट में हम आपको ब्लागर ब्लाग में सर्च बाक्स क्या और इसे ब्लाग में कैसे लगाये। और इसे ब्लागर में एड करने के क्या-क्या फायदे है । मित्रो ब्लॉगर भी सर्च बॉक्स उपलब्ध करवाता है परन्तु ब्लॉगर बॉक्स थोड़ा देखने में एट्रेक्टिब नहीं होता है । परन्तु वही कस्टम सर्च बॉक्स देखने में बहुत आकर्षक होता है । साथ ही मित्रो जब हम ब्लॉगर में बहुत सारे आर्टिकल प्रकाशित करते है तो ऐसे में विजिटर को अपने मनपसंद आर्टिकल खोजने में काफी कठिनाईओ का सामना करना पड़ता है । जिससे आपके ब्लॉग की रैंकिंग काफी काम हो जाता है । परन्तु यदि आपके ब्लाग या वेब साइट में यदि सर्च बॉक्स एड है तो इससे विजिटर को मनपसंद आर्टिकल खोजने में काफी आसानी हो जाता है । परन्तु जब कोई नया ब्लागर होता है तो उसे सर्च बॉक्स के बारे में विशेष जानकारी नहीं होता । हाँ यदि आपको भी ब्लॉगर में सर्च बॉक्स एड करने की जानकारी नहीं है तो आप इस आर्टिकल को अच्छे से पढ़े जिससे आपके ब्लॉग में सर्च बॉक्स आसानी से एड हो सके ।

ब्लॉगर में कस्टम सर्च बॉक्स विजेट कोड क्या है -

मित्रो सबसे पहले नीचे दिये गये ब्लॉगर में कस्टम सर्च बॉक्स विजेट कोड को कापी पेस्ट कर ले या वायरस मुक्त कोड को डाउनलोड बाटम पर क्लिक करके डाउनलोड कर ले। जिससे आपको ब्लाग में ब्लॉगर में कस्टम सर्च बॉक्स विजेट कोड लगाने में आसानी हो सके।

Search Box Style - 01

यह सर्च बॉक्स आपको ठीक वैसा ही दिखेगा जैसा की आप चाहते है । आप जहाँ भी इसको लगायेंगे ये सर्च बॉक्स स्पेस के अनुसार खुद को automatically customize कर लेगा।

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

[[custom Search Box Style-01-DOWNLOAD HERE]]

Search Box Style - 02

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1aOA2IkowzQeedWq2DQxWjcpAEAG43OVKM91qOsaTV615gvBg1YjZUamjsR7q4wePiWasluttY6hjjKzHmcVB6YOh06K1FA5G9G-W3JCvAa117sDgba3qSedR5dKnpOso2YtuYkx9wVI/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>

[[custom Search Box Style-02-DOWNLOAD HERE]]

Search Box Style - 03

<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiaIkkBc1Z3Rk6TBoBZWjWe9QYXS4Nev8nDDZLAPF4pWevWl2Pl1zJhCHE26laCd0Km3ddnMUInt3ovmqn-yACMzSbx5w4sPy0Br58weIDQzHa8mOJLppLCMGCpYO9IyjFA2w7m5eCRow0/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tzMJF2-3xOI6Cp4OFEsxzcpfWKDQ_AN5NmCT1SaaQTrvz2Lm5z09rLCaY2vnPxvk9W6QUHFdc6JHjpnNvePGHBxPK5Tk87c2MvkXF6n26jKk9UXQ6EoUEZyDWsSHghnJHE30fIKrlIPt/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

[[custom Search Box Style-03-DOWNLOAD HERE]]

Search Box Style - 04

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

[[custom Search Box Style-04-DOWNLOAD HERE]]

Search Box Style - 05

<style>#search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;} #bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;} .bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;} .bo-sb-buttonwrap:hover {background-color: #31b0d5;} .bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;} .bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: '';width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;} .bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: '';width: 2px;left: 21px;height: 8px;background: white;top: 19px;} #bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;} #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;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;} </style><div id="search-box-info">
<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>

[[custom Search Box Style-05-DOWNLOAD HERE]]

ब्लॉगर में कस्टम सर्च बॉक्स कैसे ऐड करे

मित्रो ब्लॉगर में कस्टम सर्च बॉक्स विजेट लगाना चाहते है तो आपको इसके लिए दिये गये स्टेप को फालो करना होगा। जिससे आपको ब्लॉगर में कस्टम सर्च बॉक्स विजेट लगाने में आसानी हो सके।

स्टेप-संख्या-01

इसके लिए आप सबसे पहले अपने ब्लागर ब्लाग के डेशर्बोड में लागिंन करे ?
इसके बाद अब आप ब्लाग के layout पर क्लिक करे।
इसके बाद अब आप add a gadget पर क्लिक करे।

स्टेप-संख्या-02

इसके बाद अब आप HTML/JavaScript पर क्लिक करे।

स्टेप-संख्या-03

इसके बाद अब आप टाइटिल के नीचे वाले खाली बाक्स content box में कापी किये गये एचटीएमएल/जावा स्क्रिप्ट कोड को पेस्ट कर दे।
जब आपका सब कुछ कम्पलीट हो जाए तो आपको अंत में Save Arrangement सेव बाटन पर क्लिक करके सुरक्षित सेव कर लेना है।

मित्रो अब हमे उम्मीद है कि आप लोगो ने इस आर्टिकल को पढ कर सफलता पूर्वक अपने ब्लॉगर ब्लॉग में कस्टम सर्च बॉक्स कैसे ऐड करना अच्छी तरह से समझ गये होगें। अब नई शैली को देखने के लिए एक बार जाँच अवश्य करें। हां यदि आप लोगो को किसी प्रकार कोई समस्या महसूस होने पर आप हमें कमेन्ट कर पूछ सकते है। यदि आप ब्लॉगर ब्लॉग में कस्टम सर्च बॉक्स कैसे ऐड करने के लिए दिए गये तकनीकों को सीखते हैं, तो कृपया नीचे टिप्पणी करें, या दूसरों की मदद करने के लिए इस लेख को साझा करें।

Blogger me custom Search Box Kaise Add kare

ब्लॉगर में कस्टम सर्च बॉक्स विजेट कोड क्या है -

ब्लॉगर में कस्टम सर्च बॉक्स कैसे ऐड करे

You may also like: