WordPress Me Subscribe Box Kaise add kare ( Without Plugin )

हेलो दोस्तों आज के इस tutorial मे हम बता रहे है वर्डप्रेस Hosted वेबसाइट मे Without Plugin subscribe बॉक्स कैसे ऐड करें

सब्सक्राइब बॉक्स हमारे ब्लॉग का एक महत्व पूर्ण Widget है जिसकी मदद से हमारा ब्लॉग Grow करता है मान लीजिए पहली बार कोई रीडर्स आपके ब्लॉग पर विजिट किया और उसे आपका ब्लॉग पसंद आया और आप जो कंटेंट अपने ब्लॉग पर साझा कर रहे है वो पसंद आया तो वह आपके ब्लॉग पर होने वाले न्यू Updates की जानकारी पाने के लिए सब्सक्राइब बॉक्स मे अपना Email डाल कर आपके ब्लॉग को सब्सक्राइब कर लेता है जिससे आप ज़ब भी कोई नया पोस्ट अपने ब्लॉग पर पोस्ट करते है  सब्सक्राइबर को इसकी सूचना मिल  जाती है

Subscribe widget kaise add kare

मै पहले ही सब्सक्राइब widget से रिलेटेड कई पोस्ट कर चूका है जिसमे बताया है Subscribe widget kya hai Blog ke liye Subscribe widget kyo jaruri hai blog me  Subscribe  widget kaise add kare यहाँ पर कई ऐसे भी subscribtion कोड है जो wordpress मे भी वर्क करता है आप चाहे तो try कर सकते है अगर वो सब कोड आपके theme मे वर्क ना करें तो नीचे मैंने 2 सब्सक्राइब बॉक्स का कोड दिया है ये दोनों कोड भी Blogger और WordPress दोनों मे वर्क करता है 20+ Newsletter widget in Blogger and wordpress

Step.1 आप यहाँ से कोड डाउनलोड करे डाउनलोड कर लेने पर उस कोड को open करें और कोड Copy कर ले आप चाहे तो ये कोड कॉपी भी कर सकते है नीचे दिया गया है ये Css कोड है

Code.1 Subscribe Box demo

Code.1 Css Code

#HMH-FeedBurner {

background: #E8E8E8;

border: 1px solid #CCCCCC;

padding: 15px 0;

text-align: center;

width: 298px;

}

#HMH-FeedBurner input[type="text"] {

border: 1px solid #BBBBBB;

font-size: 13px;

margin: 0 0 15px 0;

padding: 10px;

width: 80%;

color:#888;

}

#HMH-FeedBurner input {

box-shadow: 0 2px 2px #BBBBBB;

-moz-box-shadow: 0 2px 2px #BBBBBB;

-webkit-box-shadow: 0 2px 2px #BBBBBB;

}

#name {

background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;

}

#email {

background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;

}

#HMH-FeedBurner input[type="submit"] {

background: #3B8DBD;

border: 1px solid #005588;

color: #FFFFFF;

cursor: pointer;

font-size: 16px;

font-weight: bold;

height: 40px;

margin-top: 5px;

padding: 8px 0;

text-transform: capitalize;

width: 87%;

}

#HMH-FeedBurner input[type="submit"]:hover {

background: none repeat scroll 0 0 #005588;

}

Html Code

<div id="HmH-FeedBurner">

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Enter Your feedburner id ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">

<input type="hidden" name="uri" value="HindimeHelp" /><input type="hidden" value="en_US" name="loc" />

<input type="text" id="name" name="name" onfocus="this.value=&#39;&#39;" value="Enter Your Name" placeholder="Enter Your Name" />

<input type="text" id="email" name="email" onfocus="this.value=&#39;&#39;" value="Enter Your Email Address" placeholder="Enter Your Email Address" />

<input type="submit" value="Subscribe Now!" id="submit" name="submit" />

</form>

</div>

नोट ; ये कोड HindimeHelp वेबसाइट से लिया गया है  [ मेरा मकसद है रीडर्स को एक ही जगह पर सभी चीजे उपलब्ध कराना इसी कारण से मैंने ये कोड कॉपी किया है और इस ब्लॉग पर आप ऐड लिया है उम्मीद है आपको बुरा नहीं लगेगा मै चाहुँ तो इस कोड को Edit कर सकता हूँ लेकिन मेरा मकसद है लोगो को सही जानकारी देना

Code. 2 Subscribe Box demo

Code.2 Css

#hindivhelp { padding: 15px 25px 20px; line-height: 35px; text-align: center; background: #148aea; margin: -25px; border: none; } input.jdk { color: #333; padding: 15px; font-size: 14px; font-family: PT Sans, sans-serif; border: 1px solid #EEE; margin: 10px auto 0; border-radius: 3px; width: 89%; } #hindivhelp p { color: #fff; font-size: 16px; } #hindivhelp h5 { font-size: 23px; color: #fff; padding: 0; text-align: center; } #hindivhelp input[type="submit"] { background-color: #ea141f; border: #ea141f solid 2px; color: #FFF; cursor: pointer; padding: 10px 15px; font-size: 16px; width: 100%; margin: 15px auto 0; } #hindivhelp input[type="submit"]:hover { background: #18c90c; color: #333; border: #18c90c solid 2px; }

Html Code

<div id="Hindivhelp">
 <h5> Get Free Newsletter </h5><p>Hindivhelppar Sign up kare aur Apne email inbox me Latest Blogging Guide Daily Prapt kare</p>
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Enter Your feedburner id ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
 <input class="jdk" type="text" name="name" placeholder="Enter your name">
 <input class="jdk" type="text" name="email" placeholder="Enter your email ID">
 <input type="hidden" value="hindivhelp" name="uri">
 <input type="hidden" name="loc" value="en_US">
 <input class="submit" type="submit" value="SUBSCRIBE NOW">
 </form>
 </div>

Customization ; Html Code मे Inter inter your feedburner id की जगह अपने Feedburner Id डाले,

Step.2 यहाँ से जो भी डिज़ाइन आपके theme के लिए अच्छा है उसका पहले Css Code कॉपी करें

Step.3 कोड कॉपी करने के बाद WordPress डैशबोर्ड मे लॉगिन करें लॉगिन हो जाने के बाद Appearance >> Theme Editor >> पर क्लिक करें

Step.4 अब style.php folder मे  नीचे Css Code peste कर दे फिर अपडेट file पर क्लिक करें

Step. 5 अब सब्सक्राइब बॉक्स का कोड ऊपर से कॉपी कर ले और Appearance >> widget >> मे जाकर Custom Html पर क्लिक करें सब्सक्राइब widget कहाँ ऐड करना है ( Header, Sidebar, Footer, ) वो सलेक्ट करें और नीचे add Widget पर क्लिक करें  एक बॉक्स आएगा उस बॉक्स मे सब्सक्राइब बॉक्स का कोड peste कर दे फिर Save पर क्लिक करें

उसके बाद Done पर क्लिक कर दे अगर नहीं मालूम की sidebar मे widget कैसे ऐड किया जाता है तो ये पोस्ट आप ये पोस्ट पढ़े WordPress Sidebar me Widget kaise add kare

आपके वर्डप्रेस ब्लॉग मे सब्सक्राइब widget ऐड चूका है देखने के लिए अपने ब्लॉग को Refresh कर के देख सकते है दोस्तों successbranchको विजिट करते रहिए क्योंकि आगे भी ऐसी बहुत से tutorial आने वाले है जो जो without plugin के आप अपने ब्लॉग को awesome डिज़ाइन बना सकते है पोस्ट पसंद आए सोशल साइट्स पर share करना and  फीडबैक देना ना भूले हो