Google AdSense Training
Watch VideosWatch Blogging and SEO Videos. Click the Link

Email Subscription Box for Blogger / BlogSpot Blog

Add Beautiful E-mail Subscription Box to Your Blogger Blog

Add Email Subscription Box for Blogger / BlogSpot 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 and paste the following code before/above 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 = ‘’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);

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
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
#rb-text h3 {
border-bottom: 1px dotted
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
font-wieght: bold;
text-transform: uppercase;
letter-spacing: 0;
<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=”” target=”_blank”>Email</a> | <a href=”” target=”_blank”>RSS</a></h4>
<form onsubmit=”‘’, ‘popupwindow’,
‘scrollbars=yes,width=700px,height=700px’);return true” target=”popupwindow” method=”post” action=””>
<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>
<div class=”fb-like-box”>
<iframe src=”//″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:80px; height:21px;” allowtransparency=”true”> Like us on Facebook

<div class=”gplusone”>
<div style=”float:left;width:90px;”>
<g:plusone href=””></g:plusone>
<a href=”″ target=”_blank” rel=”nofollow” style=”color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;”>Circle us on Google+

<div class=”twitter-follow”>
<a href=”” class=”twitter-follow-button”>Follow @2makeawebsite </a>
<script src=”//” type=”text/javascript”></script></div> <br/>
<div >
<iframe src=”//” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:297px; height:258px;” allowTransparency=”true”>

  1. Replace 2makeawebsite with your feedburner feed username
  2. Replace 2makeawebsite with your facebook fan page username
  3. Replace with your google plus profile url
  4. Replace 2makeawebsite with your twitter username
  5. Replace 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.

Subscribe Newsletter

Add a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.