Home / blog design / How To Add Stylish Email Subscription Widget for Blogger

How To Add Stylish Email Subscription Widget for Blogger

In previous post I wrote about what is feedburner and how to add it to blogger. Blogger comes with default email subscription widget that's not looking professional and eye catching. If you don't like it and want to use a professional stylish email subscription widget then this post will help you a lot. Today i am going to share best stylish email subscription widget for blogger.

Stylish Email Subscription Widget for Blogger

Here is 7 best stylish email subscription widget. Now choose according to your blog design and follow the steps given below:

  • Dark Background

<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/AVvXsEhCbvxmYSerHyvIJq6ZY7GfsnvwvgSzJFa04nB5tN7pbzyuBb4YfF-Q6pg6OkLRIhyTLJDMrJkQuHjHYWOFh7Q3Yxs-3NmB9vWy-6uvTjXSYZlpRROx8MJyXCj4tNTfiNjDUx4LymdXMCx6/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 Feedburner uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Feedburner ID]'/>
    <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>
Replace [Your Feedburner uri] with your feedburner url and Your Feedburner ID with your feedburner id. Also change [Fb url], [Twitter url], [Google+ url], [Pinterest url], [RSS url] with your own url. If you want to remover any social option then delete <li> tag. Ex- If you want to delete google+ then delete {<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>} .

  • Simple Pop-up 


    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/> <div id='byard-emailsubsocial'> <div class='heading'> Sign Up in Seconds </div> <p>Sign up with your email address to receive hot updates straight in your inbox.</p> <div class='emailsub'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feedburner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type='text' name='name' placeholder='Your Name' /> <input type='text' name='email' placeholder='Your Email' /> <input type="hidden" value="BloggerYard" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input value="Sign Up Now!" class="button" type="submit" /> </form> </div> <p id='credits'>Powered By : <a href='[Your Feedburner uri]'>Text</a></p> </div> <style type='text/css'> #byard-emailsubsocial { width: 300px; height: 330px; border: 1px solid #ddd; border-radius: 5px 5px 0px 0px; } #byard-emailsubsocial .heading { padding: 15px 25px; line-height: 35px; font-size: 26px; font-weight: 600; font-family: open sans; color: rgb(170, 170, 170); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(247, 247, 247); } #byard-emailsubsocial p { font-family: open sans; font-size: 13px; color: rgb(170, 170, 170); line-height: 25px; padding: 10px 20px 0 20px; margin: 0; } #byard-emailsubsocial .emailsub { padding: 0px 20px 10px 20px; } #byard-emailsubsocial .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; } #byard-emailsubsocial .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; } #byard-emailsubsocial .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; } #byard-emailsubsocial .emailsub .button:hover{ background: #DD7761; } #credits { margin: 0 auto!important; margin-top: -10px!important; width: 160px; } </style><div id='byard-emailsubsocial'><div class='heading'>Sign Up in Seconds</div><p>Sign up with your email address to receive hot updates straight in your inbox.</p> <div class='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feedburner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type='text' name='name' placeholder='Your Name' /><input type='text' name='email' placeholder='Your Email' /><input type="hidden" value="BloggerYard" name="uri"/><input type="hidden" name="loc" value="en_US"/><input value="Sign Up Now!" class="button" type="submit" /></form></div><p id='credits'>Powered By : <a href='[Your Feedburner uri]'>Text</a></p></div> <style type='text/css'>#byard-emailsubsocial {width: 300px;height: 330px;border: 1px solid #ddd;border-radius: 5px 5px 0px 0px;}#byard-emailsubsocial .heading {padding: 15px 25px;line-height: 35px;font-size: 26px;font-weight: 600;font-family: open sans;color: rgb(170, 170, 170);text-align: center;text-shadow: 0px 1px rgba(255, 255, 255, 0.75);background: none repeat scroll 0% 0% rgb(247, 247, 247);}#byard-emailsubsocial p {font-family: open sans;font-size: 13px;color: rgb(170, 170, 170);line-height: 25px;padding: 10px 20px 0 20px;margin: 0;}#byard-emailsubsocial .emailsub {padding: 0px 20px 10px 20px;}#byard-emailsubsocial .emailsub input {color: rgb(170, 170, 170);padding: 10px;margin-top: 10px;font-size: 15px;font-family: open sans;width: 92%;border: 1px solid #ccc;border-bottom: 2px solid #ccc;border-radius: 5px;transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;}#byard-emailsubsocial .emailsub input:focus {border-color:#F4836A;outline: none;box-shadow: 0 0 2px 1px #F4836A;}#byard-emailsubsocial .emailsub .button {background: #F4836A;color: white!important;border:none;outline: none;border-bottom: 3px solid #B3614E;transition:background .4s linear;width: 90%;margin-right: 5%;margin-left: 5%;font-weight: 600;cursor:pointer;}#byard-emailsubsocial .emailsub .button:hover{background: #DD7761;}#credits {margin: 0 auto!important;margin-top: -10px!important;width: 160px;}</style>
Replace [Your Feedburner uri] with your feedburner url and Your Feedburner ID with your feedburner id.

  • Simple widget with social menu


<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/AVvXsEiMG-FIJy-ny3e5yhyeX2X2hDMqmWYvJdd6RnhoqBIHY23WRdClwjZ2Y4H6fbTWwM1yU9XEgUWAQN8Kaqo5L2qu40YoR_T9pqf_Wm8G4M7uDTcCVMy2Z0bVBCPyU29kIjXWhtomsbPaUw3K/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 Feed Id]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Feed Id]'/> <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>
Change the red marked text with your own id and url.

  • Simple and clean



<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xFlIACWm1vJ6PUDvYIrf2ybEHZZ7X_PKOQWPk6_Fu9ItX7DDbEBNjxtAqzzv8jn5-dxNmOjPkXeHZClC86m_MRk1xxFKaBI4h9r3m0S3LB8OZORG6MPjLkdqq0kJjwhH69rIhfQXsOig/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaiH-CwHh1mjbA1D0TrjaVgI2EVIXEry1IM9IDxmaNq9u8ElpSc6cL-hBVUuF28JXSZ6-b-qltqkAw8NCgnNZZeFCqZbIpyCMJpYDD4jHyjYMzUFdKYAxlvnulmSnghNmP9ZQ_DFO7jkzF/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidut2R21yFYfcEQqMd81EjqNm7mRBeOoMpBS_GsWTuFBjBkdJTS7uLCEd-E5MhD73B6gx6iZAaiGHNNxOBf6JEDFr_a8YIdVzr7YUFFW7ozhoqxRnayb4IFbWzYN4NnErf5bW9AF1vKl5k/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwF_b1-RabeVAEB9wWGACg6Vmf0db9WD24CuTZGF_d6eE-in_KKW0BnC0tym6bncA323n0nPQHIy-z9bkh797MCcdmwwmy4v8bCUwm4FYXa2dcdbCupUoark_yv9NqTNoK0BLKMD7V7Xx/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>

<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our newsletter & get update right in your inbox</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="YOUR FEEDBURNER ID" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>
Replace YOUR FEEDBURNER ID with your feed url.

  • Clean Flat UI


<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='byard-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p> 
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="BloggerYard" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />

</form>
</div>

<p id='credits'>Powered By : <a href='#'>Email</a></p>

</div> 

<style type='text/css'>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
</style>
Change YOUR FEEDBURNER ID with your feed ID.

  • Letter's Cover style



<style type="text/css">
#LS-Newsletter4-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWnWzjh0x9gRabqRc7kcSqt18mqPsArvhiRrljY1YLTynA0GxcdtUITGj_ez0Am5AG8l5Lg6yeDZq4c6FU_W9AZAWcKnzz6x-wR7Ymyus3YmzizI4m5UCM-xkEzeii-OJboVGnu1kugE/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#LS-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-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#LS-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#LS-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="LS-Newsletter4-Box">
    <form id="LS-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=xyz" 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="YOUR FEEDBURNER ID" 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/AVvXsEiq1oPYvxr9dABSueXdXhsz-M_Vr39qkCcXUDqcgMhCnHicQo-bp2iaL3De1RTviJQlG5KwaMYOAV5fi-ppZiJ7E7K4QaOFp6qoUpoPfJ2zY1EYZAVExl7m2y7SfZgMgLCjlqB3wwFjIKw/s1600/blank.gif" id="sbutton"/>
    </form>
</div>
Change YOUR FEEDBURNER ID with your feed ID.

  • Dark background with red border


<style>
#Subscribe-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:2px
solid #FF0000;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#Subscribe-box h1{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}
#Subscribe-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#Subscribe-box .submit{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:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#Subscribe-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#Subscribe-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<div id='Subscribe-box'><h1>Subscribe To Get FREE Updates!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;YOUR FEED URL &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='Feedburner Id'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
Replace YOUR FEED URL with your feedburner url and Feedburner Id with your feedburner id.

How To Add These Stylish Subscription Widget To Blogger

1. Log in to your Blogger account-> Layout -> click on the 'Add a gadget' -> HTML/JavaScript
2. Now copy and paste any above code.
3. Configuration everything with your own url, id and username.
4. Now Save test it.

That's all. If you have any problem regarding this then let me know by comment below. Hope this tutorial was helpful. If yes then don't forget to share and subscribe. Happy blogging.

How To Add Stylish Email Subscription Widget for Blogger How To Add Stylish Email Subscription Widget for Blogger Reviewed by avi on April 09, 2017 Rating: 5

You May Also Like

Subscribe to: Post Comments ( Atom )

Post Comments

No comments:

Powered by Blogger.