विज्ञापन
हममें से बहुत ब्लॉगर मित्रों ने लिखा है कि उन्हें ऐसा सर्च विजेट चाहिए जिसमें क्लिक करने पर अंदर लिखा ‘सर्च दिस ब्लॉग’ छुप जाता है और कर्सर हटा लेने के बाद वह वापस दिखता है। इसलिए मैं आपके के लिए लाया हूँ ब्लॉग सर्च विजेट की एक अनोखी शृंखला, जिसमें आप अपने पसंदीदा रंग का सर्च विजेट चुन सकते हैं या फिर कस्टमाइज़ कर सकते हैं।
दिये गये कोड में प्रमुख भाग जिन्हें आप कस्टमाइज़ कर सकते हैं:
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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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 == "Search this blog...") {this.value = ""}" value="Search this blog..." type="text" id="searchbox" onblur="if (this.value == "") {this.value = "Search this blog...";}" 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-->