10 best email subscription box

नमस्ते दोस्तों आज मैं आपको 10 एैसे Email subscription box देने वाला हूं जिस्से आपके ब्लाॉग को एक अच्छा look मिलेगा। आप तो जानते ही होंगे की ब्लाॉगर ब्लाॉग पर मिलने वाला email subscription box का design इतना अच्छा नही होता है की आप उसे अपने ब्लाॉग पर ज्यादा समय तक लगा सकें। क्योंकि इस्से आपके ब्लाॉग के look और visitors पर फर्क पड़ता है। जब आपके ब्लाॉग को कोई देखता है तो वो आपके ब्लाॉग के design को भी देखता है। जरा सोचिये अगर आप कोई ब्लॉगर पर ब्लॉग बनाते हैं जिसमें ब्लॉगर पर मिलने वाली simple template लगी हो और उसमें कोई widgets ना हो तो फिर वो ब्लॉग कैसा लगेगा। सायद आप भी एैसे ब्लाॉग पर कभी नहीं जाना चाहेंगे। इसी लिए आज मैं आपको 10 एैसे email subscription box दे रहा हूं जिनसे आपके ब्लाॉग का look देखने में बहुत अच्छा हो जाएगा।

Email subscription box क्यों लगाना चाहीये। ? 
अगर आप कोई नई पोस्ट लिखते हैं तो आपके visitors को कैसे पता चलेगा की आपने अपने ब्लाॉग पर कोई नई पोस्ट लिखी है। Email subscription box ब्लाॉग पर लगाने से आपके visitors आपके ब्लाॉग को email के जरिए subscribe कर सकेंगे।अगर आपके ब्लाॉग को कोई subscribe करता है तो उसे आपके ब्लाॉग की हर नई पोस्ट का पता अपने email पर चल जाएगा। email subscription box blog पर लगाने से आपको visitors बढ़ाने में आपको मदद मिलेगी।

1  ये Email subscription box मुझे सबसे अच्छा लगता है क्योंकि इसमें email subscription box के साथ designer social share button भी है। इस email subscription box का color सफेद और लाल है। ये email subscription box देखने में काफी अच्छा है। हो सकता है जब आप लोगों ने हमारे इस email subscription box की picture देखी होगी तब आप लोगों को लगा होगा की इस email subscription box के साथ हमारे ब्लॉग का logo भी इस email subscription box में लगा होगा लेकिन मैं आपको बता दूं की आप लोगों को बिलकुल भी ऐसा सोचने की जरूरत नहीं है। ये logo सिर्फ इस picture में है ये logo email subscription box में नहीं है।

email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें

<style type="text/css">
.hbzsignup-form {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbdxJs8H0yoaG4qcj11WIRn8RqnPYR2b0VCzrDYKX1W6ofzDyMmgOtc-kd0W0EtJGZ0OqrUI-5jIl_th6xf0lSqgfkPTdnR8elVfqUakYcYpDiKiAYDcf0lUaopALjKDhbTsDy_nmdJ0Q/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/AVvXsEhWwY7B4clMW-tkSgKTPJ2ZvHtxMbxprcdEH6ctl33dQml9CfP7V0u9-NhqtWvb3huRh7ZbcLfw1HJd5vxbmuUqKDZN_KoWL9o36Qn9wUqxu4CnZbw-R3dKmBVXO-n_mFsHsv-uspLTWwVe/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(&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='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>
 </tbody></tbody></table>
</div>


2   ये email subscription box देखने में छोटा है लेकिन ये email subscription box seo friendly है।
email subscription box

ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<style> 
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px 
solid #1A2638; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h2{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparentborder:medium none;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:90%; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{border:1px 
solid #369a18;background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:10px;text-shadow:0 1px 2px #000;width:95%; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit a:active{background: #205F0D} 
</style>
 
 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id="mbt-sub-box"><h2>Subscribe Now</h2><form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=supportmeindia&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='supportmeindia'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe Now'/></center></form></div> 
</b:if>


3 इस email subscription box में आपको facebook and twitter share button मिल रहा है। ये email subscription box देखने में छोटा है और इसका color देखने भी ऐसा है की ये हर ब्लॉग पर देखने में काफी अच्छा लगेगा।
email subscription box

ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<style type="text/css">
.hbzsub {
    background-color: #1E293B;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(30, 41, 59);
}

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

.hbzform-inner h4 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font: bold 18px/40px "trebuchet MS","Tahoma";
}

#hbzemailbox {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 7px 0px 0px 7px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}

#hbzemailbutton {
    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;
}

#hbzemailbutton:hover {
    background-color: #1E293B;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px #ddd;
}

