ब्लॉग पर लगायें ‘CSS Advanced Search Box’

विज्ञापन

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

दिये गये कोड में प्रमुख भाग जिन्हें आप कस्टमाइज़ कर सकते हैं:

1. इस सर्च बाक्स का पृष्ठभूमि रंग
2. सर्च बॉक्स के चौड़ाई यदि इसे बदलें तो 2a भी अनुपात में बदलें
3. ‘Search this blog’ को अपने अनुसार बदल सकते हैं
4. GO को बदल सकते हैं
5. GO बटन की पृष्ठभूमि रंग, इसे भी बदल सकते हैं

विजेट स्टाइल 1.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#CC0000;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 2.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#67982D;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 3.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#3B5999;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 4.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#4B8CF7;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 5.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#202C38;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 6.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#C0AC93;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 7.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#26160E;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 8.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#F1AB00;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 9.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#FF3C9D;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 10.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#B92578;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 11.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#272727;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->

विजेट स्टाइल 12.

<!--Blog-Search-->
<form id="techprevue" action="/search" style="padding:5px;text-align:center;background:#FFF;width:300px;" method="get"> <input onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" style="width:235px;height:26px;border:1px dashed;background:transparent;color:#1F1F1F;text-align:center;" search name="q" /> <input id="searchbutton" style="width:50px;height:30px;border:0 solid;background:#C8C8C8;color:#FFF;text-align:center;" value="GO" type="submit" /></form>
<!--Blog-Search-->
Previous articleWinRAR Archives में Colourful Comments कैसे जोड़ें
Next articleRSSOwl – सबसे सरल Feed Aggragator
Founder, Tech Prevue. Doing Pro Blogging Since 2008.

LEAVE A REPLY

Please enter your comment!
Please enter your name here