Cara Terbaru Memasang Tombol Back To Top Di Blog

Posted by Info Dicky on

Friday, 9 June 2017

Cara Terbaru Memasang Tombol Back To Top Di Blog - Pada kesempatan kali ini saya akan membagikan informasi mengenai cara memasang tombol 'back to top' di blog dengan menggunakan Font Awesome. Tombol back to top merupakan salah satu komponen penting yang harus ada pada sebuah blog.

Karena dengan adanya tombol back to top atau tombol kembali ke atas ini akan mempermudah pengunjung untuk kembali ke halaman teratas blog hanya dalam satu klik saja tanpa harus men-scroll mouse atau mengusap - usap layar smartphone.

Lalu, bagaimana cara memasang tombol back to top ini ke dalam blog? Yuk, simak ulasannya berikut ini.

Cara Memasang Tombol Back To Top di Blog

Catatan :
Jika diblog kamu terdapat tombol 'back to top', kamu harus menghapusnya terlebih dahulu agar tombol 'back to top' nya tidak double yang bisa membuat loading blog kamu jadi lambat.

Berikut langkah -langkah pemasagannya.

1. Masuk ke Blogger. Lalu, pilih Theme/Tema > Edit HTML.
2. Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin> atau </style>.

#return-to-top{position:fixed;bottom:20px;right:20px;background:#000;background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all .3s linear;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top:hover{background:rgba(0,0,0,0.9)}
#return-to-top:hover i{color:#fff;top:5px}

3. Kemudian, copy dan pastekan kode JavaScript di bawah ini tepat di atas </body>.

<script type='text/javascript'>
//<![CDATA[
 $(window).resize(function () {
  var w = $(window).width();
  if (w > 800 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
//]]>
</script>

4. Selanjutnya, copy dan pastekan kode HTML Tombol Back to Top berikut ini tepat atas </body> atau diatas kode JavaScript diatas.

<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>

5. Save Template.

Itulah Cara Terbaru Memasang Tombol Back To Top Di Blog. Dengan adanya tombol back to top ini tentu akan membuat blog kamu menjadi lebih user friendly. Semoga bermanfaat.

Sumber Kode

Labels: Blogging

Thanks for reading Cara Terbaru Memasang Tombol Back To Top Di Blog. Please share...!