Skip to main content
Pehawe Official

follow us


Cara Memasang Slide Out Tombol Follow di Blog - Kali ini Madura Computindo akan memberikan sebuah Widget tutorial Memasang slide out "Follow This Blog" yang sebenarnya memang disediakan oleh Blogger. Dan untuk menambahkan efek slide out "Follow This Blog" di pojok kanan bawah pada halaman blog sobat dibutuhkan penambahan Kode Widget HTML Slide Out Follow by Arlina di Blog sobat.


Cara Memasang Slide Out Tombol Follow di Blog
Login ke Blogger > Pilih Tata Letak > Kemudian Pilih Add Widget/Tambah Widget > Copas Kode HTML di bawah 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://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/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=3271568206865277277" 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>


Ganti yang ditandai dengan kode blog ID=3271568206865277277 sobat. Kode blog ID biasanya bisa sobat lihat di dashboard blog pada search bar browser seperti gambar di bawah ini



Langkah terakhir Simpan Widget yang sudah di buat tadi, dan lihat hasilnya.
Demikian Tutorial  Cara Memasang Slide Out Tombol Follow di Blog ini semoga bermanfaat.

Source :
http://www.arlinadzgn.com/2016/04/memasang-slide-out-tombol-follow-di-blog.html
Jika sobat ingin menjadi donatur silahkan hubungi admin via Whatsapp. Dana hasil dari Donasi akan digunakan untuk memperpanjang domain pehawe.me. Terima Kasih

You Might Also Like :

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar