Add Follow Button Subscribe Widget to Blogger

Today i gonna explain  how  to add  follow push subscribe widget to blogger This is WordPress design. promise you lot volition like  it.By using Follow Button Subscribe, users tin subscribe your blog. So, it volition help to larn the novel updates past times emails. You tin check  it from below demo link.

 follow push subscribe widget to blogger This is WordPress pattern Add Follow Button Subscribe Widget to Blogger

You may similar these articles
     Social Media Profile With Rss Subscription
     Beautiful Rss Feed Subscription Box
     Sliding Social Sharing Widget

How to add together Follow Button Subscribe Widget to Blogger

1. Log inwards to blogger draw of piece of occupation organization human relationship together with Click driblet down.

 follow push subscribe widget to blogger This is WordPress pattern Add Follow Button Subscribe Widget to Blogger

2. Now conduct “Layout” Like Below.

3. Click Add Gadget together with 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 bridge {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 bridge {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 enterprise #444;color: #888;display: block;clear: both;}  .esgfollowForm cast {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 enterprise #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 enterprise #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="Add Follow Button Subscribe Widget to Blogger"><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-bloggertrix', '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="bloggertrix" 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 past times FeedBurner</a><a href="omelto.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>  

Replace Bloggertrix amongst your Feedburner ID

5. Now salve your HTML/Javascript’. You are done.
Do you lot desire a help to add together Follow Button Subscribe Widget? Just exit a comment.
Sumber http://www.bloggertrix.com/