Tapi itu bohong alasannya yakni Abdi teh niscaya cape menulis article begitu banyaknya dan yang paling utama Abdi males.
Udah kini teman lanjut ke topik utama yaitu tips menciptakan tombol back to top.
Back to top apa itu? dalam bahasa indonesia "kembali ke atas" artinya setiap kali pengunjung membaca article yang panjang hingga ke bawah maka pengunjung harus scroll ke atas ya dapat dibilang memakan waktu walau hnya sebentar.
Nah, didisinilah fungsi back to top dengan menekan tombol tersebut makan akan setips otomatis kembali ke atas dengan wusss atau cepat.
Pada kali ini teman akan menciptakan tombol back to top, monggo disimak.
Membuat Back To Top
Langkah pertama :Login ke Blogger >> Dashboard >> Tempalte >> Edit HTML
Salin skrip dibawah ini kemudian 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 kemudian tempel diatas skrip
</body> <span class='myTop'><a href='#'> ↑ </a></span> Lalu salin skrip lagi dibawah ini kemudian tempel diatas skrip
<body> <span class='myTop'><a href='#'> ↑ </a></span> Membuat Back To Top Dengan JavaScript
Sebelumnya teman sudah membaca Membuat Back To Top, back to top sebelumnya murni memakai HTML.Sekarang teman akan menciptakan back to top dengan JavaScript, agak sedikit rumit berdasarkan Saya.
Langkah pertama :
Login ke Blogger >> Dashboard >> Tempalte >> Edit HTML
Salin skrip dibawah ini kemudian 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 kemudian tempel diatas skrip
</body> <span onclick="topFunction()" id="myTop" title="Membuat Tombol Back To Top">↑</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 Trik Membuat Back To Top, biar bermanfaat dan selamat mencoba. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment