Memasang Tombol Back to Top dan Go to Down di Blog
SnippetBagi 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
Demikian tutorial Cara Memasang Tombol Back to Top dan Go to Down di Blog, semoga dengan tutorial di atas berhasil diterapkan pada blog Anda.