Cara Membuat Tombol Follow Efek Slide Out di Blog Terbaru

Cara Membuat dan Memasang Slide Out Tombol Follow di Blog


Keberadaan tombol follow menjadi menu andalan wajib yang harus terpasang pada sebuah blog. Pasalnya tanpa adanya tombol follow tentu akan membuat blog menjadi terkesan kurang sempurna sehingga bisa dibilang tombol follow menjadi tools pelengkap navigasi situs kita.

Terlebih lagi, widget follow ini ternyata banyak dipasang oleh para Blogger pada blog atau situs milik mereka. Mereka menganggap bahwa tombol follow mempunyai fungsi yang cukup vital untuk mendukung kinerja sebuah blog.

Anggapan seperti itu sebenarnya sifatnya relatif bagi setiap Blogger dan mungkin saja terjadi perbedaan pendapat dikalangan mereka. Namun bagi saya sendiri beranggapan bahwa tombol follow harus ada dan terpasang rapi pada blog saya. Kenapa bisa begitu?

Alasannya tidak muluk-muluk kok. Ya karena saya ingin blog saya banyak yang mengikuti baik dari kalangan Blogger maupun pengunjung blog saya. Saya mengganggap jika semakin banyak follower maka semakin populer pula blog saya.

Lebih lanjut tombol follow pada sebuah blog dibuat dengan tujuan untuk mendapatkan pengikut sebanyak mungkin sehingga pada akhirnya diharapkan dapat memberikan manfaat dan keuntungan. Salah satu keuntungan tersebut ialah sebagai sarana untuk membangun relasi persahabatan antara sesama Blogger agar lebih kompak dan solid.

Jika relasi antara sesama Blogger terjalin dengan baik tentu hal ini akan sangat menguntungkan bagi prospek blog kita ke depannya nanti. Bahkan mungkin juga berkat tombol follow tersebut kita akan dengan mudah menemukan partner yang akan selalu siap memberikan saran dan kritik demi kemajuan sebuah blog.

Tidak hanya sebatas itu ternyata tombol follow juga dapat digunakan oleh para pengunjung atau visitor blog kita. Dengan begitu pengunjung akan lebih mudah untuk menemukan dan berkunjung kembali pada blog kita.

Biasanya pengunjung yang melakukan follow  pada blog kita merupakan pengunjung tetap yang memang benar-benar tertarik terhadap konten-konten yang telah kita sajikan sehingga pengunjung tidak ingin sedikitpun ketinggalan update konten pada blog atau situs kita. Oke langsung saja berikut tutorialnya.

Cara Memasang Slide Out Widget Follow di Blog

1. Login ke akun Blogger masing-masing.

2. Pergi ke bagian Tata letak > Buat widget baru > Tambahkan 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>

Catatan: Jangan lupa untuk mengganti blog ID dengan blog ID kalian masing-masing.

3. Terakhir, silakan Simpan widget.

Nah cukup mudah bukan tentang "Cara Membuat Tombol Follow di Blogger". Semoga bermanfaat. Terimakasih.

Postingan terkait:

Belum ada tanggapan untuk "Cara Membuat Tombol Follow Efek Slide Out di Blog Terbaru"

Post a Comment