ब्लॉगर के लिए 3 स्टाइलिश मेल सदस्यता widget – 3 Stylish Mail Subscription widget

Blog | | By

 क्या आपने देखा है कि कुछ popular websites अपनी site पर Stylish Mail Subscription widget कैसे दिखाती हैं?  अगर हां हो अब आप भी अपने ब्लॉग पर 

Stylish Mail Subscription widget को लगा सकते है वो भी बस इन 4 STEPS को follow करके | तो चलिए देखते है कैसे –

ब्लॉगर के पास  एक ईमेल सदस्यता widget है जो अपना काम करता है लेकिन
उपयोगकर्ताओं को ब्लॉगर के लिए एक कस्टम स्टाइलिश ईमेल सदस्यता widget की तरह
कार्य नहीं कर सकता है।

मेल सदस्यता / सूची निर्माण loyal users को प्राप्त करने का एक महत्वपूर्ण हिस्सा
है। इसलिए, कस्टम सब्सक्रिप्शन widget लागू करना, अधिक सब्सक्राइबर हासिल करने के
लिए बहुत महत्वपूर्ण है।

कस्टम मेल सदस्यता विजेट का उपयोग क्यों करें?

आप कोड का customize कर सकते है ।
ईमेल सदस्यता के अलावा कई अन्य सुविधाएँ होने की क्षमता
आधुनिक और attractive 
आपके लिए बेहतर दृश्यता और अधिक सदस्यता पाने का मौका
हम आपके ब्लॉगर ब्लॉग के लिए  लिए 3 स्टाइलिश मेल सदस्यता widget ले कर
आये है

1.   Mail Subscription widget

क्या आप भी अपने ब्लॉग पर इस प्रकार का widget चाहते हैं अगर हां

तो नीचे दिया गया कोड को सबसे पहले आप कॉपी करें इसके बाद इस कोड को नीचे दिए गए स्टेप्स के अनुसार फॉलो करें
<style type="text/css">
.swsbscbox{
    background:white;height:100%;
    padding:10px 5px 5px 5px;
    border:5px solid transparent;
    font-family: roboto;text-align:center;
    color:white;font-size:22px;}
.swsbsblbox{
    background:-webkit-gradient(linear,left top, left bottom,from(#0783c3),to(#024365));
    background:-o-linear-gradient(#0783c3,#024365);
    background:linear-gradient(#0783c3,#024365);
    height:40%; border-radius:8px !important;}
.title{
   color:white;font-weight:bold;
   font-size:32px;padding-top:10px;
}
.swsbscbox .boxinput{
    position: relative; top:-20px;
    background: white;color: #000;
    border: none; padding: 13px 0 13px 0;
    font-family: roboto; margin-bottom: 10px;
    outline: none;-webkit-transition: .3s;
    -o-transition: .3s;transition: .3s;
     width: 86%;text-align: center;
    border-radius: 4px;-webkit-box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);}
.icon{
    -webkit-transition:-webkit-transform .5s ease-in;
    transition:-webkit-transform .5s ease-in;
    -o-transition:transform .5s ease-in;
    transition:transform .5s ease-in;
    transition:transform .5s ease-in, -webkit-transform .5s ease-in;}
.icon:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);}
.subs-button{
    cursor: pointer;font-weight: 700;
    padding: 3% 10%;text-transform: none;
    font-size: 13px;border: 2px solid #024365;
    border-radius:8px;margin: 20px auto 0;
    text-align: center;outline: none;
    background: white;color: black;
    -webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    -webkit-transition:background .5s ease-out;
    -o-transition:background .5s ease-out;
    transition:background .5s ease-out;}
.subs-button:hover{
    background:#024365; color: white;}
.subs-fb{
      padding:0px 15px 0px 15px;
      width:60px; height:60px;
      -webkit-transition:-webkit-transform .5s linear;
      transition:-webkit-transform .5s linear;
      -o-transition:transform .5s linear;
      transition:transform .5s linear;
      transition:transform .5s linear, -webkit-transform .5s linear;}
.subs-fb:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);}
.subs-twt{
    -webkit-transition:-webkit-transform .5s linear;
    transition:-webkit-transform .5s linear;
    -o-transition:transform .5s linear;
    transition:transform .5s linear;
    transition:transform .5s linear, -webkit-transform .5s linear;
     width:60px; height:60px;
    padding:0px 15px 0px 15px;
}
.subs-twt:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);
}
.social-main{
    width: 100%;display: table;
    table-layout: fixed; border-collapse: collapse;}
.fb-likes{
    border-right: 30px solid transparent;
    text-align: right;}
.twt-follow{
    border-left: 30px solid transparent;
    text-align: left;}
.fb-likes,.twt-follow{
     display: table-cell;
    word-wrap: break-word;}
</style>
<div class="swsbscbox">
<center>
</center>
<div class="swsbsblbox">
<div class="title">Newsletter</div><br><br>
<span class="substxt">Subscribe for new post notifications</span><br><br></div>
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=[BLOG URL]', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow"><input class="boxinput" name="EMAIL" placeholder="Your Email Address" type="email" required="">
<input class="subs-button" type="submit" value="Submit"><input name="uri" type="hidden" value="[BLOG URL]">
<input name="loc" type="hidden" value="en_US"></form><br>
<div class="subs-social">
    <img class="subs-fb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRt05r5FfE4km0kIQhvJ_jyGDybhMsxM8XCH2RSJj_2Zhwx8rJqrnONvh6NBubV7eui79icRVZCwlf-penTjnz6_GokL1hj54pTdkbZZQLOKC9WgVR1rLmJHhyphenhyphenbRubc9gv0ctUCJmc3M/s1600/fb.png">
<img class="subs-twt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3JdnfdPFujZkmNTmJUG-hnae57dbsB8cdhQt1MQ3b5Cc-KoYdsk8WGtGQQGg8TQs3WR3LMalG2G3_8biVkRALLIcP0JIvZI4a6sWR4fFhrsmKPMhIZuXO7ufN8BMoOw07YUM68UeMJI/s1600/twt.png"></div>
</center>
<ul class='social-main'>
    <li class='fb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[FACEBOOK PAGE URL]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </li>
    <li class='twt-follow'>
     <a href="[TWITTER URL]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[TWITTER USERNAME]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </li>
 </ul>
     </div>

2.   Mail Subscription widget

अगर आपको यह वाली widget पसंद है तो सबसे पहले आप

