ProBlogger Clone Email Subscription Widget

Posted On / Leave a Comment
Good day! today I will share a new email subscription widget that includes feedburner chicklet, facebook and a twitter button placed in it. It is a widget similar used in ProBlogger. The subscription form used in ProBlogger is aweber, so we change that to feedburner which mostly blogspot users use. If you want to use this email subscription widget, kindly follow the steps below.

ProBlogger Clone Email Subscription Widget
[preview of the widget]













Adding ProBlogger Clone Email Subscription Widget

1. Go to your blogger dashboard > Layout > Add gadget

2. Select > HTML > Javascript

3. Paste below code and click save

<style>
#bgemailsub .subcount{margin:3px 0 0 0;float:right;}
#bgemailsub h5{color:#FFFFFF;font-size:16px;font-weight:bold;margin:0 0 5px 0;text-decoration:none;text-shadow:#2F4249 1px 1px;text-transform:none;line-height:20px;} #bgemailsub img{margin:0 5px 5px 0;}
#bgemailsub #text-8 img{margin:3px 5px 2px 5px;}#bgemailsub #text-10 img{margin:5px 5px 10px 0;} #bgemailsub .textwidget p{margin:0;padding:0;}
#bgemailsub .subscribe{background:#74868C;width:240px;height:190px;margin:10px 0 0 0;padding:10px 15px 10px 15px; z-index:99;}
#bgemailsub .subscribe-line{margin:0;padding:10px 0 10px 0;text-align:center;clear:both;}#bgemailsub .text_input, #bgemailsub .subscribe input.email{background:#FFFFFF url(http://1.bp.blogspot.com/-sLpbG6KoYDA/UUVfu3kjdkI/AAAAAAAAAJc/ajKrvZJw5t8/s1600/subscribe-icon.png) left no-repeat;width:208px;color:#333333;font-family:Arial,Tahoma,Verdana;font-size:13px;padding:5px 0 4px 30px;margin:5px 5px 10px 0;border:1px solid #C5CFD5;}

</style>


<div id="bgemailsub" class="bgemailsub widget-area">
<div id="text-9" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><div class="subscribe">
<h5>Subscribe to the Newsletter:</h5>
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=FromHobby2money', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="text_input" type="text" value="Enter your email address …" id="subbox" onfocus="if ( this.value == 'Enter your email address …') { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Enter your email address …'; }" name="email" />
<input type="hidden" name="uri" value="FromHobby2money" />
<input type="hidden" name="loc" value="en_US" />
<input id="zoosbmt" type="image" src="http://2.bp.blogspot.com/-zgW9nRh2p9Y/UUVfu7OZDzI/AAAAAAAAAJg/9OE5E2XMpsY/s1600/subscribe-button.png" alt="Subscribe" class="subbutton"/>

<a href="http://feeds.feedburner.com/FromHobby2money"><img src="http://feeds.feedburner.com/~fc/FromHobby2money?bg=333333&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" class="subcount"/></a>
</form>
<div class="subscribe-line">
<a href="http://feeds.feedburner.com/FromHobby2money"><img src="http://1.bp.blogspot.com/-hrmpE1nXOTY/UUVhiVAyL3I/AAAAAAAAAKQ/FYLXjs7BkP0/s1600/subscribe-rss.png" alt="Subscribe to RSS"/></a><a href="http://www.facebook.com/FromHobby2Money"><img src="http://4.bp.blogspot.com/-hQd5lOqMpG8/UUVhiVu5eaI/AAAAAAAAAKI/JyoIIoPI4D0/s1600/subscribe-facebook.png" alt="Subscribe to Facebook"/></a><a href="http://www.twitter.com/dadhust"> <img src="http://1.bp.blogspot.com/-CPYCnOVCOgs/UUVhia8DRAI/AAAAAAAAAKM/NH_zJvpFM_g/s1600/subscribe-twitter.png" alt="Follow on Twitter"/></a>
<p align="center">Join Over <strong>2000</strong> Readers</p>
</div>
</div></div>
</div></div></div>

Customize

  • Replace 2000 with your total subscriber count.
  • Replace FromHobby2money with your feedburner ID.
  • Replace dadhust with your twitter username.
  • Replace FromHobby2Money with your facebook fan page username
  • Change 74868C if you want to change the background. You can use my color code generator to decide which color you want. Click HERE. 
You are done! Just put the  widget on your sidebar to make it look beautiful. 

Do you liked it?

Kindly share


Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


0 comments:

Post a Comment

Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

x
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks