Cara Membuat Progress Scrollbar dengan Warna Gradasi di Blog
Rabu, 12 Desember 2018
1 Komentar
Ada beberapa situs yang menambahkan efek progress (kemajuan) di bagian atas website atau blog ketika halaman tersebut di scroll ke bawah.
Akan muncul sebuah garis horizontal dengan efek seperti sedang loading, ketika kita scroll ke bawah maka garis tersebut akan bergerak ke kanan, dan ketika kita scroll ke atas garis tersebut akan bergerak ke kiri.
Ini disebut dengan progress scrollbar, yang berfungsi untuk memberitahu sampai dimana kita sedang berada pada halaman tersebut.
Pada postingan sebelumnya saya juga pernah membuat artikel tentang cara membuat persentase pada scrollbar blog.
Tidak jauh beda dengan itu, hanya saja untuk tutorial kali ini tidak ada angka yang menunjukan sampai dimana kita berada pada halaman website atau blog.
Semakin ke bawah progress scrollbar ini akan semakin bergeser ke kanan, dan ini juga bisa disebut dengan indikator scrollbar progress karena ini bisa memberitahu kita ketika berada di dalam blog.
Untuk website atau blog yang memiliki artikel atau postingan yang panjang atau yang memiliki banyak komentar pasti dalam satu halaman akan butuh beberapa kali scroll untuk bisa sampai ke bawah, progress scrollbar ini bisa memberitahu Anda sampai dimana Anda berada pada halaman tersebut.
Scrollbar progress ini sangat cocok untuk Anda yang ingin mempercantik blog Anda, namun perlu saya ingatkan bahwa progress scrollbar ini menggunakan javascript yang mungkin akan sedikit menambah beban loading blog Anda.
Progress scrollbar ini letaknya di bawah address bar pada browser yang Anda gunakan, saya juga menambahkan efek gradasi pada progress scroll bar ini sehingga terlihat lebih cantik dan colorfull, tapi jika Anda tidak suka Anda bisa 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 kode css ini di atas kode
4. Kemudian tambahkan kode javascript ini di atas kode
5. Lalu tambahkan kode ini di bawah kode
6. Terakhir klik Simpan tema
Jika Anda masih memiliki pertanyaan seputar memasang progress scrollbar ini, silahkan hubungi kami melalui halaman kontak atau bisa dengan berkomentar pada artikel ini.
Itulah artikel mengenai cara membuat progress scrollbar dengan warna gradasi di blog, selamat mencoba. Semoga bermanfaat.
Akan muncul sebuah garis horizontal dengan efek seperti sedang loading, ketika kita scroll ke bawah maka garis tersebut akan bergerak ke kanan, dan ketika kita scroll ke atas garis tersebut akan bergerak ke kiri.
Ini disebut dengan progress scrollbar, yang berfungsi untuk memberitahu sampai dimana kita sedang berada pada halaman tersebut.
Pada postingan sebelumnya saya juga pernah membuat artikel tentang cara membuat persentase pada scrollbar blog.
Tidak jauh beda dengan itu, hanya saja untuk tutorial kali ini tidak ada angka yang menunjukan sampai dimana kita berada pada halaman website atau blog.
Semakin ke bawah progress scrollbar ini akan semakin bergeser ke kanan, dan ini juga bisa disebut dengan indikator scrollbar progress karena ini bisa memberitahu kita ketika berada di dalam blog.
Untuk website atau blog yang memiliki artikel atau postingan yang panjang atau yang memiliki banyak komentar pasti dalam satu halaman akan butuh beberapa kali scroll untuk bisa sampai ke bawah, progress scrollbar ini bisa memberitahu Anda sampai dimana Anda berada pada halaman tersebut.
Scrollbar progress ini sangat cocok untuk Anda yang ingin mempercantik blog Anda, namun perlu saya ingatkan bahwa progress scrollbar ini menggunakan javascript yang mungkin akan sedikit menambah beban loading blog Anda.
Progress scrollbar ini letaknya di bawah address bar pada browser yang Anda gunakan, saya juga menambahkan efek gradasi pada progress scroll bar ini sehingga terlihat lebih cantik dan colorfull, tapi jika Anda tidak suka Anda bisa 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 kode css ini di atas kode
]]></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 kode javascript ini di atas kode
</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 bar
var bar = 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 kode ini di bawah kode
<body><div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>6. Terakhir klik Simpan tema
Catatan:
- Jika ingin mengganti warna silahkan ganti kode warna
- Jika ingin menggunakan satu warna saja atau flat design silahkan hapus kode
- Solusi bagi yang menggunakan sticky menu navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada kode
- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti kode
- Jika ingin mengganti warna silahkan ganti kode warna
#5E64EE dan #5EEE66 gunakan tool color picker ini.- Jika ingin menggunakan satu warna saja atau flat design silahkan hapus kode
background:linear-gradient(45deg, #5E64EE, #5EEE66); lalu ganti menjadi background:#2967E3; gunakan tool color picker untuk menyesuaikan warna yang Anda inginkan.- Solusi bagi yang menggunakan sticky menu navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada kode
top: 0; menjadi top: 45px;- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti kode
top: 0; menjadi bottom: 0;Jika Anda masih memiliki pertanyaan seputar memasang progress scrollbar ini, silahkan hubungi kami melalui halaman kontak atau bisa dengan berkomentar pada artikel ini.
Itulah artikel mengenai cara membuat progress scrollbar dengan warna gradasi di blog, selamat mencoba. Semoga bermanfaat.
Saya selalu ikuti cara dari cara manual dan selalu benar, tidak bohong seperti penulis lainya yang hanya mementingkan ketikan banyak biar dapay cuan.... trim s mas broo sukses buat anda
BalasHapus