Blogspot Me Stylish Email Subscription Widget Ko Add Kaise Kare ?

आज की यह Post Blog के Design से संबंधित है.इस Post में मैं आपको बताने वाला हूँ की Blogger Blog में Email Subscription Widget add कैसे करते है.क्योकि Blogger पर आप Blog बनाने के बाद उसको Customize करके उसे एक बेहतर Look दे सकते है.Email Subscription Widget के द्वारा Blog के Users हमारे Blog के Feeds को सब्सक्राइब कर सकते है.जिससे उनको हमारे ब्लॉग की हर एक Post Update की सूचना Email के माध्यम से मिल जाती है.

हमे Blogger Blog में एक पहले से ही Simple Email Subscription Widget मिलता है जिसको आप Layout के माध्यम से आसानी से Blog में Add कर सकते है.लेकिन उसका Design बहुत ही साधारण है.मेरा कहने का मतलब है की वो बहुत ज्यादा Stylish नहीं है जिससे Users का उस पर ध्यान नहीं जाता है.जिससे वो हमारे Blog को सब्सक्राइब भी नहीं करते है.लेकिन आज की पोस्ट में मैं आपको जिन Widget के बारे में बताने वाला हूँ वह बहुत Stylish है.

यह Subscription Widget Stylish Design किये गये है और Responsive भी है.यानि की यह आपके ब्लॉग के Theme Size के अनुसार Automatic रूप से Fit हो जाएँगे.जिससे यह Desktop और Mobile दोनों में बेहतर तरीके से Show होते है.इनका Design भी इतना अच्छा है की Blog के Visitors पर इनका ध्यान ज़रूर जायेगा और वह ब्लॉग को सब्सक्राइब भी कर लेंगे.

वैसे भी Blog को एक प्रोफेशनल look देने व User फ्रेंडली Design करने के लिए उसमे Email Subscription Widget Add करना बहुत ज़रूरी है.तो आइये जानते है की कैसे ब्लॉग में ईमेल सब्सक्रिप्शन widget को लगाते है.

Note -यह Widget हमारे द्वारा Design नहीं किया गया है.यह हमे BloggersOrigin ब्लॉग के माध्यम से मिला है.इसी कारण आज की इस पोस्ट का श्रेय हम BloggersOrigin ब्लॉग को देते है.जिनके द्वारा इतना अच्छा ईमेल सब्सक्रिप्शन widget डिजाईन किया गया है.

Blogger Blog Me Stylish Email Subscription Widget Add Kaise Kare ?

Step - 1 - सबसे पहले आपको अपने blogger blog में login करने के बाद डैशबोर्ड में जाकर Layout वाले पेज पर क्लिक करना है.

Step - 2 - Layout पर क्लिक करने के बाद आपको Sidebar में Add A Gadget पर क्लिक करना है.

Step - 3 - Add A Gadget पर क्लिक करने के बाद एक पॉपअप विंडो ओपन होगी जिसमे आपको HTML / JavaScript वाले Widget पर क्लिक करना है.

Step - 4 - अब HTML /JavaScript विंडो ओपन हो जाएगी.इसमें आपको Title में कुछ नहीं लिखना है यानि की इसको खाली ही रखना है और Content में नीचे Code Box में दिया गया Code Copy करके पेस्ट कर देना है.Code Paste करने के बाद Save पर क्लिक करके विजेट को सेव कर दे.

<style>/* ----------------------------------------------------
Subscription Box Widget RED
Designed by : https://bloggersorigin.com
Do Not Remove this Credits.
-----------------------------------------------------*/
#blog-ornate-subscribe { background: #f47555; padding: 26px; height:auto; position:relative;overflow:hidden;}
#blog-ornate-subscribe h4.title { color: #FFFFFF; font-size: 22px; text-align: center; line-height: 1; margin-bottom: 0; text-transform: uppercase; margin-top:10px; }
#blog-ornate-subscribe p { color: #FFFFFF; margin: 0; text-align: center; }
#blog-ornate-subscribe p.text { opacity: 0.8; margin: 15px 0; }
#blog-ornate-subscribe input { width: 100%; margin: 0; border: none; box-sizing: border-box; box-shadow: none; text-align: center; padding: 10px 0; height: 45px; border-radius: 0; }
#blog-ornate-subscribe input.email-field {
background: #F1F1F1 url(https://2.bp.blogspot.com/-4y1QQv9m4wU/WU1PnBde4rI/AAAAAAAAAFc/RehQ1TyFi0A3mARnOu9KUFUA3G5dnanBgCLcBGAs/s1600/email.png) no-repeat;
background-position: 5px 14px !important;
padding: 10px;
border: 1px solid #CCC;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
}
#blog-ornate-subscribe input:focus{
background-color: #FFF;
border-color: #E8C291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;
box-shadow: 0 0 0 1px #E8C291 inset;
}
#blog-ornate-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#blog-ornate-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#blog-ornate-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#blog-ornate-subscribe input.submit { font-weight: 500; font-size: 18px; background: #FFFFFF; margin-top: 20px; text-transform: uppercase; color: #f47555; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); cursor: pointer;
border: 1px solid #CCC;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
#blog-ornate-subscribe input.submit:hover{background:#f03636;color:#fff;}</style><div id="blog-ornate-subscribe">
 <h4 class="title">
Subscribe via Email</h4>
<p class="text">
Don't Miss Any Updates, Stay Connected!</p>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Amojeet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input class="email-field" name="email" placeholder="Enter email address" type="text" /> <input type="hidden" value="Amojeet" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="submit" value="Sign Up Now" type="submit" /> </form>
</div>

configure-html-javascript-gadget-in-blogspot

Note - इस कोडिंग में आपको Amojeet के स्थान पर अपने ब्लॉग के feedburner account की id लिख देनी है.feedburner id आपको Feedburner account में मिल जाएँगी.

तो इस प्रकार आप अपने Blogspot Blogger Blog में Stylish Email Subscription Widget लगाकर Blog के सब्सक्राइबर बढ़ा सकते है.इस पोस्ट से संबंधित आप अपने विचार,सवाल या सुझाव कमेंट बॉक्स के द्वारा कमेंट करके हमसे साँझा कर सकते है.Blogging,SEO,Blogger से संबंधित Posts को Daily पढने के लिए आप हमारे Blog को भी ज़रूर सब्सक्राइब कर ले.इस पोस्ट को दूसरे ब्लॉगर के साथ भी Share ज़रूर करे.