blog ini sudah banyak tutorial cara memasang tombol kembali ke atas  Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger
Cara Memasang, Menampilkan, atau Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger.

DI blog ini sudah banyak tutorial cara memasang tombol kembali ke atas (Cara Memasang Back to Top untuk Blogger Ringan Responsive.

Kali ini kembali CB share perihal cara memasang aba-aba tombol kembali ke atas yang lebih oke, ringan, responsive, memakai Font Awesome.

Demonya dapat dilihat di Code Pen yang menjadi sumber aba-aba Back to Top Button for blogger blog ini.

Tombol ini menimbulkan blog kita ramah pengguna (user friendly) dan merupakan ekspresi dominan tambilan website masa kini. Back to Top Button ini memudahkan pengunjunh kembali ke halaman teratas blog dalam satu klik atau satu tap.

Desain tampilannya persis ibarat gambar ilustrasi di postingan ini.

Cara Memasang Tombol Kembali ke Atas (Back to Top Button)

1. Klik Theme/Tema > Edit HTML
2. Masukkan (Copas) tiga aba-aba Tombol Kembali ke Atas untuk Blogger berikut ini.

KODE CSS:
Simpan di atas ]]></b:skin>

#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}

Kode JavaScrip Tombol "Kembali ke Atas"
Simpan di atas aba-aba </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>

KODE HTML Back to Top Button
Simpan di atas aba-aba </body>

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

See the Pen Return to Top Arrow by rdallaire (@rdallaire) on CodePen.


Demikian Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger. Good Luck & Happy Blogging! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours