Pasang Slide Out Butang Follower

Butang ini akan menarik perhatian pengunjung anda. Apabila pengunjung tertarik dengan artikel anda mesti diorang akan follow dan hanya perlu klik .Sila ikuti tutorial dibawah untuk mengikuti.


Pasang Slide Out Butang Follower

Langkah 1) Dari Blogger Dashboard, pergi Layout and klik pada Add a Gadget link

Langkah  2) In the pop-up window, pilih  HTML/JavaScript widget

Langkah 3) Copy-paste kode dibawah ini.

<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/AVvXsEhO_LDwOCV4QmCf_kk8VeJubMBmnVDDFbSa9HzA80xJUNF5a8Lj8XMLXcoY95XvyQAM1FVP4GNYbErbjVusQjtMOcF7BrpJ22PdK62KCUhhpKEOMF8MoPGYaY8Zpp7psnIl_Uj2IbpsOPY6/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=6672605318801681374" 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/AVvXsEifH3iFWpvnfrCaf_R0Qss5RotKjefzR29wR19ACwRrwUkjc7eV3z5SyF6aMG_msJW15LUttNR7631_hLO94iOz4rUBFqQcaevOVgNbBB_kI6o-fPxRdfhyphenhyphenyCaIed1vUssa2Qymmh9zJvub/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

Penting

Ganti kode yang berwarna biru dengan ID blog anda dan anda boleh lihat di URL dashboard blogger anda seperti contoh dibawah ini.

Langkah 4) Klik Save widget.