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.

Cara Membuat Tombol Kembali ke Atas

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

Kali ini kembali CB share tentang cara memasang kode tombol kembali ke atas yang lebih oke, ringan, responsive, menggunakan Font Awesome.

Demonya bisa dilihat di Code Pen yang menjadi sumber kode Back to Top Button for blogger blog ini.

Tombol ini menjadikan blog kita ramah pengguna (user friendly) dan merupakan trend 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 seperti 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 kode 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 kode </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 kode </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.


Cara Membuat Back to Top Lainnya

Cara lainnya dari w3Schools berikut ini. Sama-sama simple dan ringan.

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: none;outline: none;background-color: red;color: white;cursor: pointer;padding: 15px;border-radius: 4px;}
#myBtn:hover {background-color: #555;}

3. Copas kode berikut ini di atas kode </body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

Jika menggunakan font awesome, ganti tulisan Top warna merah dengan kode ini

<i class='fa fa-arrow-up'/>
atau

<i class="fa fa-chevron-up">

sehingga menjadi begini:

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class='fa fa-arrow-up'/></button>

4. Save! Simpan template.

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

Thanks for reading Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger | Labels: Desain Blog edit this post
Author Image

About CB Blogger
Contoh Blog --sebut saja CB -- Panduan Blogging untuk Pemula - Tips SEO, Desain, Template SEO Friendly, Cara Membuat Blogger Keren, Google Adsense, dll. Subscribe! to get update via email.

1 komentar on Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger

Contact Form

Name

Email *

Message *

Back To Top