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.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">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.
/*<![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/AVvXsEgWHz2AyX1Xce4LtdBA5bbmf_Y-Y_l7yUn8S0zrDDDSKX76KzoG31Y7YFhhzZDBeW4PxoMIyIbe0LRiD-iYxdaPg14HvQwx5f7metwm9_PMQUqO6gKsDDfO7xFDSjolsSU21bwCD1dnzwzP/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/AVvXsEhL9cz5dBz55wKvI92jMR7YNaNZWBEy3uMbyzqJgel8ufIh1uFv5Typ-YyiuTemyio-ynCJtOtKaibH_5wBuPhnvRhEKDsfLEGZLBBFsCMnV-wYyEOZhxDI6DOMfF1T9Viv0U_1gDkD48ar/s1600/Follower.png" alt="Join on this site" /></a>
<br />
<p>with Google Friend Connect</p>
</div>
</div>
Finally, click save, Slide Out Button "Follow This Blog" or "Join This Site" have already installed on your blog.
Advertisement
EmoticonEmoticon