.hbzsocial-like {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAxN-u7utFiH9JLB8SeYIqF7ZsLvlnzSV_iOPY2bEOEi_8800u_iztDY3IkkOzIXd6ZMyYCfrZC9fGEymda0NdFQ__NZgqDXseco_gdxmEnkdE3L4UCRinSowBBPXxpLcLbmsjkOcKFd7S/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
    width: 250px;
    height: 120px;
    margin: 10px auto;
}

.hbzfb-likes {
    margin-top: 90px;
    margin-left: 20px;
    position: absolute;
    display: block;
    box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}

.hbztw-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="hbzsub">
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Get Posts In Your Inbox</h4>
  </div>
  <div class='hbzemailform'>
   <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='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </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="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>



4
email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<style>
.smi-subscribe {
background: url("https://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/color-chronicl.gif") repeat scroll 0 0 transparent;
margin: 0 -10px;
padding: 5px 0;
}
body {
color: #272727;
font-family: Georgia,"Times New Roman",Times,serif;
}
body {
color: #272727;
font-family: Georgia,"Times New Roman",Times,serif;
}
.sidebar .subscribe_wrapper h5 {
color: #FFFFFF;
}
.sidebar h5 {
color: #272727;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-size: 15px;
font-weight: normal;
padding: 4px 0 10px;
}
h5, h6 {
letter-spacing: 2px;
text-transform: uppercase;
}
.sidebar .subscribe_wrapper h5 {
color: #FFFFFF;
}
.sidebar h5 {
color: #272727;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-size: 15px;
font-weight: normal;
padding: 4px 0 10px;
}
h5, h6 {
letter-spacing: 2px;
text-transform: uppercase;
}
.subscribe_wrapper {
background: url("https://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/pattern-chronicl.png") repeat scroll 0 0 #333333;
color: #CCCCCC;
font-size: 14px;
line-height: 20px;
padding: 38px 50px 18px 38px;
}
.emailButton {
background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
width: 100%;
}
.emailText {
background: url("https://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
border: 0 none;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
color: #444444;
margin: 0 0 15px;
padding: 10px 40px;
text-decoration: none;
width: 70%;
}
input, textarea {
font-family: Georgia,"Times New Roman",Times,serif;
}
.subscribe_wrapper {
color: #CCCCCC;
font-size: 14px;
line-height: 20px;
}
.post-body .emailButton {
width: 300px;
}
.emailButton {
background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
width: 100%;
}
</style>

<div class="smi-subscribe">
<div class="subscribe_wrapper">
<h5>Subscribe Kare !</h5><p>enter your email address and get owr new post delivery update free.</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=supportmeindia', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="https://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="supportmeindia" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Email Id Likhe..." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" />
<input class="emailButton" type="submit" value="Signup Kare! (FREE)" title="" />
</form>
</div>
<p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="supportmeindia.com/top-5-email">widgets</a></p>
</div></div>

5
email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें

<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/AVvXsEhWwY7B4clMW-tkSgKTPJ2ZvHtxMbxprcdEH6ctl33dQml9CfP7V0u9-NhqtWvb3huRh7ZbcLfw1HJd5vxbmuUqKDZN_KoWL9o36Qn9wUqxu4CnZbw-R3dKmBVXO-n_mFsHsv-uspLTWwVe/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(&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='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>


6
email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<style>
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghP7W93L2RNzmlhQPTwWajPIVtMiazHzVVsxmQdQsfxhgwmPgM3GhjHXli9LvtYpVwYv2SccHtLvXPIfH6K2htWfUmdSggHHDS97Fbvarg99Br1mKmby9i29BZfbKz_x7r2DF4QbnGSaAn/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4AYM9odgZhyphenhyphenYbKx9gGxd6EKIuUy_ZRv_UjkJlKlcI4Rmq_eOMnNGHhQ4XSz-Ya8ShqvEKerwbnGMgGTgD85ansCYKAHvSu9k7wX4uVAlEDIiJwOwVB5nIAkS6FDxGEGfq6LpTpmuUAEI/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKt9Mv7oSnA6wv6S3sCKZ93SF-n9LWS7YQsRSKl8QuaVBSLLa5p-XHn4pG3wJTYpAapp_dqHmF33k1SRUubGWOerdDfKrVnaQ33fLnP3FOTu5VBw5daXOsj-VJ7rUefz3b7o2AWclc09nW/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;} .credit p{ font-size: 10px;}
</style>
<center>
<div align="center" id="supportmeindia-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 264px">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=supportmeindia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="supportmeindia_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Apka Naam" /><br />
<input class="email" id="supportmeindia_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="supportmeindia" /><input name="loc" type="hidden" value="en_US" /> <input id="supportmeindia_Submit_Text" style="width: 130px;  padding: 5px 0;" type="submit" value="Submit Now" /></form>
<p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="https://www.supportmeindia.com/top-5">widgets</a></p>
</div>
</div>
</center>


इस email subscription box में आपको social media share button के साथ facebook page like box भी मिल रहा है।
email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<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/AVvXsEhWwY7B4clMW-tkSgKTPJ2ZvHtxMbxprcdEH6ctl33dQml9CfP7V0u9-NhqtWvb3huRh7ZbcLfw1HJd5vxbmuUqKDZN_KoWL9o36Qn9wUqxu4CnZbw-R3dKmBVXO-n_mFsHsv-uspLTWwVe/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(&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='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>
     

8
email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<style>
#responsiveness {
padding: 15px 25px 20px;
line-height: 35px;
text-align: center;
background: none repeat scroll 0% 0% #1E1E1E;
margin: -15px;
border-radius: 3px;
}
#responsiveness h5 {
font-size: 17px;
font-weight: 700;
font-family: 'PT Sans',sans-serif;
color: #FFF;
padding: 0px;
text-transform: uppercase;
line-height: 1.2;
margin: 10px 0px 15px;
letter-spacing: 0.01em;
text-align: left;
}
input.placer {
color: #333;
padding: 15px;
font-size: 14px;
font-family: PT Sans,sans-serif;
border: 1px solid #EEE;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
margin: 10px auto 0px;
border-radius: 3px;
width: 89%;
}
input.button {
background-color: #BA1A00;
color: #FFF;
font-weight: 400;
cursor: pointer;
border-radius: 4px;
text-transform: uppercase;
font-family: PT Sans,serif;
padding: 10px 15px;
border: medium none;
font-size: 16px;
width: 100%;
margin: 15px auto 0px;
}
input.button:hover{
background: #FFF;
color: #333;
}
</style>
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<div id='responsiveness'>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="https://www.supportmeindia.com/top-5">widgets</a></p>
<h5>Subscribe</h5><form action='https://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=supportmeindia', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true">
<input  class="placer" type='text'  name='email' placeholder='enter your name' />
<input  class="placer" type='text'  name='email' placeholder='enter your email id' />
<input type="hidden" value="supportmeindia" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Subscribe Now" class="button" type="submit" />
</form>
</div>


