Learn How to Add Professional Email Subscription Box in Blogger FeedBurner Subscribe Box for blogger blog. Add Beautiful Email Subscription Box in Blogger Blog within seconds. Cool and awesome subscription box widget for blogger blog.

How to Add Email Subscription Box in Blogger?
1. Go to Blogger Dashboard >> Layout >> Add a Gadget
2. Select HTML/JavaScript gadget
3. Copy the below code and paste it in the code area.
<style>#subscribe-box{width:299px;border:1px solid #aaaaaa;border-radius:2.98px;padding:2.98px 0} .subscribe-box-wrapper{background:url(http://4.bp.blogspot.com/-FnFdlcUoQ70/VM3J2JR7itI/AAAAAAAABcM/TosZcCPmujM/s1600/background.png) repeat scroll 0 0 #ffffff;color:#111111;font-size:13px;line-height:19px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .subscribe-box-form{clear:both;display:block;margin:10px 0}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto} .subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#ffffff url(https://lh6.googleusercontent.com/-8NDOpOYN7b4/UcvO6A6i_YI/AAAAAAAACAk/tTYb0kLxcqg/s124/icons.png) no-repeat 0 -26px;border:1px solid #cccccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 39px;width:99%} .subscribe-box-email-button{background:#0099ff;border:1px solid #0080ff;box-shadow:0 1px 0 rgba(254,254,254,0.5) inset, 0 1px 0 transparent;color:#ffffff;cursor:pointer;font-family:verdana;font-weight:699;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.5);text-transform:uppercase;width:100%} .subscribe-box-email-button:hover,.subscribe-box-email-button:focus{background:#179ffa} .subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.6) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.6) inset;box-shadow:0 1px 4px rgba(0,0,0,0.6) 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 3px 5px rgba(0,0,0,0.2);background:#FFFFFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4.2px 4.2px 4.2px} #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaaaaa;font-family:cambria;font-size:13px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}a.social-icons{margin-right: 5.1px;height:46px;width:46px;}a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}</style> <div id="subscribe-box"><div class="subscribe-box-wrapper"> <br><p>Subscribe To Our Email Newsletter to Receive Quality Updates Absolutely Free</p><a class="social-icons" href="http://feedburner.google.com/fb/a/mailverify?uri=TrickzBucket" target="_blank"><img src="http://3.bp.blogspot.com/-ugJyU9Pxcs4/VM3J6Cfj8gI/AAAAAAAABcU/zMAdXj1Jysk/s1600/Subscribe.png"></a><div class="subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=TrickzBucket" class="subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TrickzBucket', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="TrickzBucket"><input name="loc" type="hidden" value="en_US"><input class="subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter Your Email Address..."><input class="subscribe-box-email-button" title="" type="submit" value="Subscribe Now !"></form></div></div></div></div>
Customization:
- Change TrickzBucket with your feedburner ID.
- Change 299px with your desired width of the box.
Final Words:
This is the awesome widget for your blogger blog which will give a professional look to your blog. Widget credit goes to BloggerCell, for making this superb widget. All the emails will be delivered by FeedBurner. I hope this tutorial helped you. Leave your comments below, if you have any question and do not forget to share our work with your friends.
COMMENTS