Adding a elegant Rss Email Subscription Widget Box to Blogger

Advertisements

Rss Feed play's important role in increaseing the website/blogs traffic.Most of the blog owner's use it as a machine which generates traffic for them.Creating a Rss Feed Subscription box is smart move.If your website/blog Content is of good quality then Rss Feed Subscription Box will not let you down.Usually reader's and user's subscribe to your blog via email to get your blog's latest updates straightly into there inbox.Setting Up A Rss Feed Email Subscription Widget is not very difficult it is very simple,you don't need any sort of training.You create your own Rss Feed in simple steps but before that you should have a Rss Feed for your blog,if you don't have Rss Feed For your Blog Go Here to Learn How You Can Burn Your Blog Feed In Feedburner.Now let us start working

Go to Blogger.com >>Your Blog >> Template >> Download BackUp of template>>then Expand Widget Templates>>Search for </head> and just above it paste the following code                                                                                                  
<style type='text/css'>
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
}
.followlinks ul li.otrss{
background:url(http://3.bp.blogspot.com/-xOwt1EX4VX4/TteO7sxzSxI/AAAAAAAABFk/RNFj1bsukpQ/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(http://3.bp.blogspot.com/-GW70c2ukQsI/TteO6ikOudI/AAAAAAAABFc/Cjqxp-ZVbX4/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(http://1.bp.blogspot.com/-LTDd7jrc55s/TteO8nMa6uI/AAAAAAAABFs/r6aMf7ApC6Q/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(http://4.bp.blogspot.com/-RtDc-xIqgtg/TteO56LVTgI/AAAAAAAABFU/iWhsfa01wEo/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(http://4.bp.blogspot.com/-DMrSxx8BJqo/TteQx1ijO2I/AAAAAAAABF0/Qd1ROb_8oeA/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 550px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Now Just Save your Template By Pressing Save Now and proceed to next step now place the following code where you want to display Rss Feed Email Subscription Box in your blog.If you want to place it in sidebar go to>> Blogger.com >> YourBlog >> Layout >> Add A Gadget >> Html/Javascript >> and copy and paste the following code there                                                                                                  
<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates or Like us on your favourite Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/Everfreetech' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/114636838169087641091' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/Fosterzone' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/Mybloggerlab' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='uri' type='hidden' value='Everfreetech'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>

Customizing Rss Feed Email Subscription Box According to your Details:
1.To add your Rss Feed look for http://feeds.feedburner.com/Everfreetech and replace it with your feed url

2.To Add Google Plus Look For http://plus.google.com/114636838169087641091 and replace it with your Google Plus page Url

3.To Add your Twitter Page Look For Fosterzone And Replace it with your Twitter Username

4.To Add Your Facebook Page Look For https://www.facebook.com/Mybloggerlab and replace it with your Facebook page url

5.Now the main thing adding Email Subscription,Look For Everfreetech and replace it with your Rss Feed page username i.e (http://feeds.feedburner.com/Everfreetech) only username don't add full url

And Then Hit Save Button And Now Your Work is done if you want to preview this Widget Click HERE if you have any problem in adding the widget feel free to ask
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

4 comments

April 26, 2012 at 6:22 AM

nice widget
even i have designed a new subscribe by email widget
http://www.designrapid.com/subscribe-by-email-wordpress-blogger/

Editorial Team MOD
April 26, 2012 at 7:12 AM

@ramandeep

Thanks For Liking the widget, And Nice Try Buddy Keep Working on it, Peace and Blessings

May 6, 2012 at 4:38 PM

Hi sir i want your own widget and please tell me how should i do ?

bollywoodhdpictures.blogspot.com

Editorial Team MOD
May 7, 2012 at 12:21 AM

@Bollywood HD Pictures
Hey Pal, Thanks For liking my Widget And Here You Go Pal Here Is the Link To Get The Widget Which It Live at MBL >>Tutorial Page>> http://www.mybloggerlab.com/2011/12/adding-dashing-subscribe-now-box-to.html

Thanks Buddy. Peace And Blessings :)

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.