Cara Memasang Slide Out Tombol Follow Di Blog Dengan Sangat Mudah

SEO - CaraMemasang Slide Out Tombol Follow Di Blog Dengan Sangat Mudah – kali ini saya akan bagikan informasi yang sangat penting dan sangat perlu anda tahu. Yaitu mengenai bagaimana cara memasang  “Follow this Blog”, yang memang sudah di sediakan oleh blog. Namun kali ini bedanya saya akan memasangnya dengan berbeda, yaitu memanfaatkan Script HTML agar Follow this blog tersebut tidak akan bisa hilang dan tidak akan memberatkan blog atau-pun mempengaruhi Kecepatan Loading Blog.

Ketika pengunjung menge-klik Follow this blog anda maka pengunjung tersebut akan selalu mendapatkan info terbaru dari artikel blog sobat. Bagaimana cara Memasangnya? Berikut ini informasi selengkapnya.

Cara Memasang Silide Out Tombol Follow This Blog

1. Buka Blog sobat > Tata Letak > Buat Widget > kemudian tambahkan kode di bawah 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/AVvXsEgFEwxZ0NSkwYHZCgvFI-ElWSxUKpsk5vLg-J3Bc_PosMbcXUIvo3v48KgbX5R7wtB9ic8-1kAOoYHQxatvevr_GYLJSIFS2ydzGD6VMeyehHW5Vt5hk6PlLM2UUk1HWuveTIvZ5cJqWrgG/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/AVvXsEja95luoyOoY19CFH-9sES9byIvxFaGkIpghWmZvIZPfrEGburGoZnmaYXlX4LUuVnASdGdOzTLIYsqHjWXgPU10yBHTjiMQhl8yVqRxFOCkN6y-89AlffSpvf7haM2GZqk5QOcnGRvAqAL/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

2. Simpan Widget dan silahkan sekarang sobat lihat blog sobat.

Demikianlah informasi mengenai Cara Memasang Slide OutTombol Follow Di Blog Dengan Sangat Mudah. Semoga dapat memberikan ilmu pengetahuan tentang Blog, jangan lupa berkomentar dan semoga bermanfaat.