Template dan Tips Seputar Blogger

Wednesday, June 21, 2017

Memasang Tombol Back to Top dan Go to Down di Blog

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

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.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×