بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Back to Top atau kembali ke atas adalah widget yang berfungsi sebagai alat mempercepat navigasi ke atas blog atau artikel paling atas. Dengan widget ini kita tidak lagi menggunakan scroll browser.
Biasanya bila kita membaca postingan yang panjang sampai kebawah dan kita ingin kembali keatas pada alinea pertama maka kita menggunakan scroll yang ada di sisi kanan blog. Sehingga kita bisa drag dan drop.
Baca Juga : Widget Subscribe Box Elegan dan Unik Menawan
Tetapi dengan ikon widget Back to Top kita tidak perlu lagi susah-susah untuk kembali ke atas sendiri. Kita tinggal klik ikon Back to Top maka dengan sendirinya dia akan scroll sampai bagian atas.
Sungguh cepat bukan, dan tanpa memakan waktu yang lumayan panjang. Dengan sekali klik dan semua akan terlaksana dengan mudahnya. Kehebatan CSS memang patut diacungi jempol. Merombak system pada template blog menjadi super canggih.
Baca Juga : Widget Busuanzy Penghitung Penunjung Setia Blog
Pada Back to Top ini, ketika kita akan sampai ke bawah sendiri dari artikel maka akan ada tanda bulatan berwarna hijau bergerak memutar melingkari tanda panah yang menghadap ke atas. Efek animasinya bagus dan menambah kesan mewah ini.
Untuk tutorial kali ini, kita akan mempraktekkan Scroll Back to Top dengan cara-cara yang menarik dan mudah dipahami. Semaksimal mungkin dipermudah pokoknya. Petuah orang tua bilang, "Orang pinter adalah orang yang bisa menyederhanakan hal yang sulit" hehe ..
Okelah kalau begitu kita siap aja ya
Siyap Maszehhh ...
Smooth Scroll Back to Top Buat 1 Postingan
Masuk ke template ya. Temukan kode ]]></b:skin>, kemudian tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
scroll-behavior: smooth;
}
h1 {
background-color: #03cc65;
color: #ffffff;
font-size: 15vmin;
text-align: center;
padding-top: 30px;
}
h3 {
background-color: #03cc65;
color: #001a2e;
font-size: 8vmin;
text-align: center;
}
p {
font-size: 3vmin;
line-height: 2em;
letter-spacing: 0.05em;
text-align: justify;
margin: 50px 0;
padding: 0 30px;
}
#progress {
position: fixed;
bottom: 20px;
right: 10px;
height: 70px;
width: 70px;
display: none;
place-items: center;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#progress-value {
display: block;
height: calc(100% - 15px);
width: calc(100% - 15px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 35px;
color: #001a2e;
}Masih di otak-atik template, temukan lagi kode </body>, kemudian taruh kode javascript dibawah ini persis diatas kode </body> yang sudah kalian temukan tadi.
<script type='text/javascript'>
//<![CDATA[
let calcScrollValue = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
let scrollValue = Math.round((pos * 100) / calcHeight);
if (pos > 100) {
scrollProgress.style.display = "grid";
} else {
scrollProgress.style.display = "none";
}
scrollProgress.addEventListener("click", () => {
document.documentElement.scrollTop = 0;
});
scrollProgress.style.background = `conic-gradient(#03cc65 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;
//]]>
</script>Nah bila sudah tinggal cara terakhir biar kode keluar sempurna. Yaitu tempelkan kode dibawah ini di postingan yang akan diberi back to top.
<div id="progress">
<span id="progress-value">🠕</span>
</div>
<h3>Back To Top Button</h3>
<h3>With Scroll Progress</h3>
<p>
Artikel kamu disini
</p>
<p>
Artikel kamu tulis disini
</p>
<p>
Artikel kamu tulis disini lagi ya
</p>
<p>
Artikel kamu tulis disini lagi dan lagi
</p>Catatan
Untuk kata-kata yang diapit kode <p> dan </p> ganti dengan kata-kata yang akan kamu tulis di blog kamu ya.
Nah sekarang tinggal save semua pekerjaan kamu dan lihat. Pasti sudah jadi khan? ya terima kasih buat semua teman-teman semua yang sudah sudi mampir kesini sekedar membaca atau melihat-lihat blog ini. Terima kasih atas kunjungannya. Dan kami harap kunjungan selanjutnya di artikel kami yang lainnya. Terima kasih ya yang sudah mampir di Smooth Scroll Back to Top Buat 1 Postingan. Wassalam dan sampai jumpa.
Label Postingan :
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Smooth Scroll Back to Top Buat 1 Postingan . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
