Cara Terbaru Memasang Tombol Back To Top Di Blog - Selamat Datang Sahabat di Lirik Lagu Dan Chord Gitar, Pada Artikel kali ini dengan judul Cara Terbaru Memasang Tombol Back To Top Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan dengan Tema Blogging, yang kami tulis ini ada manfaatnya. Cekidot, selamat menikmati.

Judul : Cara Terbaru Memasang Tombol Back To Top Di Blog
Link : Cara Terbaru Memasang Tombol Back To Top Di Blog

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

Cara Terbaru Memasang Tombol Back To Top Di Blog

Demikianlah Artikel Cara Terbaru Memasang Tombol Back To Top Di Blog

Sekian artikel Cara Terbaru Memasang Tombol Back To Top Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk Sahabat semua. Sampai jumpa di postingan lainnya.

Anda sekarang membaca artikel Cara Terbaru Memasang Tombol Back To Top Di Blog
Link : https://studentinsurances.blogspot.com/2017/06/cara-terbaru-memasang-tombol-back-to.html

Share this post