Add a Simple Stylish Subcription Box To Blogger Blog

Today tutorial is about how to add a simple subscription box to your blogger blog, in my previous post, i have drop a lot of tutorials on how to add a different customize subscription box to blog. One thing that i like about this widget was that, it look so simple, and you can implement it anywhere on your blog. Follow the few steps below on how to add the widget to your blog.

How To Add The Widget To Your Blog

• Go to your blogger dashboard
• Click on "Design" > "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of the gadgets
• Copy and paste the code below in the content box

<style>
.rb-email{
background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.rb-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;
}
.rb-emailsubmit:hover{
background:#E98313;
}
.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:170px;
color:#666;}

</style>

<div class="rb-email">
Subscribe via 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=Realcombiz', '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="Realcombiz" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>

• To change your subscription header, edit Subscribe via Email
• Replace Realcombiz with your feed title/username
• Click "SAVE TEMPLATE"

You might also be interested in this articles

• Add stylish subscription box with share buttons below post
• Add awesome feedburner email subscription box below post
• Add facebook, twitter, google + button and facebook like box to blog
• Add customize subscription box with facebook like and send button to blogger blog

Do you enjoy this article? Share it with friends/followers and subscribe to this blog now, for you to stay updated with our latest post. comments is highly welcome.

Enjoyed This Post? Subscribe For More Update!

Follow @realcombiz