Memasang Tombol Back To Top di Blog

Memasang Tombol Back To Top di Blog

Snippet Tips Blogger

Arlina

1/13/2016

Kali ini Arlina Code akan share tombol back to top yang lebih sederhana. Bagi Anda yang ingin memasang tombol kembali ke atas atau back to top, di sini Saya akan berbagi bagaimana cara memasang kode itu di blog Anda.

Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis. Tombol ini nantinya akan muncul di pojok bawah kanan blog Anda. Oke! Langsung saja kita menuju tutorial :

1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini sebelum kode </head>

<style>
/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}
</style>

2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>

<div class="backtotop hide"><span></span>Atas</div>
<script>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>

3. Terakhir simpan template dan lihat hasilnya.

• Result

Arlina