Wednesday, July 8, 2015

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 tosubscribe 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 abeautiful 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=
bishalblogs", "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 bishalblogs 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.

Unknown

Author & Editor

Welcome To Bishal's Blog And Let Me First Introduce Myself. I’m Bishal Bhandari From Nepal And I Manage Bishal's Blog. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 16 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet, Loves Visiting New Places And I Like To Make New Friends From Around The World And Love To Share My Knowledge. Here At Bishal's Blog, I Share Everything With All Visitors, Subscribers And Lovers Which I Have Learned Over The Time, And In Last Few Years.

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there

 
biz.