Awesome Colorful Newsletter Box Widget for Blogger Blogs

Providing Newsletter using Feedburner or any other service is a great way to engage with your users through email medium. People can subscribe to your blog and they will get email updates on regular basis if they like your blog and wanna get updated regularly. They can just pump in there email address and then verify it by going to their email and click a small link and that’s it he becomes your subscriber but now thing comes is how to get people subscribe to your email updates. Well the ones easy way is using stylish newsletter boxes which you add to your website and when people read any of your post and they see that box they can subscribe to your updates.

Well I just grabbed a beautiful newsletter box which you will like and your readers will also get attracted by it. Well codes are given below you just need to follow and paste all the codes as mentioned and that it you box will be ready for getting visitors.

1. Go to Blogger > Template > Edit HTML

2. Now press Ctrl + F and search for ]]></b:skin> tag and paste below codes above it.

.newsletter_box{display:block;width:1006px;position:relative;height:130px;background:#FFF 30px 29px no-repeat url(http://i.imgur.com/5zAio.png);border:1px solid #E0E0E0;margin:20px auto}.newsletter_header{background:url(http://i.imgur.com/59wbz.png) repeat-x;height:18px}.newsletter_box .news_title{display:block;width:190px;height:30px;font-size:22px;color:#929083;position:absolute;top:46px;left:148px;font-family:Segoe UI}.newsletter_box p{display:block;width:262px;font-size:13px;color:#929083;position:absolute;top:28px;left:315px;line-height:18px;border-left:5px solid #ebebeb;padding:10px 0 10px 25px}.newsletter_box .newsletter_form{display:block;width:325px;position:absolute;top:22px;right:35px}.newsletter_box .newsletter_form label{display:none}.wpmlerror{display:block!important;width:150px!important;position:absolute!important;top:30px!important;left:100px!important;text-align:left;margin:0!important;padding:0!important}.feedbutton .button{display:block;position:absolute;right:-5px;top:17px;font-size:12px;font-family:Tahoma;border:0;padding:8px 15px}.feedbutton input{color:#FFF;background:#00a5f0}.feedbutton input:hover{color:#FFF;background:#F06;-webkit-transition:ease-in .3s}.feedbutton input:active{color:#FFF;background:#A5E919}.feednewsletter input.emailfield{width:210px;background:#EDEDE5;display:block;position:absolute;right:95px;top:17px;border:0;padding:7px}

3. Now you have successful pasted the CSS now just click on Save Template and if you wanna edit this you can edit it later.

4. Now its time for the HTML you just need to paste the below codes in your new HTML/JavaScript Gadget which you can add from Layout > Add Gadget.

<section class="newsletter_box  round-me" id="gonewsletter"><div class="newsletter_header"></div><section class="news_title"><strong>NEWS</strong>LETTER</section><section><p>Sign up with your email to get updates about new posts on how to's tuts and other articles.</p></section><section class="newsletter_form"><div class="feednewsletter"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HackXack', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" class="emailfield" /><span class="feedbutton"><input type="submit" value="Subscribe" class="button" /></span><input type="hidden" value="HackXack" name="uri" /><input type="hidden" name="loc" value="en_US" /></form></div></section></section>

5. Now just replace the above name with your FeedBurner Username and that’s it just hit save and refresh your blog, if you think that width or height is more or less you can just configure it from the CSS if you have some knowledge, have fun and share this with all your friends.

[Source]