√ Memasang Tombol Back to Top dan Go to Down di Blog

Memasang Tombol Back to Top dan Go to Down di Blog

6/21/2017

Kali ini saya share Cara Memasang Tombol Back to Top dan Go to Down di Blog. Trik ini saya dapatkan dari blog Kompi Ajaib dimana tombol back to top yang biasa ditambahkan dengan tombol go to down. Untuk tampilan tombol ini menggunakan before dan after, dengan arah panah ke bawah dan ke atas.

Bagi yang penasaran, silahkan ikuti tutorialnya sebagai berikut

Memasang Tombol Back to Top dan Go to Down di Blog

1. Login ke blog > Buka Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Back to Top and Down */
#BounceToTop{background:#D2D2D2;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none}#BounceToTop:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:0 15px 20px;border-color:transparent transparent #a6a6a6;line-height:0}#BounceToTop:hover:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:0 15px 20px;border-color:transparent transparent #464646;line-height:0 }#BounceToTop:after{content:'';position:absolute;bottom:5px;right:11px;width:0;height:0;border-style:solid;border-width:0 9px 12px;border-color:transparent transparent #d2d2d2;line-height:0}#GoToDown{background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px}#GoToDown:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0;border-color:#333 transparent transparent;line-height:0}#GoToDown:hover:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0;border-color:#888 transparent transparent;line-height:0 }#GoToDown:after{content:'';position:absolute;top:5px;right:11px;width:0;height:0;border-style:solid;border-width:12px 9px 0;border-color:#fff transparent transparent;line-height:0}

2. Kemudian salin kode di bawah ini sebelum </body>

<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$("#BounceToTop").fadeIn():$("#BounceToTop").fadeOut()}),$("#BounceToTop").click(function(){$("body,html").animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50)});var o=$("body");$("#GoToDown").click(function(){$("html, body").animate({scrollTop:o.height()},800),$("#GoToDown").fadeOut()}),$("#BounceToTop").click(function(){$("#GoToDown").fadeIn()})});
</script>
<div id='BounceToTop'></div>
<div id='GoToDown'></div>

3. Simpan template