0

Blogger Tutorial

Add Beautiful E-mail Subscription Box to Your Blogger Blog

In this tutorial I am going to explain you how to create stylish email subscription widget in blogger. It's easy to create email subscription widget box with Facebook Like Button - Google Plus Button - Twitter Followers Button and finally Facebook Like Box. I now explain you step-by-step of creating a email subscription widget box for your blogger website.

eMail Subscription Box


  1. Select the blog which you have to add email subscription widget box. 
  2. In the left hand side navigation bar click the "Template" link and then click the "Edit HTML Button Link, then click "Proceed" and tick the "Expand Widget Template" box
  3. Here before adding any codes please copy and paste your full template codes in WordPad and save it in your desktop. Make sure if any goes wrong you will not lose your template. So first save your template in the desktop then start adding codes.
  4. Use ctrl F to find </head> and paste the following code before/above </head> tag
  5. Then, paste the below code.

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
After adding the above code in the header section of your blogger template then click "Save Template". 

Now go to blogger dashboard select 'Layout" In the right-hand side click "Add a Gadget" link. Now "Add a Gadget" page opened you see lot of Gadgets listed there. 

Select "HTML / Javascript option. Now Configure HTML/JavaScript opened leave title box blank and paste the below codes in the box.
<style type="text/css">
/* RB Style sheet for subscription box */
#rb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
#rb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
#rb-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
#rb-subscribe-box .email-box {background:#e3edf4; padding:11px;}
#rb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#rb-subscribe-box .email-box .txt,#rb-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
#rb-subscribe-box .email-box .btn,#rb-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
#rb-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#rb-text {
border: 4px solid #C8e993;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#rb-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: bold;
text-transform: uppercase;
letter-spacing: 0;
}
</style>
<div class="rb_widget">
<div id="rb-text">
<div id="rb-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=2makeawebsite" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/2makeawebsite" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=2makeawebsite', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="2makeawebsite" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
</div>
<div class="fb-like-box">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F2makeawebsite&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/2makeawebsite" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
</div>
<div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.2makeawebsite.com"></g:plusone>
</div>
<a href="https://plus.google.com/u/0/117896762172961615212" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>
</div>
<div class="twitter-follow">
<a href="https://twitter.com/2makeawebsite" class="twitter-follow-button">Follow @2makeawebsite </a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> <br/>
<div >
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F2makeawebsite&amp;width=297&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:297px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
</div></div>
 
  1.     Replace 2makeawebsite with your feedburner feed username
  2.     Replace 2makeawebsite with your facebook fan page username
  3.     Replace https://plus.google.com/107218377290528286720 with your google plus    profile url
  4.     Replace 2makeawebsite with your twitter username
  5.     Replace http://www.2makeawebsite.com with your blog/site url
  6.     Click "SAVE TEMPLATE" when you are done with your editing. 
If you like this post consider sharing with your social networking friends. Thank you 

Next: Chapter : 6: How to Add Pinterest Button to Blogger


Post a Comment

 
Top