Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog
Cara Membuat dan Memasang Progress ScrollBar
Membuat ScrollBar di blog - Mungkin diantara kalian sudah sering melihat suatu blog pada saat discroll ke bawah atau ke atas ada pergerakan pada bagian scrollbar.
Pergerakan seperti animasi tersebut sering diaebut Progress ScrollBar. Memasang Progress ScrollBar pada blog akan terlihat lebih menarik ketika dilihat oleh pengunjung. Dan fungsinyapun bisa diaebut hanya untuk mempercantik tampilan blog saja.
Namun bukan itu saja, fungsi lainnya ialah sebagai tanda kalau artikel yang kita baca sudah mencapai batas akhir suatu artikel. Jadi pada saat di scroll kebawah, animasi tersebut terlihat seolah-olah mencapai suatu titik. Jadi pengunjung akan lebih mudah melihat akhir suatu artikel kita.
Progress ScrollBar terbilang sangat mudah untuk dipasang dan dibuat ke dalam blog yang kita kelola. Dan memasang atau membuat progress scrollbar sama sekali tidak akan membuat loading blog menjadi berat.
Jika kalian tertarik untuk membuat atau memasang progress scrollbar didalam blog kalian, silahkan ikuti langkah-langkah dibawah ini.
Baca Juga Artikel Lain Kored.id :
Jika sudah memasangnya. Silahkan ikuti langkah selanjutnya
1. Seperti biasa login ke blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode </head> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan kode dibawah ini tepat diatas kode </head>
Silahkan ubah warna Progresa ScrollBar sesuai keinginan kalian. Jika dirasa sudah cukup dengan warna diatas, lanjut ke langkah selanjutnya
5. Lalu tambahkan kode dibawah ini tepat dibawah kode <body>. Jika didalam kode template kalian tidak terdapat kode biasanya kode tersebut menjadi <body expr:class='data:blog.pageType' itemscope='' itemtype='https://schema.org/WebPage'>
6. Selanjutnya cari lagi kode </body>. Lalu tambahkan kode dibawah ini tepat diatas kode </body>
7. Kemudian, Simpan Tema. Dan silahkan lihat sendiri hasilnya.
Baca Juga Artikel Menarik lainya dari Kored.id :
Membuat Progress ScrollBar dengan Warna Gradient
Untuk cara atau style Progress ScrollBar Style 2, cara pemasangannya hampir sama, namun warna yang dihasilkan lebih bervariasi, karena warna yang digunakan memakai warna gradient.
1. Masih di Dashboard Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode css dibawah ini tepat di atas kode ]]></b:skin> atau </style>
5. Tambahkan juga JavaScript dibawah ini tepat diatas kode </body>
6. Terakhir, tambahkan kode dibawah ini tepat diatas kode <body>
Itu saja yang dapat kored id sampaikan pada tutotial tentang Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog. Semoga bisa diterapkan ke dalam blog kalian. Terimakasih dan semoga bermanfaat.
Artikel tentang Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog asli dari blog https://www.kored.id. Jika ada yang menduplikat secara keseluruhan baik gambar atau tulisan dari kored id. Segera insaf saja. Itu semua tidak ada gunanya.
Sumber kode : Galih Design dan Kampung Design
Membuat ScrollBar di blog - Mungkin diantara kalian sudah sering melihat suatu blog pada saat discroll ke bawah atau ke atas ada pergerakan pada bagian scrollbar.
Pergerakan seperti animasi tersebut sering diaebut Progress ScrollBar. Memasang Progress ScrollBar pada blog akan terlihat lebih menarik ketika dilihat oleh pengunjung. Dan fungsinyapun bisa diaebut hanya untuk mempercantik tampilan blog saja.
Namun bukan itu saja, fungsi lainnya ialah sebagai tanda kalau artikel yang kita baca sudah mencapai batas akhir suatu artikel. Jadi pada saat di scroll kebawah, animasi tersebut terlihat seolah-olah mencapai suatu titik. Jadi pengunjung akan lebih mudah melihat akhir suatu artikel kita.
Progress ScrollBar terbilang sangat mudah untuk dipasang dan dibuat ke dalam blog yang kita kelola. Dan memasang atau membuat progress scrollbar sama sekali tidak akan membuat loading blog menjadi berat.
Jika kalian tertarik untuk membuat atau memasang progress scrollbar didalam blog kalian, silahkan ikuti langkah-langkah dibawah ini.
Baca Juga Artikel Lain Kored.id :
- Cara Membuat Tabel Spesifikasi Responsive didalam Artikel Blog
- Cara Membuat Notifikasi Cookies Pada Blog Dengan Cookie Consent
- Cara Memasang Web Push Notifikasi di Blogger
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Jika sudah memasangnya. Silahkan ikuti langkah selanjutnya
1. Seperti biasa login ke blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode </head> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan kode dibawah ini tepat diatas kode </head>
<style type="text/css">
/*Progress ScrollBar*/
progress {position: fixed;left: 0;top: 0;width: 100%;height: 2px;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;background-color: transparent;color: #eefba3;z-index: 9999;}
progress::-webkit-progress-bar {background-color: transparent;z-index: 10;}
progress::-webkit-progress-value {background-color: #19B5FE;z-index: 10;}
progress::-moz-progress-bar {background-color: #eefba3;z-index: 10;}
.progress-container {width: 100%;background-color: transparent;position: fixed;top: 0;left: 0;height: 5px;display: block;z-index: 10;}
.progress-bar {background-color: #eefba3;width: 0%;display: block;height: inherit;z-index: 10;}
</style>Silahkan ubah warna Progresa ScrollBar sesuai keinginan kalian. Jika dirasa sudah cukup dengan warna diatas, lanjut ke langkah selanjutnya
5. Lalu tambahkan kode dibawah ini tepat dibawah kode <body>. Jika didalam kode template kalian tidak terdapat kode biasanya kode tersebut menjadi <body expr:class='data:blog.pageType' itemscope='' itemtype='https://schema.org/WebPage'>
<progress max='1' value='0'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>6. Selanjutnya cari lagi kode </body>. Lalu tambahkan kode dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
//Progress Bar
$(document).ready(function() {
var getMax = function() {
return $(document).height() - $(window).height();
}
var getValue = function() {
return $(window).scrollTop();
}
if ('max' in document.createElement('progress')) {
var progressBar = $('progress');
progressBar.attr({
max: getMax()
});
$(document).on('scroll', function() {
progressBar.attr({
value: getValue()
});
});
$(window).resize(function() {
progressBar.attr({
max: getMax(),
value: getValue()
});
});
} else {
var progressBar = $('.progress-bar'),
max = getMax(),
value, width;
var getWidth = function() {
value = getValue();
width = (value / max) * 100;
width = width + '%';
return width;
}
var setWidth = function() {
progressBar.css({
width: getWidth()
});
}
$(document).on('scroll', setWidth);
$(window).on('resize', function() {
max = getMax();
setWidth();
});
}
});
//]]>
</script>7. Kemudian, Simpan Tema. Dan silahkan lihat sendiri hasilnya.
Baca Juga Artikel Menarik lainya dari Kored.id :
- Cara Membuat Rating Bintang Didalam Postingan Artikel Blog
- Cara Daftar dan Memasang Histats di Blogger [Lengkap]
Membuat Progress ScrollBar dengan Warna Gradient
Untuk cara atau style Progress ScrollBar Style 2, cara pemasangannya hampir sama, namun warna yang dihasilkan lebih bervariasi, karena warna yang digunakan memakai warna gradient.
1. Masih di Dashboard Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode css dibawah ini tepat di atas kode ]]></b:skin> atau </style>
/* Progress Scrollbar Gradient*/
#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, #26A65B, #22A7F0);}5. Tambahkan juga JavaScript dibawah ini tepat diatas 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>6. Terakhir, tambahkan kode dibawah ini tepat diatas kode <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>- Silahkan ubah warna yang diberi warna merah sesuai keinginan kalian. Untuk warna gradient, jika kalian ingin menggunakan satu warna saja, silahkan hapus kode background-gradient(45deg, #26A65B, #22A7F0), lalu ganti dengan warna #2967E3
- Untuk yang menggunakan menu navigasi Sticky silahkan atur letak progress scrollbar pada kode top 0: menjadi top: 45px;
- Mengubah posisi Progress ScrollBar menjadi dibawah silahkan ubah kode top: 0:menjadi 0
Itu saja yang dapat kored id sampaikan pada tutotial tentang Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog. Semoga bisa diterapkan ke dalam blog kalian. Terimakasih dan semoga bermanfaat.
Artikel tentang Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog asli dari blog https://www.kored.id. Jika ada yang menduplikat secara keseluruhan baik gambar atau tulisan dari kored id. Segera insaf saja. Itu semua tidak ada gunanya.
Sumber kode : Galih Design dan Kampung Design