Memasang Tombol Back To Top Di Blog

Memasang Tombol Back To Top di Blog - Kali ini 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 membuatkan bagaimana cara memasang isyarat itu di blog Anda.

Walaupun tombol ini cukup sederhana, tetapi berdasarkan 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 isyarat di bawah ini sempurna di atas isyarat ]]></b:skin> atau </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}

2. Setelah itu tambahkan isyarat di bawah ini sempurna sebelum isyarat </body>

<div class="backtotop hide"><span></span>Atas</div> <script type='text/javascript'> $(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

Tweet

Subscribe to receive free email updates: