Saturday, March 22, 2014

Elegant Email Subscription Widget For Your Blogger Blog

Author: Gagan Masoun
Elegant Email Subscription Widget For Your Blogger Blog
Email subscription widgets play important role in increasing the blogs traffic. Many bloggers use it as a machine which gives traffic to their blogs. Creating a attractive email subscription box is smart idea. If you are writing high quality content for your blog readers then it will not let you down. Setting Up a Elegant Email Subscription Widget is not very difficult it is very easy process, you don't need any special training. Today here you can learn how you can add elegant email subscription widget to your Blogger blog. Now let us start working.

How to Add Elegant Email Subscription Widget To Blogger Blog

Go to Template » Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (Press CTRL + F to find it):
#subscriptionwrap {
float: left;
width: 600px;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ddd;
-webkit-border-radius:5px;     -moz-border-radius:5px;     border-radius:5px;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
.subscriptionbox h4 {
font-size: 38px;
font-family: 'Open Sans', Arial;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #1ABC9C;
font-weight: 600;
text-decoration: none !important;
.subscriptionbox p {
font-family: Varela Round;
font-size: 22px;
text-align: center;
margin: 0px;
line-height: 25px;
margin-top: 25px;
border-bottom: 1px solid #1ABC9C;
color: #454545;
padding-bottom: 5px;
1. Go to Blogger Dashboard » Template » Edit HTML
2. Press Ctrl+F and Find the Following Code.
3. Now, Paste the Following Code After/Below <data:post.body/>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to Blogs Daddy to enjoy Free Tricks</p><center>
<form action='' class='emailform' method='post' onsubmit='"", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='BlogsDaddy'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>

Customize This Widget

  1. Replace the green color code with your blog name.
  2. Replace the red color text with your own RSS feed username.
Congratulations! its all done.

Recommend For You:
If you like this post then please share with others via Google+, Facebook, Twitter etc. If you have any problem in adding the widget feel free to ask. Happy Blogging & Stay Blessed :)


  1. Hi Gagan,

    Good to be over at your blog too :)

    This is interesting, and although I don't use a Blogger blog anymore, it reminded me of the time I used to before switching to WordPress. I wish I knew how to add such widgets way back then, though I have a fright from codes!

    Thanks for sharing. Happy weekend :)

    1. Hello Harleena,

      I am so happy to see you on my blog. Yeah, I have noted that your blog is running on WordPress now. Blogger is safe to use :) So, I am using it.

      Thanks for your comment.

      Stay Blessed :)

  2. Gagan, good code and message. If you can spruce things up you can nail down more subscribes. Like Harleena, not a blogspot guy here but I do like the idea ;) Tweeted!