Cara Membuat Tombol Follow Melayang Di Blog

Draplan.com - Cara membuat tombol follow Melayang di blog, Mungkin bagi sebagian orang pernah melihat sebuah blog yang memiliki sebuah widget follow subscribe blog yang melayang di kanan atau kiri pada halaman blog, hal itu bukan hanya sekedar untuk mempermudah para pengunjung untuk memfollow atau mensubscribe blog yang kita milik namun dengan tampilan yang dinamis pastinya menambahkan sebuah gadget follow ini akan juga dapat mempercantik tampilan blog anda.

Tombol ini akan lebih mudah di lihat oleh pengunjung karena posisinya yang selalu terlihat melayang di bagian bawah blog, sehingga apabila ada pengunjung yang suka dengan artikel anda,akan lebih mudah untuk Memfollow nya. Oke bagi anda yang penasaran dengan bagaimana caranya untuk memasang gadget follow yang keren bisa simak pemahasan berikut ini.

Cara Membuat Tombol Follow Melayang Di Blog
1.Login Ke Blogger.
2.Masuk Ke Tata Letak > Tambahkan Gadget.
3.Pilih HTML/JavaScript
4.Masukan Kode Berikut Ini Ke Dalam Nya.

<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/AVvXsEj9hoJpKJF5eMKJG1SL8nYaiF7rcPRO4YwgNb6hS8myc7kNHO0gUR0Mje4FHpwX7SA08q07rQG4EeYneshcv4kcxLEoR4-ID7X94k_3sh2DU8-Ul4wmtg93iD-Ho_0i5HMNLVaSMmmvUCSU/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=7603830551352159061" 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/AVvXsEgBqC_9cuve2aGC_odFQqZrThZ74vDyGlEsZ6ujXSdBzPNVWOZs09r3-874FQq0pnK7dDgeD_c0gSEQseblKMzlsE2cHRLcsRr-2VHqPIgInas-kYMszWer9fd-8vrWjrfy1iQZjoIaHEqC/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

Keterangan :
Ganti ID Yang Bertulisan Tebal Pada Kode Di Atas Dengan ID Blog Kalian Masing - Masing.
Jika Kalian Bingung Bagaimana Cara Mengambil ID Blog Kalian,Silakan Masuk Halaman Dashboard
Ambil ID Blog Kalian Pada Kotak Browser Di Atas Seperti Gambar Berikut ini:

5.Simpan Widget Jika Selesai -

Nah itulah cara membuat tombol follow Melayang di blog. Semoga artikel yang saya bagikan bermanfaat buat anda semua...

Hendra Hermawan

Hidup ini bukan hanya untuk mencari yang terbaik namun lebih kepada menerima kenyataan

Share this post