Installation of '+Follow' Floating-Slide Button on Blogger (Tutorial)

In this tutorial I will show you how to install '+ Follow' floating and slide out button as in my blog (Can find the right side - down corner.), however the Blogger is providing a simple '+follow' button, but without the sliding option. But no problem, with this tutorial you can learn it now.
This button can be seen easily by visitors and slightly tempts them to click on it. Moreover if the visitor is interested in your article or content, and want to follow your blog, then he can click on this button and can perform this operation without getting out of your article.

Follow the below simple steps to install the button.

Step:1

Open blogger, and click on the layout. i.e

Blogger > Layout > Create a new widget (Html/Java Script widget),
Copy the below code and paste in the new created widget.

	<style scoped='' type="text/css">
	/*<![CDATA[*/
	#arlinafollowSubscribe{background-color:#e74c3c;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
	.arlinafollowButton{background:#e74c3c;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://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/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=3350528184792635364" 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://1.bp.blogspot.com/-HViEx99kxmQ/VyPMrPGAvEI/AAAAAAAAD7M/bWz5CKpHrHkxtVdgL0z-xJQa_nA_tK0gACLcB/s1600/Follower.png" alt="Join on this site" /></a>
	<br />
	<p>with Google Friend Connect</p>
	</div>
	</div>

view raw Installation of '+Follow' Floating-Slide Button on Blogger (Tutorial) hosted with ❤ by GitHub

Step : 2
In the above code line number 26, replace the Blog-ID with yours which you can find on your blog's dashboard's URL as shown in the below pic.

Step:3
Save the above widget. and reload your homepage.

You can also customize the code to change the layout and the design of this 'Floating Slide Button' according to your blog's theme.

If have any questions/doubts, feel free to ask me in the comment section below.