How to Install Slide Out Button "Follow This Blog" On Blogger

How to Instal Slide Out Button "Follow This Blog" On Blogger. This time I will give a tutorial how to install the Widget about " Follow This Blog " also known as "Join This Site". Exactly that is already provided by bloggers, but here I will share the "follow this blog" effect slide out with a floating position beneath the blog can mate pairs. This button will be easily seen by visitors . Moreover, if the visitor interested in the articles read, 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.

• Demo

How to add this widget? I think it is very easy, please go to Blogger > Layout > Create a new widget and then add the code below.

<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/AVvXsEgIuj8TSJnyKypuL8pKTjGGxFxNBGLNuZ66nXoAK530doF9TRSs3F0OsV8VbQ3xcRp1IgBmj7nz805hDOyVKnXg6DIsQbXUcuZldS7Jq5jsL9im8fVGYF1efiNUW6DtACaBjPSU3CSpQ5LL/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=3500693341502604426" 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/AVvXsEgwk8lrI1ArRSgFdd0TyRqsKljHS5XCuiFUlc8VBp6D_AVibztEk-D6CPz_iQqSC0QlvQ44HQqrID_X_kMBxvE4xsNwpk46lSP6-yfNVaRLzFbo2rTeJB1jJmVtcuOUWf_ALo50DwBhS5q5/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 the code your blog ID. Code for blog ID can usually see on the blog dashboard browser's search bar.

Finally, click save, Slide Out Button "Follow This Blog" or "Join This Site" have already installed on your blog.

Advertisement