Mudahnya Memasang Slide Out Tombol Follow di Blog

IDTGADGET - Mumpung lag hujan enaknya bagi - bagi widget hehe, kali ini saya akan membuka rahasia cara memasang slide out tombol follow di blog. Sebenarnya di blog sudah ada namun saya akan sedikit modifikasi dengan efek slide out melayang di sisi kiri bawah blog.

Gambar di atas adalah contoh tampilan tombol follow yang akan saya bahas di bawah ini.

Cara Memasang Slide Out Tombol Follow di Blog

Masuk ke blog sobat pilih "Tata Letak" Tambahkan widget lalu salin kode di bawah ini dan tambahkan ke widget sobat.

<style scoped='' type="text/css">

/*<![CDATA[*/

#cyberzhuberfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}

.cyberzhuberfollowButton{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}

.cyberzhuberfollowButton 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}

.cyberzhuberfollowButton:hover,.cyberzhuberfollowButton:focus,.followActive,.followActive:hover{color:#fff}

.cyberzhuberfollowButton:hover span,.followActive span{background-position:0 -37px!important}

.followactive{background-color:#333}

.cyberzhuberfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}

.cyberzhuberfollowForm p{margin:10px 0}

.cyberzhuberFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}

.cyberzhuberFollowFooter a{color:#aaa;background:none;text-decoration:none}

.cyberzhuberFollowFooter 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("#cyberzhuberfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".cyberzhuberfollowButton").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="cyberzhuberfollowSubscribe" style="bottom: -971px;">

  <div class="cyberzhuberfollowForm">

    <a class="cyberzhuberfollowButton" href="#" title="Follow"><b>+ Follow</b></a>

    <br />

    <a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" 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>

Lalu cari kode "7342017194742683" ganti dengan kode ID blog sobat. Caranya masuk ke dashboard lihat pada search bar maka akan terlihat ID blog sobat.