Blogger Blog ke liye Top 5 Email Subscription Widgets

Email Subscription ye widget aapke Visitors ko aapke Blog Post ki Latest Update Email ke zariye bhejta hai. Jaise he aap apne Blog par Koi New Post Publish karte ho to iss Widget ke madhyam se wo Post aapke Visitors tak email dwara automatically send ho jaati hai. Iss widget se aapke blog ko bahut accha fayda milega.

Email Subscription Widget Add Karne ke Fayde kya hai

iska ek he aur bahut important fayda ye hai ki aapke Visitors aapke Blog ke sath humesha connect rahenge. TO iski wajah se aapke Blog par accha sa traffic aapko milta rahega. Aapne Bahut saare Professional Bloggers ko dekha hoga wo humesha apne blog me Email Subscription WIdget zaroor add karte hai taaki unke sabhi Visitors unse connect rahe.

ab neeche me aapke sath kuch Acche Design ke Email Subscription widget de raha hu aapko bas uss widget ka code copy karna hai aur iss post ke last me jo steps honge unko follow karna hai. to isliye post ko last tak padhiye.

Top 5 Email Subscription Widgets for Blogger

Code-:

<style type="text/css">
.jhmsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.jhmform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}
.jhmemailform {
    width: 240px;
    margin: 10px auto;
}
#jhmemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}
#jhmemailbutton {
    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;
}
#jhmemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}
.jhmsignup-form {
    margin-top: 15px;
}
.jhmsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}
.jhmsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}
.jhmsocial-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;
}
.jhmsocial-icons ul li::before,
.jhmsocial-icons ul li::after {
    display: none !important;
}
.jhmsocial-icons ul li a, .jhmsocial-icons ul li a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0U_yPFIdxXh2zgVCD8MjnHqw1_ZBc4GkV9mS7c-7DcsWjs-C2DQusoa2_X7dVbO0SR7tK7uZhTTii91AZOPrec4qu2JEztwvnFTpspBaYAf92trTU3eA9_BgxSrylDKcvuTqYMqroOL4n/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;
}
.jhmsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}
.jhmsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998;
}
.jhmsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}
.jhmsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced;
}
.jhmsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}
.jhmsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39;
}
.jhmsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}
.jhmsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027;
}
.jhmsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}
.jhmsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12;
}
</style>
<div class="jhmsub">
<div class="jhmsocial-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='jhmsignup-form'>
  <div class='jhmform-inner'>
   <h4>Subscribe to my Newsletter</h4>
  </div>
  <div class='jhmemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='jhmemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='jhmemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>

Code-:

<style type="text/css">
.jhmsignup-form {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8Dw0X3aXo9j6_LdJQ0RZOAxyA7OV0Nu7QaL0fb0MYNil9w4XtsMEg9mAqD3WH-Noenvk2rj7iUBWXbIDaD6-G1F1D2YVKbgbbQS7xh9Omk3dm1L1mXotRR-u1LdPdS-lmaORQ3UDca5b/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
}
.jhmform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px "trebuchet MS","Tahoma";
}
.jhmemailform {
    margin: 120px auto 5px;
    width: 215px;
}
#jhmemailbox {
    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;
}
#jhmemailbutton {
    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;
}
#jhmemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}
.jhmsocial-icons {
    margin: 20px 0 0;
    overflow: hidden;
    display: block;
    text-align: center;
}
.jhmsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}
.jhmsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}
.jhmsocial-icons ul li::before,
.jhmsocial-icons ul li::after {
    display: none !important;
}
.jhmsocial-icons ul li a, .jhmsocial-icons ul li a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0U_yPFIdxXh2zgVCD8MjnHqw1_ZBc4GkV9mS7c-7DcsWjs-C2DQusoa2_X7dVbO0SR7tK7uZhTTii91AZOPrec4qu2JEztwvnFTpspBaYAf92trTU3eA9_BgxSrylDKcvuTqYMqroOL4n/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;
}
.jhmsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}
.jhmsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}
.jhmsocial-icons ul li.social-gplus a {
    background-color: #dd4b39;
    background-position: -93px 3px;
}
.jhmsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}
.jhmsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.jhmsocial-icons ul li a:hover {
    background-color: #333;
}
.jhmsocial-like {
    display: block;
    text-align: center;
}
.jhmsocial-like tbody, .jhmsocial-like tbody tr {
    display: block;
}
.jhmfb-likes {
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
}
.jhmtw-follow {
    display: inline
}
</style>
<div>
 <div class='jhmsignup-form'>
  <div class='jhmform-inner'>
   <p>Sign Up for Email Updates</p>
  </div>
  <div class='jhmemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='jhmemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
    <input id='jhmemailbutton' title='' type='submit' value='Sign up'/>
   </form>
  </div>
 </div>
 <div class="jhmsocial-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='jhmsocial-like'>
  <tbody>
   <tr>
    <td class='jhmfb-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='jhmtw-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>  

