Add Rss Feed Follow Button Subscribe Widget

0
Add Rss Feed Follow Button Subscribe Widget
In this tutorial i'm going to explain how to add Rss feed Follow button subscribe widget for your blogger account.it will help visitors to get new updates of your blog or website directly into their mail box.Very easy to add,just follow the step mentioned below.







DEMO



1. Log in to blogger account
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript'
4. Paste below code
<style type="text/css">
/*<![CDATA[*/
 #esgfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
 .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
 .esgfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
 .esgfollowButton span {background: url("http://4.bp.blogspot.com/-8o2sn6pZoPA/UYoGyk4eOfI/AAAAAAAAHjI/CqiSbP2xHIc/s1600/follow-bloggertrix.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
 .esgfollowButton:hover,.followActive {color: #fff !important;}
 .esgfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
 .followactive {background-color: #333;}
 .esgfollowForm {padding: 15px;}
 .esgfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
 .esgfollowForm p {margin: 0 0 10px;}
 .esgfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
 .esgfollowForm form {text-align: center;}
 .esgfollowForm .emailInput:focus {color: #000;border-color: #000;}
 .esgfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
 .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
 .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
 .esgFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
 .esgFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
 .esgFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(esg){esg(document).ready(function(){esg.extend(esg.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=esg("#esgfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);esg(".esgfollowButton").click(function(e){if(followBox.hasClass("followOpened")){esg(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{esg(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="esgfollowSubscribe" style="bottom: -971px;">
<div class="esgfollowForm">
<a class="esgfollowButton" href="#" title="Follow"><b>+ Follow</b></a>
<center>
<h3>Follow bloggertrix</h3>

Get Free Email Updates to your Inbox
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=e-bloggersstand', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailInput" name="email" placeholder="Enter Your Email..." type="text">
   <input name="uri" value="bloggersstand" type="hidden">
   <input name="loc" value="en_US" type="hidden">
   <input class="emailSubmit" value="Subscribe" type="submit">
  </form>
<div class="esgFollowFooter">
<a href="http://feedburner.google.com/" target="_blank">Delivered by FeedBurner</a><a href="http://www.bloggersstand.blogspot.com" target="_blank">Get This Widget</a>
  </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

  • Change bloggersstand with your Feedburner ID 

5. Now save your HTML/Javascript', Done !
Add Rss Feed Follow Button Subscribe Widget for blogger blogspot,add rss email subscription button in side with icon to your website,how to add rss follow button subscription gadget box
In this tutorial i'm going to explain how to add Rss feed Follow button subscribe widget fo...
SUMMARY

Add Rss Feed Follow Button Subscribe Widget for blogger blogspot,add rss email subscription button in side with icon to your website,how to add rss follow button subscription gadget box

You Might Also Like:

We hope this article helped you to learn Add Rss Feed Follow Button Subscribe Widget. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Rss Feed Follow Button Subscribe Widget" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand