Tuesday 10 September 2013

How to Add Wordpress Like Subscription Box on your Blogger Blog?

Posted by Tee Jay on Tuesday 10 September 2013

Subscription box is a must to have thing on a blog in this competitive blogging era. Email subscription box will help you to improve affiliate sales and traffic. It will also help you to make your readers revisit your blog. So, today I’ll be going to share a tutorial on How to add Wordpress Like Subscription Box on Blogger Blog.

Wordpress Like Subscription Box for Blogger

Let's have a look at the step by guide to add Wordpress like Subscription box to your Blogger Blog:

1. Go to Blogger Blog Dashboard > Layout > Add a Gadget
2. Choose HTML/Javascript
3. Now copy the code given below and paste into it
<div align="center">
<div id="SBT-optin" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 style="color: 000; font-size: 20px;">
SUBSCRIBE OUR NEWSLETTER</h4>
<div style="color: 000; font-size: 14px;">
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Smartbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br />
<input class="email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="Smartbloggertricks" /><input name="loc" type="hidden" value="en_US" /> <input style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
<style>
#SBT-optin {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: 2px solid #000000;}
#SBT-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}
#SBT-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJ29mCxKeoqiz8CwAyZVObdThVymvOypBaOewXTIFrzjmKZVHKV9nqatf1IfHYG39hQ0JyfWP6jd5ZL5n9_5-CDrNIVl9tFM69KK18fxSDxO9M9gE-pD2SZo9aVhC-ogciDGx0FyJTbYW/s1600/subscribe-name.png) no-repeat center right;}
#SBT-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#SBT-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89ebmUAx12i9jsyuc-qvpAmC_BQdDZ4kby6dDlc1qpQPJRbK46deChv1q0kZpu4YSqwHSjXvV72eN1W1GUE2IXTjvyXoFU6yvZjxEIymfBWOTJIYex93ZYbEzyylUx0mUU5HrFXu08_1_/s1600/subscribe-email.png) no-repeat center right;}
#SBT-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}
#SBT-optin h4 {margin-bottom: 8px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}
#SBT-optin input[type="submit"] {background: #248334; border: 1px solid #248334 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#SBT-optin input[type="submit"]:hover {color: #FFFC00;}</style>
4. Replace the Smartbloggertricks with your feedburner username
5. Save the gadget

That's it. You are done with the procedure of adding Wordpress Like Subscription Box to Blogger Blog. If you faced any issue then drop a comment by using the comment form given below. Happy Blogging!

0 Comments

Post a Comment