Awesome Colorful Newsletter Box Widget for Blog of Blogger

Providing write up victimisation Feedburner or the other service could be a good way to interact together with your users through email medium. people will subscribe your blog and that they can get email updates on regular basis if they like your blog and wanna get updated frequently. they'll simply pump in there email address so verify it by getting to their email and click on alittle link and that’s it he becomes your subscriber however currently issue comes is a way to get people subscribe your email updates. Well those simple method is victimisation trendy write up boxes that you raise your web site and once people browse any of your post and that they see that box they'll subscribe your updates.

Well I simply grabbed a good looking newsletter box that you'll like and your readers will get attracted by it. Well codes area unit given below you only ought to follow and paste all the codes as mentioned which it you box are going to be prepared for obtaining visitors.

Demo!

Follow This Steps -
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.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=rnhckr', '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="rnhckr" 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.

You Also Like:

How to Add Social Media and Newsletter Buttons for Blog of Blogger

Sliding Social icons with Hover effect for Blog of Blogger