Ada beberapa situs yang menambahkan pengaruh progress (kemajuan) di pecahan atas website atau blog saat halaman tersebut di scroll ke bawah.
Akan muncul sebuah garis horizontal dengan pengaruh menyerupai sedang loading, saat kita scroll ke bawah maka garis tersebut akan bergerak ke kanan, dan saat kita scroll ke atas garis tersebut akan bergerak ke kiri.
Ini disebut dengan progress scrollbar, yang berfungsi untuk memberitahu hingga dimana kita sedang berada pada halaman tersebut.
Pada postingan sebelumnya aku juga pernah menciptakan artikel wacana cara menciptakan persentase pada scrollbar blog.
Tidak jauh beda dengan itu, hanya saja untuk tutorial kali ini tidak ada angka yang membuktikan hingga dimana kita berada pada halaman website atau blog.
Semakin ke bawah progress scrollbar ini akan semakin bergeser ke kanan, dan ini juga dapat disebut dengan indikator scrollbar progress sebab ini dapat memberitahu kita saat berada di dalam blog.
Untuk website atau blog yang mempunyai artikel atau postingan yang panjang atau yang mempunyai banyak komentar niscaya dalam satu halaman akan butuh beberapa kali scroll untuk dapat hingga ke bawah, progress scrollbar ini dapat memberitahu Anda hingga dimana Anda berada pada halaman tersebut.
Scrollbar progress ini sangat cocok untuk Anda yang ingin mempercantik blog Anda, namun perlu aku ingatkan bahwa progress scrollbar ini memakai javascript yang mungkin akan sedikit menambah beban loading blog Anda.
Progress scrollbar ini letaknya di bawah address kafetaria pada browser yang Anda gunakan, aku juga menambahkan pengaruh gradasi pada progress scroll kafetaria ini sehingga terlihat lebih manis dan colorfull, tapi jikalau Anda tidak suka Anda dapat mengganti warnanya menjadi flat atau satu warna saja.
Jika Anda tertarik untuk memasang progress scrollbar pada blog silahkan ikuti langkah-langkahnya di bawah ini.
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Masukan aba-aba css ini di atas aba-aba
4. Kemudian tambahkan aba-aba javascript ini di atas aba-aba
5. Lalu tambahkan aba-aba ini di bawah aba-aba
6. Terakhir klik Simpan tema
Jika Anda masih mempunyai pertanyaan seputar memasang progress scrollbar ini, silahkan hubungi kami melalui halaman kontak atau dapat dengan berkomentar pada artikel ini.
Itulah artikel mengenai cara menciptakan progress scrollbar dengan warna gradasi di blog, selamat mencoba. Semoga bermanfaat. Sumber https://www.caramanual.com/
Akan muncul sebuah garis horizontal dengan pengaruh menyerupai sedang loading, saat kita scroll ke bawah maka garis tersebut akan bergerak ke kanan, dan saat kita scroll ke atas garis tersebut akan bergerak ke kiri.
Ini disebut dengan progress scrollbar, yang berfungsi untuk memberitahu hingga dimana kita sedang berada pada halaman tersebut.
Pada postingan sebelumnya aku juga pernah menciptakan artikel wacana cara menciptakan persentase pada scrollbar blog.
Tidak jauh beda dengan itu, hanya saja untuk tutorial kali ini tidak ada angka yang membuktikan hingga dimana kita berada pada halaman website atau blog.
Semakin ke bawah progress scrollbar ini akan semakin bergeser ke kanan, dan ini juga dapat disebut dengan indikator scrollbar progress sebab ini dapat memberitahu kita saat berada di dalam blog.
Untuk website atau blog yang mempunyai artikel atau postingan yang panjang atau yang mempunyai banyak komentar niscaya dalam satu halaman akan butuh beberapa kali scroll untuk dapat hingga ke bawah, progress scrollbar ini dapat memberitahu Anda hingga dimana Anda berada pada halaman tersebut.
Scrollbar progress ini sangat cocok untuk Anda yang ingin mempercantik blog Anda, namun perlu aku ingatkan bahwa progress scrollbar ini memakai javascript yang mungkin akan sedikit menambah beban loading blog Anda.
Progress scrollbar ini letaknya di bawah address kafetaria pada browser yang Anda gunakan, aku juga menambahkan pengaruh gradasi pada progress scroll kafetaria ini sehingga terlihat lebih manis dan colorfull, tapi jikalau Anda tidak suka Anda dapat mengganti warnanya menjadi flat atau satu warna saja.
Jika Anda tertarik untuk memasang progress scrollbar pada blog silahkan ikuti langkah-langkahnya di bawah ini.
Membuat Progress Scrollbar di Blogger dengan Warna Gradasi
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Masukan aba-aba css ini di atas aba-aba
]]></b:skin> atau </style>/* Progress Scrollbar by caramanual.com */ #top-scrollbar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; overflow: hidden; z-index: 99999; } #top-scrollbar-bg { width: 100%; height: 100%; position: absolute; background:linear-gradient(45deg, #5E64EE, #5EEE66); }4. Kemudian tambahkan aba-aba javascript ini di atas aba-aba
</body><script> //<![CDATA[ var bar_bg = document.getElementById("top-scrollbar-bg"), body = document.body, html = document.documentElement; bar_bg.style.minWidth = document.width + "px"; document.getElementsByTagName("body")[0].onresize = function() { // Update the gradient width bar_bg.style.minWidth = document.width + "px"; } window.onscroll = function() { // Change the width of the progress kafetaria var kafetaria = document.getElementById("top-scrollbar"), dw = document.documentElement.clientWidth, dh = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ), wh = window.innerHeight, pos = pageYOffset || (document.documentElement.clientHeight ? document.documentElement.scrollTop : document.body.scrollTop), bw = ((pos / (dh - wh)) * 100); bar.style.width = bw + "%"; } //]]> </script>5. Lalu tambahkan aba-aba ini di bawah aba-aba
<body><div id="top-scrollbar"> <div id="top-scrollbar-bg"> </div> </div>6. Terakhir klik Simpan tema
Catatan:
- Jika ingin mengganti warna silahkan ganti aba-aba warna
- Jika ingin memakai satu warna saja atau flat design silahkan hapus aba-aba
- Solusi bagi yang memakai sticky hidangan navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada aba-aba
- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti aba-aba
- Jika ingin mengganti warna silahkan ganti aba-aba warna
#5E64EE dan #5EEE66 gunakan tool color picker ini.- Jika ingin memakai satu warna saja atau flat design silahkan hapus aba-aba
background:linear-gradient(45deg, #5E64EE, #5EEE66); lalu ganti menjadi background:#2967E3; gunakan tool color picker untuk menyesuaikan warna yang Anda inginkan.- Solusi bagi yang memakai sticky hidangan navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada aba-aba
top: 0; menjadi top: 45px;- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti aba-aba
top: 0; menjadi bottom: 0;Jika Anda masih mempunyai pertanyaan seputar memasang progress scrollbar ini, silahkan hubungi kami melalui halaman kontak atau dapat dengan berkomentar pada artikel ini.
Itulah artikel mengenai cara menciptakan progress scrollbar dengan warna gradasi di blog, selamat mencoba. Semoga bermanfaat. Sumber https://www.caramanual.com/