Cara Memasang Tombol Followers Blogger dengan Efek Slide Out

Kali ini farhan web akan berbagi mengenai "followers blog" yang ada tulisannya Join This Site. Ini sebenarnya sudah disediakan oleh pihak blogger namun saya akan bagikan dengan efek Slide Out di bagian bawah pojok kanan blog.

Tidak menutup kemungkinan akan banyak followers pada blog anda jika ada artikel yang di sukai pembaca dan langsung memollow blog anda melalui tombol Join This Site tersebut.

Bagi anda yang tertarik silahkan ikuti tutorial di bawah ini.

1. Login Blogger

2. Tata Letak

3. Simpan kode di bawah ini ke dalam Widget HTML

<style scoped='' type="text/css">
/*<![CDATA[*/
#farhanwebSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.farhanwebButton{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}
.farhanwebButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiols10TglkG8i0_O7AXiv539jOUy8fHNH0cVXZ57F2C5bcmu5MAFZnBD6a4OCxrnc72YUy6YWaGmAnPFG1XuCV5KoNDRU3iMDr6TiQsNA5U4loRw4t1m_PVjNDakrOAH9o3f1W7i6lLCxf/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}
.farhanwebButton:hover,.farhanwebButton:focus,.followActive,.followActive:hover{color:#fff}
.farhanwebButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.farhanwebForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.farhanwebForm p{margin:10px 0}
.farhanwebFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.farhanwebFooter a{color:#aaa;background:none;text-decoration:none}
.farhanwebFooter 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("#farhanwebSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".farhanwebButton").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="farhanwebSubscribe" style="bottom: -971px;">
  <div class="farhanwebForm">
    <a class="farhanwebButton" href="#" title="Follow"><b>+ Follow</b></a>
    <br />
    <a href="http://www.Blogger.com/follow-blog.g?blogID=8055793369317347552" 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/AVvXsEgJt0KgjeWDbXALXveN4xvj-Z9Vp2EC2p6_PCMIwe4EihJtOnIniM7Rp42yZnjVUeKkVj14rr3qfMlliIGUG3nz356yuJr0dm7z3hUYJXM4tNpMrK_6ulTDnehdMregWF8kHh75BqF47yOx/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

Silahkan anda scroll ke bawah kode di atas dan ganti ID blog di atas dengan ID blog anda sendiri

Selesai

Selamat mencoba