Code-:

<style type="text/css">
.jhmsub {
    background-color: #1E293B;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(30, 41, 59);
}
.jhmemailform {
    width: 239px;
    margin: 10px auto;
}
.jhmform-inner h4 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font: bold 18px/40px "trebuchet MS","Tahoma";
}
#jhmemailbox {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 7px 0px 0px 7px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}
#jhmemailbutton {
    background-color: #F0553B;
    border: 1px solid #F0553B;
    color: #FFF;
    height: 34px;
    border-radius: 0px 7px 7px 0px;
    margin-left: -4px;
    font-weight: 600;
    cursor: pointer;
}
#jhmemailbutton:hover {
    background-color: #1E293B;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px #ddd;
}
.jhmsocial-like {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNooK-Gmlf-5dHsU7ISCJH8nGzVFhtDXCExqacl0fmZ3dc0bE8aHEbuk_ow680v-or8g-QjwjxAg3oPZ06OVSD1Yfp5Np3neCPw0KwgsJYktJGGJBXFsh-HxzUPYWHqGBzfVo3ghuSKZr/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
    width: 250px;
    height: 120px;
    margin: 10px auto;
}
.jhmfb-likes {
    margin-top: 90px;
    margin-left: 20px;
    position: absolute;
    display: block;
    box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}
.jhmtw-follow {
    display: block;
    margin-left: 152px;
    position: absolute;
    margin-top: 89px;
    box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
    height: 20px;
}
</style>
<div class="jhmsub">
 <div class='jhmsignup-form'>
  <div class='jhmform-inner'>
   <h4>Get Posts In Your Inbox</h4>
  </div>
  <div class='jhmemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='jhmemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
    <input id='jhmemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
<table class='jhmsocial-like'>
  <tbody>
   <tr>
    <td class='jhmfb-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='jhmtw-follow'>
     <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" 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>

Code-:

<style type="text/css">
    .jhmsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
 
    .jhmsube {
        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%;
    }
 
    .jhmemailform {
        width: 235px;
        margin: 10px auto;
    }
 
    #jhmemailbox {
        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;
    }
 
    #jhmemailbutton {
        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;
    }
 
    #jhmemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
 
    .jhmsignup-form {
        margin-top: 15px;
    }
 
    .jhmsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
 
    .jhmsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
 
    .jhmsocial-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;
    }
 
    .jhmsocial-icons ul li::before,
    .jhmsocial-icons ul li::after {
        display: none !important;
    }
 
    .jhmsocial-icons ul li a {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0U_yPFIdxXh2zgVCD8MjnHqw1_ZBc4GkV9mS7c-7DcsWjs-C2DQusoa2_X7dVbO0SR7tK7uZhTTii91AZOPrec4qu2JEztwvnFTpspBaYAf92trTU3eA9_BgxSrylDKcvuTqYMqroOL4n/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;
    }
 
    .jhmsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
 
    .jhmsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
 
    .jhmsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
 
    .jhmsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
 
    .jhmsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
 
    .jhmsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
<div class="jhmsub">
    <div class="jhmsube">Join Our Free Newsletter</div>
    <div class='jhmsignup-form'>
        <div class='jhmemailform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='jhmemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='jhmemailbutton' title='' type='submit' value='Join Us' /> </form>
        </div>
        <div class="jhmsube">Sociliaze with Us</div>
        <div class="jhmsocial-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>

