Hey guys do you want to create a cool colorful newsletter box for your blog just like visible below.
well copy below CSS and HTML and you will have any awesome newsletter box ready for readers activation.
CSS
Code:
.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[/url] 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}
HTML
Code:
<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=HackingUniversity', '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="HackingUniversity" name="uri" /><input type="hidden" name="loc" value="en_US" /></form></div></section></section>
Now you just need to replace the red text above with your own Feedburner username thats it box is ready for some action.
Before you post, read our: 
