√ Cara Membuat Progress ScrollBar di Blogger - Gubuk Pintar
Cara Membuat Progress ScrollBar di Blogger
Cara Membuat Progress ScrollBar di Blogger

Cara Membuat Progress ScrollBar di Blogger

Temukan cara membuat Progress ScrollBar di Blogger dalam artikel ini!

Cara Membuat Progress ScrollBar di Blogger
Cara membuat Progress ScrollBar di Blogger yang akan Gubuk Pintar bagikan kali ini terdapat dua varian, yaitu yang berwarna seragam dan gradasi. Kamu dapat memilih salah satunya.
 
Oh iya, bila kamu belum tahu apa itu Progress ScrollBar, Gubuk Pintar juga akan menjelaskan secara singkat beserta contohnya untuk kamu mempertimbangkan apakah akan menggunakannya atau tidak pada bagian selanjutnya dari artikel ini.
 
 
 
 

Apa Itu Progress ScrollBar?

Progress ScrollBar adalah fitur yang menunjukkan proses pengguliran halaman telah berlangsung. Khusus untuk blog, ini bisa menunjukkan seberapa jauh sebuah halaman artikel telah kamu baca.

Sifat dari Progress ScrollBar ini terpasang di blog adalah opsional. Sejatinya, setiap browser tentu telah memiliki Progress ScrollBarnya sendiri baik yang aktif terlihat maupun pasif. Nah, keuntungan memasang ScrollBar tambahan ini adalah karena tampilannya yang menarik dan aktif terlihat.
 
contoh progress scrollbar blog
Contoh Penggunaan Progress ScrollBar
Namun kamu perlu memperhatikan bagaimana desain template blog mu dulu ya. Jangan sampai dengan menambahkan Progress ScrollBar justru membuat pembaca mu bingung apa maksudnya karena desain mu template mu yang tidak cocok sehingga mengaburkan fungsinya.

Cara Membuat Progress ScrollBar di Blogger

Seperti yang telah disinggung pada awal artikel, kamu bisa memasang Progress ScrollBar di Blogger dengan dua varian warna yaitu yang seragam dan gradasi. Keduanya hanya dibedakan pada kode CSS nya saja tetapi tetap menggunakan script yang sama.
 
Berikut ini langkah-langkah membuat Progress ScrollBar di Blogger,
  1. Buka Edit HTML Tema blog mu

  2. Cari kode </body> atau &lt;/body&gt;

  3. Letakkan script berikut ini DI ATAS nya,

    <script type="text/javascript">
    //<![CDATA[
    var bar_bg = document.getElementById("hor-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("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. Cari kode </head> atau &lt;/head&gt;

  5. Letakkan salah satu CSS ini DI ATAS nya,


    Silahkan ganti kode warna yang Gubuk Pintar tandai dengan warna yang kamu inginkan ya.

  6. Cari kode <body> dan letakkan kode berikut ini DI ATAS nya tetapi DI BAWAH kode </head> atau &lt;/head&gt;

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

  7. Simpan Tema
 

Penutup

Seperti itulah cara membuat Progress ScrollBar di Blogger. Cara ini rasanya jauh lebih bermanfaat ketika membaca blog melalui smartphone karena Progress ScrollBar nya tidak fixed seperti di browser komputer.
 
***
 
Apabila memiliki pertanyaan seputar artikel Cara Membuat Progress ScrollBar di Blogger, silahkan tulis dikolom komentar ya.

Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!

Baca juga:

Gubuk Pintar
"If you waiting for idea for write than you're not a writter. You just a waiter"
Buka Komentar

0 komentar:

Posting Komentar