Cara memasang Progress Scrollbar di blogger
Progress scrollbar ini letaknya di bawah address bar pada browser yang Anda gunakan.
Ini disebut dengan progress scrollbar, yang berfungsi untuk memberitahu sampai dimana kita sedang berada pada halaman tersebut.
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 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.
Jika Anda tertarik untuk memasang progress scrollbar pada blog silahkan ikuti langkah-langkahnya di bawah ini.
- Seperti biasa masuk ke Blogger
- Klik Tema > Edit HTML
- 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); }
- Selanjutnya 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>
- Lalu tambahkan kode ini di bawah kode <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>Terakhir klik Simpan tema Selesai.
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.
Selamat mencoba. Semoga bermanfaat.
Post a Comment for "Cara memasang Progress Scrollbar di blogger"