Cara Membuat Tombol Back To Top Keren Di Blog

Zona Internetku No Comment September 26, 2018

Cara Membuat Tombol Back To Top Keren Di Blog. Tombol Back To Top merupakan sebuah tombol pada blog yang berada di bagian tertentu dan digunakan untuk menuju kembali ke tampilan blog yang paling atas. Jadi dengan memasang tombol ini pengunjung tidak perlu repot repot melakukan scroll ke atas blog, tapi cukup hanya dengan menggunakan tombol Back To Top.
Dengan menambahkan tombol ini juga, maka bisa meningkatkan kenyamanan pengunjung blog kita sehingga para pengunjung blog betah untuk berlama lama berada di dalam blog kita.

Baca juga : Cara Membuat Tombol Demo Dan Download Keren Di Blog

Tutorial Untuk Memasang Tombol Back To Top Yang Keren Di Blogger Dengan Mudah

Berikut ini adalah sebuah tombol Back To Top yang bisa kalian coba untuk blog kalian
1. Tahap pertama, Masuk ke dalam blog kalian
2. Tahap kedua, Silahkan pilih menu "Tema" dan klik "Edit HTML"
3. Tahap berikutnya ialah kalian cari kode </head> dan letakkan kode berikut ini di atasnya

<style>
#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: none;outline: none;background-color: #1e8bc3;color: white;cursor: pointer;padding: 15px;border-radius: 4px;}
#myBtn:hover {background-color:#1F3A93;}
</style>

Kemudian cari kode </body> dan letakkan kode berikut ini di atasnya

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-chevron-up"></i></button>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

4. Setelah semua sudah selesai, maka kita akan menuju ke tahap terakhir yaitu menyimpan perubahan template blog tersebut dengan memilih tombol "Simpan Tema"

Baca juga :
Cara Mengganti Tombol Next Prev Dengan Judul Postingan
2 Cara Membuat Tampilan Kolom Komentar Keren Di Blog
Tutorial Mengganti Older Post Menjadi Load More Di Blog

Itu tadi adalah tutorial singkat mengenai Cara Membuat Tombol Back To Top Keren Di Blog yang bisa kalian coba sebagai alat navigasi blog kalian.

Promo Menarik