Add Beautiful E-mail Subscription Box For Blogger


Sometimes, our reliable visitors may not be able to view our blog posts. So, they'd like to subscribe via RSS.  Each of the visitor subscribed by RSS would be updated immediately after updating the site. So, it is preety much cool. Visitors will be e-mailed automatically after the update of the website.
But, many of the users have the default blogger Feedburner E-mail Subscription Box which doesn't look preety and attractive. So, in this tutorial, We've brought you guys a beautiful e-mail subscription box for blogger.
So, let's get started;

Add Stylish E-mail Subscription Box For Blogger;

  • Go To Blogger Dashboard and select your blog
  • Click On Layout And Select Add A Gadget(Recommended To Add It On Footer)
  • Then Choose HTML/Javascript
  • Paste the Below Code There;
 <div id='footer-newsletter-wrap'>   
 <div id='footer-newsletter'>   
 <h2 class='title'>Subscribe to our newsletter<span style='color:#f54000;'>.</span></h2> <span>(Get fresh updates in your inbox. Unsubscribe at anytime)</span>  
  <div class='newsletter-inner'>   
 <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bloggersmasher", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'> <input class='newsletter-address' name='email' placeholder='Your Email Address' type='text'/> </td> <td> <input class='newsletter-submit' type='submit' value='Subscribe'/>   
 </td>  
 </tr>   
 </table>  
  <input name='uri' type='hidden' value='newbloggerlab'/>   
 <input name='loc' type='hidden' value='en_US'/> </form>   
 </div> </div> </div>   
 <style> .newsletter-inner { margin-top:15px; } .newsletter-inner .newsletter-address{ color:#fff !important; width:100%; font-size:16px; border:0; background-color:#2B4052; padding:20px 0px 20px 25px; border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .newsletter-inner .newsletter-submit{ width:100%; margin:0px 0px 0px 29px; border:0; background:#a3d14f !important; color:#1E2D3A; font-size:16px; z-index:0 border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; font-weight:bold; padding:20px 20px 20px 20px; } .newsletter-inner .newsletter-submit:hover{ background:#93bc47 !important; } .grid a, .grid a:visited {color:#eeeeee} .grid a:visited {text-decoration:underline} .grid a:hover {color:#cccccc} #footer-newsletter-wrap { background:#1E2D3A; margin: 0 0 0 0; padding: 50px 0 60px 0; } #footer-newsletter-wrap a { color:#66665f; } #footer-newsletter { color:#5b5b5e; width: 520px; margin: 0 auto; } #footer-newsletter h2 { margin: 0px 0 10px 0; padding: 0; border-bottom: none; font-weight: bold; text-transform: none; color: #fff; font-size: 26px; text-shadow:2px 2px #151f28; } #footer-newsletter ::-webkit-input-placeholder { color: #fff; } </style>  

  • Change Bloggesmasher with your Feedbuner URL
  • Save Your Layout
  • Done!
Now, we have successfully added stylish E-mail Subscription Box. If you have any problems, you can ask us below.
Regards,
Nischal Khanal

Share this

Related Posts

Previous
Next Post »