Cara Membuat Tombol Follow Efek Slide Out di Blogspot

Cara Memasang Slide Out Tombol Follow di Blog


Cara membuat tombol follow di blogger dengan mudah

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.

Baca Juga: Cara Mengganti Header Blog Dengan Logo dan Gambar

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.

Baca Juga: Cara Memasang Kolom Komentar Facebook di Blogger (Responsive)

Cara Memasang Slide Out Widget Follow di Blog

1. Login ke akun Blogger masing-masing.

2. Lalu 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>

3. Silakan, Simpan widget.

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

Nah cukup mudah bukan tentang "Cara Membuat Tombol Follow di Blogger". Jangan lupa share ya. Semoga bermanfaat. Terimakasih. Http://droidide.com

0 Response to "Cara Membuat Tombol Follow Efek Slide Out di Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel