{MW} personal.blog Home » Widget » Subscription Box like Wordpress

Subscription Box like Wordpress

HTML

<div class="mbtbar"><div class="count">Learn Free Pro Tips n Triks daily</div><div class="subicons"><div class="rssicon"><a href="http://mwcrew10.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/MWcrew" target="_blank" rel="nofollow">Fb</a></div><div class="twittericon"><a href="http://twitter.com/wafiezpunk" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>

<div class="mbt-email">

<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MuhammadWafi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Muhammad Wafi" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
<div style="padding-left:10px"><a href="http://feeds.feedburner.com/MuhammadWafi"><img src="http://feeds.feedburner.com/~fc/MuhammadWafi?bg=FF9900&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="MWcrew" />
</a></div></div></div></div>

CSS

<style>

.mbt-email{
background:url() no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 0px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#58ACFA
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:200px;
color:#666;}


mbtbar{width: 100%; float: left;}

.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: transparent; height: 30px; line-height: 30px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}

.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 270px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}

.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVjI-CDUsM-je1q0rhdChY5E1u6KA0sMwGbnsthI4QQxfMee92dJBvh7umPCak3feQ3oIQr-kNd-ZRJDA9LZPc9sOH6h5IKzVYkY88rXw1OzixuFHgXqR1tkpaX8wHlQrDWzzA-wtfiM/s400/rss.png) no-repeat left center; min-width: 10px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizsgG1GycqghKhL0BkPohq8oOgN8qCWyCX8CLu4Hzt3-PS1WkNk_1iJNoBvsDv4pXKR2s7MmWsJZJLf8jh9igZUOgdIcyaTkbBuhQj3KoiTcK6w32GMojMNITWJErwZ2TsD51z7vUKFyA/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2Kw-z9GB3DU48cXibJoINddnvLgpA3A8dPivrVK9ciHTQNev78AJDsh9Hjn2Tgt3UitxKDaOMJ91y7qYpRqin0uvK4LeDfh7XZAiK-gKUWEdgfvJTHMENlNFPJ9_jfiruBSTUbMyZfk/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRWNF6ZTGG-zjR7Ge5YnEWB3hyufLEjkwWrabVrFK5BKPZXBd30EFWOE5-R4z8SG83bw3PwY6D8zc29DxX3tAlS7DEBnUHcjgIiQE_zWcUCfqlVcxCMiEBDq6ObBhkOjuzbWwPwWtJ_A/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
</style>

<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
</style>
<![endif]-->