Cara Memasang Tombol Back To Top di Blog Responsive

Cara Memasang Tombol Back To Top di Blog Responsive

Nanda Fransiska 02

cara memasang tombol back to top ringan
Memasang tombol kembali keatas

Tombol back to top atau kembali ke atas cukup membantu pembaca, lalu bagaimana cara memasang tombol ini di blog yang ringan dan minimalist?

Tulisan Panda kali ini akan share bagaimana cara memasang tombol back to top di blog anda. Mungkin kamu sering melihat tombol ini bukan? Ya, ketika kamu sudah sampai pada akhir bacaan atau bagian bawah sebuah halaman situs web atau blog, maka secara otomatis tombol ini akan muncul

Fungsinya adalah, ketika tombol di klik maka otomatis halaman akan digulir dan berakhir pada bagian paling atas halaman post

Script yang saya dapatkan yaitu dari Arlinadzgn, dimana tampilannya yang minimalist, dan ringan.
Tombol ini otomatis akan muncul pada bagian pojok kanan bawah. Berikut kami sampaikan tutorial pemasangannya

Cara Memasang Tombol Back To Top di Blog


  • Login Blogger > Template > Edit Template
  • Kemudian, letakkan script dibawah ini tepat diatas kode ]]></b:skin> atau </style>
  • 
    /* Back To Top TulisanPanda.com */
    .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}
    
  • Dan tambahkan kode dibawah ini tepat diatas </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>
  • Tetakhir klik Simpan Template

Dengan demikian kamu sudah berhasil memasang dan menerapkan tombol back to top atau kembali ke atas di blog kamu

Sumber : https://www.arlinadzgn.com/2016/01/memasang-tombol-back-to-top-di-blog.html