Cara Membuat Progress ScrollBar di Blogger

Progress ScrollBar merupakan sebuah fitur yang memiliki fungsi sebagai tanda bahwa artikel yang sedang kamu baca sudah mencapai akhir dari isi artikel tersebut. Jadi nantinya animasi ScrollBar ini akan seolah-olah penuh dan mencapai titik akhir.

Jika kamu termasuk seorang yang suka mempercantik tampilan blog, memasang progress ScrollBar ini mungkin perlu kamu coba. Namun perlu di ingat, ScrollBar ini dibuat menggunakan Javascript, jadi akan sedikit membuat loading blog kamu berat.

Pada kesempatan kali ini penulis akan memberikan sedikit tutorial singkat Cara Membuat Progress ScrollBar pada Artikel di Blogger. Jika kamu tertarik untuk memasangnya, kkamu bisa simak dalam tutorial berikut ini.

Tutorial

1. Log in ke akun Blogger – Tema  – Edit Html

PicsArt 11 03 08.44.42

2. Copy dan Pastekan kode Style CSS di bawah ini dan taruh tepat sebelum kode ]] ></b:skin> atau </style>

CSS kode

/* Progress ScrollBar Gradient Color */
#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);}

3. Masukan kode Javascript di bawah ini tepat sebelum kode </body>

JS kode

<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>

4. Masukan kode pemanggil di bawah ini tepat diatas kode <body>

action kode

<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>

5. Simpan Tema. 

Berikut adalah tampilan Progress ScrollBar dengan Efek Gradient Color  yang telah terpasang di Blogger.

tampilan scroll bar

Sekian tutorial Cara Membuat Progress ScrollBar dengan Efek Gradient Color di Blogger yang telah penulis bagikan untuk kamu. Jika kamu memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ya. Semoga bermanfaat.

Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending Minggu Ini

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Inwepo Navigasi

Tentang Kami             Beranda

Hubungi Kami             Panduan Penulis

Kebijakan Privasi

FAQ

Partner

Copyright © 2014 - 2023 Inwepo - All Rights Reserved.

To Top