Tuesday, June 18, 2013

WordPress Style Premium Email Subscription Widget For Blogger

Author: Gagan Masoun
WordPress Style Premium Email Subscription Widget For Blogger
I love to share tips for bloggers to increase blog readers, email subscribers, social fan following and many other things. In my previous post I have shared tip about how to find important backlinks with Google Analytics. Email subscribers help you to build strong readership. You should focus to increase your email subscribers as much as possible. For this your blog needs stylish email subscription gadget.

Today, in this article I will tell you about WP style premium email subscription widget. So, let see how to add an email newsletter widget in blogger sidebar.

WordPress Style Premium Email Subscription Widget

Add Premium Email Subscription Widget to Blogger

  • Go to Blogger Dashboard > Choose Blog > Layout > Add a Gadget.
  • Choose HTML/JavaScript.
  • Now copy below code and paste into it.
<div align="center" id="blogsdaddy">
<div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="blogsdaddy-title-text" style="color: 000; font-size: 20px;">
<div id="blogsdaddy-sub-title-txt" 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=blogsdaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="blogsdaddy_Subscriber_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" id="blogsdaddy_Subscriber_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;">
<input name="uri" type="hidden" value="blogsdaddy" /><input name="loc" type="hidden" value="en_US" /> <input id="blogsdaddy_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
#ig-subscription-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: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-WjmW-wKjwo4/UcA-A4q2RNI/AAAAAAAA5JQ/czHy-dDSA-c/s1600/subscribe-nm_bd.png) no-repeat center right;}
#ig-subscription-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;}
#ig-subscription-optin input.email {background: white url(http://1.bp.blogspot.com/-ZKAyjzi0QLk/UcA-A4DxDKI/AAAAAAAA5JM/PBOaXwlblcs/s1600/subscribe-email_bd.png) no-repeat center right;}#ig-subscription-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;}#ig-subscription-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;}#ig-subscription-optin input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFFC00;}</style>
  • Replace blogsdaddy (highlighted with blue color) with your own feedburner username.
  • Hit save button and It's all done :)
You would like to read below interesting tutorial.
I hope you liked this tutorial to add a Wordpress style email subscription box to your blogger blog. Stay Blessed & Happy Blogging!

Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.


Post a Comment