Adding a elegant Rss Email Subscription Widget Box to Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6EPIaG3RmscOfNKZSKRU0W-0Dp9GiYz0nvQyU__UciRUyeZlkJjwnmKOxe4DNgEAHXxSAQXOhFsJNPjMSQfSblm90KqPZSlidFfXEi1ulllEjS5UU6NMzOy8-8j-JSkhUQmpYSfbddEZ/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLs5E-5lV0mJ0Vw7WlBuwI42igacVNXJtc2benWnnKmLoHY9KYi-FD3mPE3lr9adbQfn9UrpTvXe6qayc157JNV-4q5ZFwsybvU_yErKhc_SuVrbvz0mpEjmsBQMB0OfrXYaRRlbKL2oVC/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxHiIP0BLebIDOuAEQnGsKfyWP7O7dq0iGyqKlGktFLEpEO3l8YtFA2myFK4eBTDl7a8qZx1bM_mDk-srkSmLJafeeBa1LPgMDNwFj7WdVGzL11QhpQsNWeiYllTY4LRb6_sswFLLXktf/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMY0P6fEnLKQ0UUn6ePjfcinsmknEB_jx9J9Uq1g_0pmyg57pElM2yKVu_A8n-1so29MRYZG1yjwhyX46stfX8jL9eR9urmE6JlKQTFdBp65JbabHThDMNchoAryUlSqtiHvDI7Ne8hdYW/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwYZizoWOe7pX5q_hYh3H0ufsS7n4B90OdJwcvH_-XhMgTTtcavN3HNZY_djBLHmxqtjYhgoALbeB7dAkX0nd8P_pbGMMzcpmnMuci5kI4ks5XruF_9lGrmMzXAxB5brqA7kFJP71jD9GP/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

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Adding a elegant Rss Email Subscription Widget Box to Blogger

4/ 5

By Editorial Board

Posted By Editorial Team On January 14, 2012 Comment