Membuat Tombol Back To Top
September 07, 2017
Add Comment
Halo berjumpma lagi dengan Abdi, Abdi tidak akan berhenti menulis artikel sampai pengunjung puas.
Tapi itu bohong karena Abdi teh pasti cape menulis artikel begitu banyaknya dan yang paling utama Abdi males.
Udah sekarang sobat lanjut ke topik utama yaitu cara membuat tombol back to top.
Back to top apa itu? dalam bahasa indonesia "kembali ke atas" artinya setiap kali pengunjung membaca artikel yang panjang sampai ke bawah maka pengunjung harus scroll ke atas ya bisa dibilang memakan waktu walau hanya sebentar.
Nah, didisinilah fungsi back to top dengan menekan tombol tersebut makan akan secara otomatis kembali ke atas dengan wusss atau cepat.
Pada kali ini sobat akan membuat tombol back to top, monggo disimak.
Login ke Blogger >> Dashboard >> Tempalte >> Edit HTML
Salin skrip dibawah ini lalu tempel diatas skrip
Lalu salin skrip lagi dibawah ini lalu tempel diatas skrip
Lalu salin skrip lagi dibawah ini lalu tempel diatas skrip
Sekarang sobat akan membuat back to top dengan JavaScript, agak sedikit rumit menurut Saya.
Langkah pertama :
Login ke Blogger >> Dashboard >> Tempalte >> Edit HTML
Salin skrip dibawah ini lalu tempel diatas skrip
Salin skrip dibawah ini lalu tempel diatas skrip
Simpan template dan lihat hasilnya.
Cukup sekian tutorial Cara Membuat Back To Top, semoga bermanfaat dan selamat mencoba.
Tapi itu bohong karena Abdi teh pasti cape menulis artikel begitu banyaknya dan yang paling utama Abdi males.
Udah sekarang sobat lanjut ke topik utama yaitu cara membuat tombol back to top.
Back to top apa itu? dalam bahasa indonesia "kembali ke atas" artinya setiap kali pengunjung membaca artikel yang panjang sampai ke bawah maka pengunjung harus scroll ke atas ya bisa dibilang memakan waktu walau hanya sebentar.
Nah, didisinilah fungsi back to top dengan menekan tombol tersebut makan akan secara otomatis kembali ke atas dengan wusss atau cepat.
Pada kali ini sobat akan membuat tombol back to top, monggo disimak.
Membuat Back To Top
Langkah pertama :Login ke Blogger >> Dashboard >> Tempalte >> Edit HTML
Salin skrip dibawah ini lalu tempel diatas skrip
]]></b:skin>
.myTop {position:fixed; bottom:40px; right:30px; z-index:9999999;}
.myTop a {cursor:pointer; font-size:30px; background-color:rgba(25,171,234,0.9); color:#FFF; transition:all .3s ease; padding:12px 18px 20px; text-decoration:none;}
.myTop a:hover {background-color:#19abea; text-decoration:none;}
Lalu salin skrip lagi dibawah ini lalu tempel diatas skrip
</body>
<span class='myTop'><a href='#'> ↑ </a></span>
Lalu salin skrip lagi dibawah ini lalu tempel diatas skrip
<body>
<span class='myTop'><a href='#'> ↑ </a></span>
Membuat Back To Top Dengan JavaScript
Sebelumnya sobat sudah membaca Membuat Back To Top, back to top sebelumnya murni menggunakan HTML.Sekarang sobat akan membuat back to top dengan JavaScript, agak sedikit rumit menurut Saya.
Langkah pertama :
Login ke Blogger >> Dashboard >> Tempalte >> Edit HTML
Salin skrip dibawah ini lalu tempel diatas skrip
]]></b:skin>
#myTop {
background-color:rgba(25,171,234,0.9);
z-index:9999999;
color: #fff;
bottom: 40px;
cursor: pointer;
display: none;
position: fixed;
right: 30px;
font-size: 30px;
padding: 12px 18px 20px;
text-decoration: none
}
#myTop:hover {
background-color: #19abea;
}Salin skrip dibawah ini lalu tempel diatas skrip
</body>
<span onclick="topFunction()" id="myTop" title="Kembali ke atas">↑</span>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myTop").style.display = "block" ;
} else {
document.getElementById("myTop").style.display = "none" ;
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
Simpan template dan lihat hasilnya.
Cukup sekian tutorial Cara Membuat Back To Top, semoga bermanfaat dan selamat mencoba.
0 Response to "Membuat Tombol Back To Top"
Post a Comment