Ada beberapa situs yang menambahkan dampak progress (kemajuan) di bab atas website atau blog saat halaman tersebut di scroll ke bawah.
Akan muncul sebuah garis horizontal dengan dampak 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 perihal 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 alasannya ialah 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 j4vascript 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 dampak gradasi pada progress scroll kafetaria ini sehingga terlihat lebih elok 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 isyarat css ini di atas isyarat
]]></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 isyarat j4vascript ini di atas isyarat
</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 isyarat ini di bawah isyarat
<body><div id="top-scrollbar"> <div id="top-scrollbar-bg"> </div> </div>6. Terakhir klik Simpan tema
- Jika ingin mengganti warna silahkan ganti isyarat warna
#5E64EE dan #5EEE66 gunakan tool color picker ini.- Jika ingin memakai satu warna saja atau flat design silahkan hapus isyarat
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 sajian navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada isyarat
top: 0; menjadi top: 45px;- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti isyarat
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 http://www.caramanual.com