9
email subscription box

ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'/>
<style>
#supportmeindia-FeedBurner {
border: 1px solid #CCCCCC;
padding: 10px 0;
text-align: center;
width: 298px;
}
#supportmeindia-FeedBurner input[type="text"] {
border: 1px solid #BBBBBB;
font-size: 13px;
margin: 0 0 15px 0;
padding: 10px;
width: 80%;
color:#888;
}
#supportmeindia-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(https://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
}
#email {
background: url(https://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
}
#supportmeindia-FeedBurner input[type="submit"] {
background: #6065f8;
border: 1px solid #192126;
color: #FFFFFF;
cursor: pointer;
font-size: 16px;
font-weight: bold;
height: 40px;
margin-top: 5px;
padding: 8px 0;
text-transform: capitalize;
width: 87%;
}
#supportmeindia-FeedBurner input[type="submit"]:hover {
background: none repeat scroll 0 0 #1319da;
transition: all 0.5s;
}
</style>
<div id="supportmeindia-FeedBurner">
<form onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=supportmeindia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="https://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="supportmeindia" /><p><font size="2" color="#990000">Subscribe, Now <b>And Get Free Email </b> Updates.</font><br/><br/>
<input type="hidden" value="en_US" name="loc" />
<input type="text" id="name" name="name" onfocus="this.value=''" value="Enter Your Email" placeholder="Enter Your Email" />
<input type="submit" value="Subscribe Now!" id="submit" name="submit" />
</p></form>
</div>
<p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="https://www.supportmeindia.com/top-5">widgets</a></p>


10
email subscription box
ब्लॉग में इस email subscription box को लगाने के लिए इस code को copy करें
<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(&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='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>
 </tbody></tbody></table>
</div>


अगर आपको मेरी यह नई पोस्ट पसंद आई हो तो इसे अपने दोस्तों के साथ social media पर जरूर share करें और अगर आपको email subscription box अपने ब्लॉग पर लगाने में कोई परेशानी हो रही हो तो मुझे नीचे comment करके बताएँ मैं आपकी पूरी मदद करने की कोशिश करुंगा।

Comments

Popular posts from this blog

Blogspot Blog में Template कैसे बदलें जाने हिंदी में

Blog कैसे बनाएँ जाने हिंदी में