. Cara membuat tombol follow blog push slide di blogger - Webo-Lovers

Cara membuat tombol follow blog push slide di blogger



Gambar membuat tombol follow blog



Blog anda rame tapi belum ada followers? Mungkin anda salah meletakan tombol follow atau belum memasang tombol follow di blog anda. Tombol follow yang menarik dan kreatif akan menarik pengunjung untuk memfollow atau Mensubscribe blog anda.


Namun tombol follow yang menarik saja belum cukup jika tidak di barengi dengan konten yang bagus dan menarik bagi pengunjung.


Biasanya banyak pengunjung yang menyukai blog anda tapi tidak memfollow blog anda karena tidak tau caranya a atau posisi tombol follow yang kurang tepat.

Maka dari itu gunakan tombol follow yang responsif dan mengikuti posisi pengunjung. Intinya tombol follow harus tetap terlihat saat pengunjung scroll ke bawah untuk melihat isi konten anda, jika pengunjung merasa puas biasanya mereka akan memfollow blog anda untuk menanti konten-konten dari anda. Jadi bayangkan saja ketika mereka ingin follow ke blog anda tetapi mereka tidak melihat tombol follow maka biasanya mereka hanya akan meng-close atau keluar dari blog anda.


Nah buat anda yang ingin membuat tombol follow atau subscribe yang responsif dan mengikuti posisi pengunjung, admin akan membagikan caranya. Simak tutorialnya dibawah ini.


Cara membuat tombol follow responsif



Disini saya menggunakan source code milik arlinadzgn karena cukup bagus dan mudah untuk diterapkan di blog anda.

Untuk cara membuatnya sangat mudah silahkan buka blog anda>masuk ke menu tata letak>Buat widget baru> pilih html/javascript> Kemudian masukan 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://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=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>




Note : Ganti blog id/Angka yang berwarna kuning menggunakan blog id milik anda.

Cara mengecek blog id milik anda adalah di bagian address bar blog anda. Lihat gambar dibawah ini.

Gambar blog id


Jika sudah kemudian klik simpan untuk menyimpan widget anda.


Jika anda Makatelah menambahkan kode di atas maka tampilannya akan seperti.

Gambar Tombol follow responsif




  1. Demikian untuk artikel cara membuat tombol follow responsif dan mengikuti pengunjung, semoga bisa berguna dan bermanfaat bagi anda semua. Terimakasih kepada arlinadzgn atas source code nya.
logo
Kecepatan Sebuah Website Adalah Prioritas Kami.
  • Facebook
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Related Posts

    Buka Komentar
    Tutup Komentar

    0 Response to "Cara membuat tombol follow blog push slide di blogger"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel