Add Slide Out Follow Blogger Button in Blogger

Add Slide Out Floating Follow Blogger Button  - In This  tutorial i Show You how to set up "follow this blogger" that is already provided by bloggers, but here I will share the "follow this blog" effect slide out with a floating position in under a blog that can mate pairs.

How To Add Follow Button (Join Our Site) On Blog Slide Out Effect

This button will be easily seen by visitors. Moreover, if the visitor interested in the articles read, did not rule out the visitor will immediately join and follow our blog via the "follow this blog" that we put on the bottom of the blog so that this button is functioning and beneficial.

Installing Slide Out Follow Blogger Button 

1. How to add very easy, please go to Blogger> Layout> Create a new widget and then add the code below

HTML

<style scoped='' type="text/css">
/*<![CDATA[*/
#arlinafollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.arlinafollowButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700}
.arlinafollowButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsz0xOViCz7LEft2NOkGPosUWJBm6QYLyY_jQ_D2IR202cPHMfQEgEDbJoFJBuZ5AR_n7i1bMVySzb5X5adt8jDJa2jkXBhzUyslIhM8kZrd_IAqGlDGXnGC5pTdEkHAvW3tSpsEJ8Dhn/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}
.arlinafollowButton:hover,.arlinafollowButton:focus,.followActive,.followActive:hover{color:#fff}
.arlinafollowButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.arlinafollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.arlinafollowForm p{margin:10px 0}
.arlinaFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.arlinaFollowFooter a{color:#aaa;background:none;text-decoration:none}
.arlinaFollowFooter a:hover{color:#fff;background:none}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
<div id="arlinafollowSubscribe" style="bottom: -971px;">
  <div class="arlinafollowForm">
    <a class="arlinafollowButton" href="#" title="Follow"><b>+ Follow</b></a>
    <br />
    <a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEQ30H0CS0irrWsCmNKT8xHuXYkLOSs0q0E1PJgzGOmWh_09dGIZaHFD3SGxpuCHvObshSUMbhC8VWUyBN2K7ry4TluDicr-mR5W5KTfzUq-6Qt2eq2KBzGRm0_XNubGEss6yIJoQLz0K/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

Replace the code that is marked with Your blogger ID code . blogger ID Code can usually see on the blogger dashboard browser's search bar as shown below

Result

Thank to - Arlina Design