Blogger 3 Stylish and Beautiful Email subscription Box

3 Stylish email subscription box For Blogger

अपने Blog को हर कोई अच्छा दिखाना चाहता है अच्छे दिखाने के लिए आप अपने ब्लॉग में बहुत सारी तकनीके अपनाते होंगे अपने ब्लॉग में तो आज हम आपको बताने वाले हैं कि Blogger Ka Lia 3 Stylish and Beautiful Email subscription Box जिससे आप अपने user को latest update दे सकते हो अपनी पोस्ट का जिससे आपके users आपकी latest update post ka मजा उठा सकेंगे और आपको अपने ब्लॉग पर traffic भी मिलता रहेगा तो चलिए शुरू करते हैं कि blogger 3 beautiful email Subscription widge .

email subscription से blog को benifits :

Email subscription लगाने से आपके यूजर आपके साथ जुड़ सकते हैं अगर कोई आपका Users आपकी ब्लॉग को Subscribe करता है तो जब भी आप अपने ब्लॉग में कोई पोस्ट update करते हो तो उसका notification आपके user को मिल जाएगा और वह आसानी से आपके blog में आ सकता है साथ ही साथ ईमेल सब्सक्रिप्शन से आपके ब्लॉग पर ट्रैफिक भी बढ़ जाएगा

Blogger 3 Stylish Beautyful email subscription Box :

जैसे हम सब जानते हैं कि Blogger में भी हमें Email subscription का gadget use करने को मिलता है लेकिन वह उतना stylish or beautyful नहीं होता साथ ही साथ उसमें social media buttons नहीं मिलती जो ईमेल subscription हम आपको provide करवाने वाले हैं और मैं आपको social media follow buttons भी मिलेंगे जिससे आपकी यूज़र आपको सोशल मीडिया में भी फॉलो कर सकते हैं

<style type="text/css">
    .hbzsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
    
    .hbzsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
    }
    
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
    
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
    
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 85px;
        font: bold 13px "trebuchet MS", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
    
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    
    .hbzsignup-form {
        margin-top: 15px;
    }
    
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
    
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
    
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
   
    .hbzsocial-icons ul li a {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-GDEbUg_AgWSHFUFJ2G_VT4sYOmP4544fAQ4e0tJG9a-Z6PAmcjL8ZjVLswkgEvlLDyGQf97o27aHkfuZS5RtjULcdH7zmYM1o6gVwlZiTjXp6RPOZbneKLjXme0e1Cyq3PqT_p7PC9M/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    
    .hbzsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
    
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
    
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
    
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
    
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
    
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
<div class="hbzsub">
    <div class="hbzsube">
Join Our Free Newsletter</div>
<div class='hbzsignup-form'>
        <div class='hbzemailform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
 <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form>
</div>
<div class="hbzsube">
Sociliaze with Us</div>
<div class="hbzsocial-icons">
            <ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>
<div style="width: 230px; margin: 0px auto;">
            <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_GB/sdk.js#xfbml=1&version=v2.6";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
            </script>
            <div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="[Fb url]">
<a href="[Fb url]">[Fb Page Name]</a></blockquote>
</div>
</div>
</div>
</div>
</div>

<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}

.hbzemailform {
    width: 240px;
    margin: 10px auto;
}

#hbzemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px "trebuchet MS","Tahoma";
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}

.hbzsignup-form {
    margin-top: 15px;
}

.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}

.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}

.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-GDEbUg_AgWSHFUFJ2G_VT4sYOmP4544fAQ4e0tJG9a-Z6PAmcjL8ZjVLswkgEvlLDyGQf97o27aHkfuZS5RtjULcdH7zmYM1o6gVwlZiTjXp6RPOZbneKLjXme0e1Cyq3PqT_p7PC9M/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}

.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998; 
}

.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}

.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced; 
}

.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}

.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39; 
}

.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}

.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027; 
}

.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}

.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12; 
}

</style>

<div class="hbzsub">

<div class="hbzsocial-icons">
  <ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>
<div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>
Subscribe to my Newsletter</h4>
</div>
<div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
</div>
</div>
</div>

<style type="text/css">
.hbzsignup-form {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOvM1EhNzTsma3Mp4Yjak09OMSrgHLtIQ3QrOpUGI1DnMRPOqSNInPPMCD7KOODspAXNl_p29OdvBKT3cShM0u_7H8Cq1K7lzNoTxqrKPbeg_YBo0FZYi5Xc-_1_SYeWXJZQeFAQc_W_Cu/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
}

.hbzform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px "trebuchet MS","Tahoma";
}

.hbzemailform {
    margin: 120px auto 5px;
    width: 215px;
}

#hbzemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
    margin-right: 5px;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 12px;
    vertical-align: top;
    display: inline-block;
}
#hbzemailbutton {
    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
    border: medium none;
    color: #FFF;
    cursor: pointer;
    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    display: inline-block;
}

#hbzemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}

.hbzsocial-icons {
    margin: 20px 0 0;
    overflow: hidden;
    display: block;
    text-align: center;
}

.hbzsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}

.hbzsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-GDEbUg_AgWSHFUFJ2G_VT4sYOmP4544fAQ4e0tJG9a-Z6PAmcjL8ZjVLswkgEvlLDyGQf97o27aHkfuZS5RtjULcdH7zmYM1o6gVwlZiTjXp6RPOZbneKLjXme0e1Cyq3PqT_p7PC9M/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 38px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s; width: 38px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}

.hbzsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}

.hbzsocial-icons ul li.social-gplus a {
    background-color: #dd4b39;
    background-position: -93px 3px;
}

.hbzsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}

.hbzsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
    background-color: #333; 
}

.hbzsocial-like {
    display: block;
    text-align: center;
}

.hbzsocial-like tbody, .hbzsocial-like tbody tr {
    display: block;
}

.hbzfb-likes {
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
}

.hbztw-follow {
    display: inline
}

</style>

<div>
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <p>
Sign Up for Email Updates</p>
</div>
<div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
    <input id='hbzemailbutton' title='' type='submit' value='Sign up'/>
   </form>
</div>
</div>
<div class="hbzsocial-icons">
  <ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>
<table class='hbzsocial-like'>
  <tbody>
<tr>
    <td class='hbzfb-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="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
</td>
    <td class='hbztw-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>
    </td>
   </tr>
<tbody>
 </table>
</div>

Blogger ma Stylish subscription box kaise add kare :

Step 1 सबसे पहले आप अपने ब्लॉगर में लॉगइन हो जाइए

Step 2 अब लॉकर के layout section में जाइए

Step 3 अब आप जिस जगह अपने ईमेल सब्सक्रिप्शन बटन को लगाना चाहते हैं वहां पर Add gadget पर क्लिक कीजिए

Step 4 अब Html java script पर क्लिक कीजिए|

Step 5 अब आप जो भी ईमेल सब्सक्रिप्शन widge अपने ब्लॉग में लगाना चाहते हैं उसका html code वहां पर paste कल दीजिए और Save पर क्लिक कर लीजिए

Emil subscription widge kaise edit kare -

सबसे पहले आपको इस html कोड को html मैं पेस्ट करना है वहां आपको इसमें कुछ बदलाव करने पड़ेंगे

जैसे [your blog uri] यहां आपको अपने ब्लॉग की uri को पेस्ट करना है जो bassically आपके blog की

Feedberner मैं मिल जाएगी जैसे मेरे ब्लॉग की uri

http://feeds.feedburner.com/news4blog/BLOG URI

• [FB URL] की जगह आपको अपने फ़ेसबुक का यूआरएल डालना है जैसे https://www.facebook.com/news4blog

•[Twitterurl] की जगह

https://www.twitter.com/news4blog

•[google+ url] repace

https://plus.google.com/101438893480071463587

•[Rss url] replace by

http://feeds.feedburner.com/howbloggerz

•[Pinterest url] Your pint url

• [Twitter Username] repace by @news4blog

• [Fb Page Name] Replce by news4blog

इस पोस्ट में हमने आपको बताया कि apna Blogger Ke Lia Stylish and Beautiful Email subscription Box कैसे add करें email subscription box लगाने से कोई भी आपके ब्लॉग को सब्सक्राइब कर सकता है और जब कभी भी आप अपने ब्लॉग में कोई पोस्ट डालते हो तो वह आपके user तक पहुंच जाएगा जिससे वह आपकी पोस्ट आसानी से पढ़ सकता है keep support news4blog :)

BOOKS PDF

Thursday

Blogger 3 Stylish and Beautiful Email subscription Box

email subscription से blog को benifits :

Blogger 3 Stylish Beautyful email subscription Box :

Blogger ma Stylish subscription box kaise add kare :

Emil subscription widge kaise edit kare -

No comments:

Post a Comment