How To Add Follow Button On Blog - Slide Out Effect - Now, infoBlog will share a tutorial about How To Add Follow Button On Blog - Slide Out Effect by using widget Follow this blog or Join this site that has been provided by Blogger. But, infoBlog will modify that widget by using the slide -out effect. Slide -Out is to hide or show out of something to the surface of the blog.
If there are visitors who are interested in your blog posts, so they can follow your blog by clicking on the button. Follow the steps below To Add Follow Button On Blog With Slide Out Effect . .
How To Add Follow Button On Blog With Slide Out Effect :
- Go to your Blogger Dashboard ›› Layout ›› Add a gadget ›› HTML/JavaScript.
Copy and paste the code below.
<style scoped='' type="text/css">
/*<![CDATA[*/
#infoblogfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.infoblogfollowButton{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}
.infoblogfollowButton 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}
.infoblogfollowButton:hover,.infoblogfollowButton:focus,.followActive,.followActive:hover{color:#fff}
.infoblogfollowButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.infoblogfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.infoblogfollowForm p{margin:10px 0}
.infoblogFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.infoblogFollowFooter a{color:#aaa;background:none;text-decoration:none}
.infoblogFollowFooter 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("#infoblogfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".infoblogfollowButton").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="infoblogfollowSubscribe" style="bottom: -971px;">
<div class="infoblogfollowForm">
<a class="infoblogfollowButton" href="#" title="Follow"><b>+ Follow</b></a>
<br />
<a href="http://www.Blogger.com/follow-blog.g?blogID=6047894897177152059" 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>
*NOTE
› Replace
6047894897177152059 with your Blog ID. You can see your Blog ID on your blogger browser's search bar like this image.
- Finally, click Save.
Enough of tutorial about How To Add Follow Button On Blog - Slide Out Effect. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.
Thanks For Your Visiting
EmoticonEmoticon