इस कोड को कॉपी करें इसके बाद नीचे दिए गए स्टेप्स को फॉलो करें
<style type="text/css">
.sbscbox{
    background:-webkit-gradient(linear,left top, left bottom,from(#bdc2c6),to(#7b7f82));
    background:-o-linear-gradient(#bdc2c6,#7b7f82);
    background:linear-gradient(#bdc2c6,#7b7f82);
    padding:10px 5px 10px 5px;
    height:100%; color:black;
    border:5px solid transparent;
    border-radius:8px !important;
    text-align:center;font-size:22px;}
.title{
   color:#1f2023;font-weight:bold;
   font-size:32px;}
.sbscbox .swsinput{
    border: none;
    padding: 13px 0 13px 0;
    background: #33485d;
    color: #fff;width: 86%;
    text-align: center;
    font-family: roboto;
    margin-bottom: 10px;
    outline: none;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);}
.swsinput::-webkit-input-placeholder{
    color:white;}
.swsinput::-moz-placeholder{
    color:white;}
.swsinput:-ms-input-placeholder{
    color:white;}
.swsinput::-ms-input-placeholder{
    color:white;}
.swsinput::placeholder{
    color:white;}
.icon{
    -webkit-transition:-webkit-transform .5s ease-in;
    transition:-webkit-transform .5s ease-in;
    -o-transition:transform .5s ease-in;
    transition:transform .5s ease-in;
    transition:transform .5s ease-in, -webkit-transform .5s ease-in;
}
.icon:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);}
.subs-button{
    cursor: pointer;font-weight: 700;
    padding: 15px 45px;text-transform: none;
    font-size: 13px;border: none;
    border-radius:8px;-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s;
    margin: 20px auto 0;text-align: center;
    outline: none;background: #d03e31;
    color: #fff;
    -webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    -webkit-transition:background .5s ease-out;
    -o-transition:background .5s ease-out;
    transition:background .5s ease-out;}
</style>
<div class="sbscbox">
<center>
</center>
<span class="title">Newsletter</span><br><br>
<span class="small">Subscribe for new post notifications</span><br><br>
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=[BLOG URL]', 'popupwindow', 'scrollbars=yes,width=500,height=500'); return true" target="popupwindow"><input class="swsinput" name="EMAIL" placeholder="Your Email Address" type="email" required="">
<input class="subs-button" type="submit" value="Submit"><input name="uri" type="hidden" value="[BLOG URL]">
<input name="loc" type="hidden" value="en_US"></form><br>
</center></div>

3.   Mail Subscription widget

अगर आप अपने ब्लॉग पर Gmail जैसा widget चाहते हैं तो यह वाला widget आपके ब्लॉग के लिए परफेक्ट है इसे अपने ब्लॉग में जोड़ने के लिए

इस कोड को कॉपी करें और नीचे दिए गए स्टेप्स को फॉलो करें
<style type="text/css">
.sbscbox{
    background:white;
    padding:10px 5px 10px 5px;
    height:100%;
    border:5px dashed transparent;
    border-radius:8px !important;
    text-align:center;color:#8e8e8e;
    font-size:22px;}
.title{
   color:#1f2023;font-weight:bold;}
.sbscbox .swsinput{
    background: #B0C4DE;color: #fff;
    border: none; padding: 13px 0 13px 0;
    font-family: roboto;
    margin-bottom: 10px;
    transition: .3s; width: 86%;
    text-align: center;border-radius: 4px;}
.swsinput:focus{
     outline: none;}
.swsinput::placeholder{
    color:#2f4f4f;}
.icon{
    transition:transform .5s ease-in;}
.icon:hover{
    transform:rotate(360deg);}
.subs-button{
    cursor: pointer; font-weight: 700;
    padding: 15px 45px;text-transform: none;
    font-size: 13px;border: none;
    border-radius:8px;transition: all .3s;
    margin: 20px auto 0;text-align: center;
    outline: none;display: block;
    background: #d03e31; color: #fff;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    transition:background .5s ease-out;
    width:86%;}
.subs-fb{
      padding:0px 15px 0px 15px;
      transition:transform .5s ease-in;}
.subs-fb:hover{
    transform:rotate(360deg);}
.subs-twt{
    transition:transform .5s ease-in;
    padding:0px 15px 0px 15px;}
.subs-twt:hover{
    transform:rotate(360deg);
}
.social-main{
    width: 100%;display: table;
    table-layout: fixed; border-collapse: collapse;}
.fb-likes{
    border-right: 30px solid transparent;
    text-align: right;}
.twt-follow{
    border-left: 30px solid transparent;
    text-align: left;}
.fb-likes,.twt-follow{
    display: table-cell;
    word-wrap: break-word;
}
</style>
<div class="sbscbox">
<center>
<br><span ><img height="auto" class="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZdJqmkNI21nh8nAFazFy0j_ZyXxA_DlLJ_nv9i9BwROTj3keQpyUQKytnQkbMGLzL1vyx5ggLyV0VUoNB8ksb7cRQs5EySEmsyHpWQtSjfYsU8OZbFMb2kpDfqvqzzA3Bol_k_Djo4U/s1600/mail.png" width="150px"></span><br>
</center>
<span class="title">Newsletter</span><br><br>
<span class="small">Join for latest updates!</span><br><br>
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=[BLOG URI]', 'popupwindow', 'scrollbars=yes,width=500,height=500'); return true" target="popupwindow"><input class="swsinput" name="email" placeholder="Your Email Address" type="email" required="">
<input class="subs-button" type="submit" value="Submit"><input name="uri" type="hidden" value="[BLOG URI]">
<input name="loc" type="hidden" value="en_US"></form><br>
<div class="subs-social">
    <img class="subs-fb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRt05r5FfE4km0kIQhvJ_jyGDybhMsxM8XCH2RSJj_2Zhwx8rJqrnONvh6NBubV7eui79icRVZCwlf-penTjnz6_GokL1hj54pTdkbZZQLOKC9WgVR1rLmJHhyphenhyphenbRubc9gv0ctUCJmc3M/s1600/fb.png">
<img class="subs-twt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3JdnfdPFujZkmNTmJUG-hnae57dbsB8cdhQt1MQ3b5Cc-KoYdsk8WGtGQQGg8TQs3WR3LMalG2G3_8biVkRALLIcP0JIvZI4a6sWR4fFhrsmKPMhIZuXO7ufN8BMoOw07YUM68UeMJI/s1600/twt.png"></div>
</center></div>
<ul class='social-main'>
    <li class='fb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[FACEBOOK PAGE URL]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </li>
    <li class='twt-follow'>
     <a href="https://twitter.com/[TWITTER URL]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[TWITTER USERNAME]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </li>
 </ul>
ब्लॉगर में कस्टम Mail Subscription widget  सेटअप करने के लिए Steps
एक ब्लॉगर में कस्टम Mail Subscription widget सेट करना आसान है। बस इन steps का पालन करें:
  1. सबसे पहले, उपरोक्त में से अपना इच्छित विजेट चुनें।
  2. फिर किसी भी टेक्स्ट एडिटर में अपने चुने हुए विगेट्स कोड को कॉपी करें।
  3. यहाँ हमें अपने ब्लॉग के साथ कोड को काम करने के लिए कुछ values को change  करना होगा।
  4. इन कोड को खोजें और बदलें:
 [BLOG URL] =  आपका ब्लॉग रूट डोमेन नाम .com या .blogspot आदि के बिना। जैसे – hubpro
        [FACEBOOK PAGE URL] = आपका फेसबुक पेज लिंक
        [TWITTER URL] = your आपका twitter profile लिंक
        [TWITTER USERNAME] =आपका twitter username 
अब जब आपने अपने कस्टम ईमेल विजेट को तैयार कर  लिया है,
 तो अब आप अपने ब्लॉगस्पॉट ब्लॉग में add करने के लिए निम्न steps को follow करे |
सबसे पहले आप अपने ब्लॉगर डैशबोर्ड पर जाये, layout पर जाएं और फिर वहां से widget बटन पर क्लिक करके जहा आप  कस्टम Mail Subscription widget दिखाना चाहते हैं, 
अब add new gadget पर क्लिक करे 
नई खुली हुई window में, आपको अपने पहले से set किया हुआ Subscription widget कोड को कॉपी और पेस्ट करना होगा।
congratulations आपने अपने ब्लॉग में Mail Subscription widget को सफलतापूर्वक add कर लिया है |
मुझे उम्मीद है कि इन steps का पालन करने पर आप अपने कस्टम Mail Subscription widget को blog में add कर सकेंगे ।
मैं बहुत जल्द और भी widget जोड़ूंगा। इसके अलावा, मैं इन पहले से ही पोस्ट किए गए widget को ब्राउज़रों के साथ  और अधिक सुंदर और compatible बनाने के लिए देखूंगा। इस बीच, अगर आपको इन widget का उपयोग करने में कोई समस्या आ रही  है या कोई अन्य प्रश्न पूछना चाहते है तो  नीचे comment करके आवश्य पूछें हम जल्द ही उत्तर देंगे ।
और पोस्ट पसंद आने पर शेयर करना न भूलें।

Must Read

Leave a Comment

Your email address will not be published. Required fields are marked *