Code-:

<style type="text/css">
#jhm-Newsletter4-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnw1EwNnqzaRY8nt_hWkO0ZtgMuAzNLHKnf-qqKrA5MAg3ckOfLdesSw4z7ElPnufNxsTlIlVVOWWVW3I-8zvneHxDmPOj52JGb0_WuGfefau9H3IVr3udG0ApGGSj4HDx79esd20P2Dg/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#jhm-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#jhm-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#jhm-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#jhm-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}

</style>
<div id="jhm-Newsletter4-Box">
    <form id="jhm-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=codiblog" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUvmb3vShgzsDjzWxvPRBwQZHXLA5KtnDcBF8z7cct2y8aDpKFbRingt4GaK1GhA-PKEmRV1WdFxfbXv19kyjD_bEDEQzyTSCTuyG7gpfxS38TXB9LKkSpww5QIqWtqdoE7KqhJBIqJzE/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

Email Subscription Widget ko Apne Blog me Kaise Add Kare

1. Sabse Pehle aapko apne Blogger Layout Me jaana hai.

2. Waha par "Add a gadget" par click kijiye aur "html/javascript" ko select kijiye.

3. ab aapko apna widget code waha par paste kar dena hai jo aapne upar se copy kiya hai.

Code Me Kya Changes Karne hai

*Sabse Pehla change aapko ye karna hai ki jaha par bhi aapke widget code me aapko  [Your Blog uri] dekhne ko milega waha par aapko apna feedburner link daal dena hai. feedburner link aapko https://feedburner.google.com yaha par visit karke mil jaayega to usse copy karke apne widget code me paste kar dijiye [Your Blog uri] ki jagah par.

* aapke code me jaha par aapko [Fb url] dekhne ko milega waha par aapko apne facebook page ka link paste karna hai.

* apne widget me jaha par aapko  [Twitter url] aur [Google+ url] dekhne ko milega waha par aapko apna Twitter aur Google Plus link paste kar dena hai.

* [RSS url] ki jagah par bhi aapko apna feedburner link daal dena hai.

*  [Pinterest url] [Twitter Username]  [Fb Page Name]  in sabhi ko hata ke apne khud ke social media links ko waha par paste kar dijiye.

* ab "save" par click kijiye.


bas aapka widget ab poori tarah se add ho chuka hai.

Thank You-:
Thanks to howbloggerz and codiblog. Jinenhe ye code design kiya hai. Thank you Very Much

Ye bhi padhiye-:

WordPress par free blog Kaise banaye

Blog Post ko Google Index Kaise Kare

Google Adsense Account Me Apna Bank Account Kaise Add Kare

Blogger Blog ke liye Top 5 Responsive Templates

Blogger Blog Me Facebook Page Widget Kaise Add Kare


to dosto aaj humne sikha ki apne Blogger Blog me Email Subscription Widget kaise add karte hai. Ye post kaisi lagi aap hume neeche comment karke bata sakte hai aur iss post ko apne dosto ke sath bhi share kijiye. Dhanyawad!

Read More

Blogger Blog ke Liye 5+ Social Media Follow Widgets

aaj hum jaanenge ki Blogger Blog me Social Media Follow buttons widget kaise add karte hai. social media follow button humare blog ke liye bahut zaroori hota hai. Social Media Widget Add karne se aapke visitors aapse connected reh sakte hai. Jab bhi aap apne blog par koi bhi new post publish karte hai to aap use social media par share kar sakte hai jisse wo saari updates aapke visitors ko milti rahegi. Social Media widget add karne se humare blog ka design bhi accha dikhta hai aur isse visitor aapke Blog par aana pasand karte hai.

Blogger Blog me Social Media Follow Buttons kaise Add kare

sabse pehle ye code aapko apne blog ke html me <head> section me add karna hai. aap neeche diye gaye photo me dekh sakte hai ki maine kis tarah se code add kiya hai.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

1. ab aapke blog ke "layout" me jaaye.

2. uske baad "Add A Gadget" par click kare.

3. ab "html/javascript" select kare.

 ab dosto maine neeche jo codes diye hai unme se aapko jo bhi widget pasand ho uska code leke aapko "html/javascript" ke box me paste kar dena hai aur "save" par click karna hai.

Blogger ke liye 5+ Social Media Follow Widgets

<style>

.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027}

</style>

<div class="to-social-follow">

<a href="#" class="fa fa-facebook" target="_blank"></a>

<a href="#" class="fa fa-twitter" target="_blank"></a>

<a href="#" class="fa fa-google" target="_blank"></a>

<a href="#" class="fa fa-linkedin" target="_blank"></a>

<a href="#" class="fa fa-youtube" target="_blank"></a>

<a href="#" class="fa fa-pinterest" target="_blank"></a>

</div>

Code-:

<style>
ul.jaaniyehindime-follow-buttons a:hover{color:#03c9a9}.jaaniyehindime-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.jaaniyehindime-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.jaaniyehindime-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.jaaniyehindime-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.jaaniyehindime-follow-buttons.b-title i{margin:0 auto 10px;display:block}.jaaniyehindime-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='jaaniyehindime-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-google"></i>google +</a></li>
<li><a href='#'><i class="fa fa-pinterest"></i>pinterest</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>instagram</a></li>

</ul>

Code-:

<style>
.jaaniyehindime-social-buttons ul{padding-left:0;list-style:none}.jaaniyehindime-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.jaaniyehindime-social-buttons ul li{margin-bottom:10px;width:100%}.jaaniyehindime-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.jaaniyehindime-social-buttons li a.social-btn-facebook{background:#3b5998}.jaaniyehindime-social-buttons li a.social-btn-twitter{background:#1da1f2}.jaaniyehindime-social-buttons li a.social-btn-youtube{background:#cd201f}.jaaniyehindime-social-buttons li a.social-btn-instagram{background:#405de6}.jaaniyehindime-social-buttons li a.social-btn-google{background:#dd4b39}
</style>
<div class="jaaniyehindime-social-buttons">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li>
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul>
</div>

Code-:

<style>
.s-text strong,.social-counter{font-weight:900}.jaaniyehindime-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.jaaniyehindime-socials a span,.jaaniyehindime-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.jaaniyehindime-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"}
</style>
<div class="jaaniyehindime-socials">
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>

Code-:

<style>
ul.jaaniyehindime-social-share{padding:0;margin:0;overflow:hidden}ul.jaaniyehindime-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.jaaniyehindime-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.jaaniyehindime-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.jaaniyehindime-social-share li a.facebook{background:#436feb}ul.jaaniyehindime-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.jaaniyehindime-social-share li a.twitter{background:#43c9eb}ul.jaaniyehindime-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.jaaniyehindime-social-share li a.google{background:#f14133}ul.jaaniyehindime-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.jaaniyehindime-social-share li a.youtube{background:#b00}ul.jaaniyehindime-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.jaaniyehindime-social-share li a:hover{opacity:.7}ul.jaaniyehindime-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.jaaniyehindime-social-share li span.scount-number{margin-top:5px;color:#333}ul.jaaniyehindime-social-share li:nth-child(2n){margin-right:0}
</style>
<ul class="jaaniyehindime-social-share">
<li> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <span class="scount-number">44,143</span> <span>Fans</span></li>
<li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li>
<li> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li>
<li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li>
</ul>


Changes-:

dosto inme se jo bhi widget aapko pasand ho uska code le ke aap apne blog me paste kar sakte hai. Lekin yaad rakhiye inn codes me jaha par aapko "#" dikhega waha par aapko khud ka social media link daal dena hai. 

Last Words-:

To dosto aaj humne Dekha ki Blogger ke liye Social Media Follow button kaise add karte hai. maine jo steps bataye hai unhe dhyan se follow kijiye. aur agar aapko iss article ke baare me kuch bhi sawal puchne hai to aap neeche comment kar sakte hai. Dhanyawad!

Read More