Cara Termudah Pasang Tombol Go To Up pada Blogger

11 Views12 Views
Read Time:1 Minute, 43 Second


Trendkan.NetTombol Go To Up pada blog fungsinya hanya untuk membantu pengguna blog dalam mengakses halaman blog agar lebih praktis. Namun, meskipun begitu, saya rasa tombol ini sangat penting untuk ditambahkan kedalam blog. Karena dengan tombol ini, pengunjung akan lebih mudah untuk pergi ke halaman atas apalagi jika artikel yang di bacanya cukup panjang ke bawah.

Cara Membuatnya

1. Yang pertama, setelah sobat trend berada di edit HTML pada template sobat, silahkan cari <head> dan letakkan di bawahnya kode berikut ini.

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Setelah itu masih di halaman yang sama, cari juga kode ]]></b:skin>, kemudian letakkan kode berikut ini tepat sebelum kode tersebut.

#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. masih di halaman yang sama cari juga kode </body> , dan letakkan kode ini diatasnya.

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="material-icons">keyboard_arrow_up</i></button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// 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 > 50 || document.documentElement.scrollTop > 50) {
mybutton.style.display = "block";
} else {
mybutton.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>

Setelah itu sobat bisa save template. dan Lihat hasilnya dengan menscroll ke bawah pada halaman blog sobat. Semoga berhasil ya sobat. Namun jika ada kendala atau masih bingung, silahkan saja tinggalkan komentar di bawah agar bisa segera saya bantu.

BACA JUGA  Peraturan Sekolah yang Aneh, Bikin Geleng-geleng Kepala
ArRahim
Berbagi itu bukan tentang seberapa besar dan seberapa berharganya apa yang kau beri, namun seberapa tulus dan ikhlasnya apa yang ingin kau beri.
administrator
Happy
Happy
Sad
Sad
Excited
Excited
Sleppy
Sleppy
Angry
Angry
Surprise
Surprise

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *