Cara Membuat Tombol Scroll Back Top Tanpa JavaScript
August 19, 2019
Tombol TOP ke atas juga merupakan salah satu pengaruh bagusnya suatu blog, dan back to top juga merupakah salah satu SEO tidak langsung yang menjadikan blog semakin SEO Friendly dan disukai oleh Google karena memiliki pengarahan atau navigasi yang baik.
Jikak di template blog sobat belum ada tombol bak to top, maka saya sarankan sobat untuk memasangnya diblog sobat supaya blog sobat semakin baik dan bagus dan dapat mempermudah visitor sobat untuk kembali ke atas halaman sobat tanpa harus mengscroll secara manual.
Untuk pemasangan atau penerapannya pada theme blog sangatlah mudah hanya dengan melakukan peneditan HTML di theme blog sobat saja. Oia disini saya membagikan tanpa JavaScript dan Menggunakan JavaScript jadi tinggal sobat pilih sendiri mau menggunakan yang mana.
Cara Membuat Tombol Scroll Back Top Tanpa JavaScript
1. Pertama sobat Login ke Blogger
2. Pilih Template/Theme pada dasboard blogger sobat dan klik Edit HTML
3. Kemudian cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)
4. Jika sudah ketemu kodenya maka selanjutnya sobat copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
.scrolltop-wrap {
box-sizing: border-box;
position: absolute;
top: 12rem;
right: 2rem;
bottom: 0;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
fill: #007bff;
}
.scrolltop-wrap #scrolltop-arrow {
fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
fill: #2990ff;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
fill: white;
}
@supports (-moz-appearance: meterbar) {
.scrolltop-wrap {
clip: rect(0, 3rem, auto, 0);
}
}
.scrolltop-wrap a {
position: fixed;
position: -webkit-sticky;
position: sticky;
top: -5rem;
width: 3rem;
height: 3rem;
margin-bottom: -5rem;
-webkit-transform: translateY(100vh);
transform: translateY(100vh);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: inline-block;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
outline: none;
overflow: hidden;
}
.scrolltop-wrap a svg {
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
}
.scrolltop-wrap a svg path {
transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
-webkit-transform: scale(0.66);
transform: scale(0.66);
-webkit-transform-origin: center;
transform-origin: center;
}
@media print {
.scrolltop-wrap {
display: none !important;
}
}
Kemudian langkah ke-dua adalah cari lagi kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
<div class="scrolltop-wrap">
<a href="#" role="button" aria-label="Scroll to top">
<svg viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
<path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
<path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
</svg>
</a>
</div>
Cara Membuat Tombol Scroll Back Top Dengan JavaScript
1. Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas 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;
}
2. Dan cari lago kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>Demikianlah Cara Membuat Tombol Scroll Back Top di Blogger. Untuk DEMO nya sobat bisa melihat pada theme blog saya saat ini yang saya gunakan, seperti itulah demonya! Oke semoga bermanfaat ya!!
<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>
Sumber Referensi: codepen
Happy Blogging!!
0 komentar