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
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRQsS6LSaDK8uplDjItKX68iBU1UimlNx5Z9uMFBjA1VfZfTzGlS9WzSGLaH-wWFPZd6SR_GUlZ1_w3PeiApI9yM7Hd9lFGPRDzRNlDMkEJ2FwFNzAp8xkbfCnU_3FD48dIt14sd1XfTKP/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoNhQO151GEZRbTDMCgZjRBF9CpI-hKbbTrmBqgIq9je2OMF5ClGYWXAYA-5kjyAROG2tl6CnVUOWxxNTppe7__M41w5rIrfBPB0huSRqiaVaWTRuwUFBiHxwAHDTEYgJjy3M8NQ9wFchL/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.
Jika sudah kemudian klik simpan untuk menyimpan widget anda.
Jika anda Makatelah menambahkan kode di atas maka tampilannya akan seperti.
