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.

 

Daftar Isi

Apa Itu Progress ScrollBar? Cara Membuat Progress ScrollBar di Blogger Cara Mengubah Progress ScrollBar Vertical Blogger Penutup

 

 

 

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

Baca Juga: Cara Membuat Tanda Centang (√) di Judul Artikel Blog

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 </body>
   
   
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 </head>
   
   
5. Letakkan salah satu CSS ini DI ATAS nya,
   
   
   CSS Untuk Warna Progress ScrollBar Seragam

   <style type='text/css'>
   #scrollbar {
       position: fixed;
       top: 0;
       left: 0;
       overflow: hidden;
       width: 0%;
       height: 4px;
       z-index: 9999;
   }
   
   #scrollbar-bg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color:#F62869;
   }
   </style>

   CSS Untuk Warna Progress ScrollBar Gradasi

   <style type='text/css'>
   #scrollbar {
       position: fixed;
       top: 0;
       left: 0;
       overflow: hidden;
       width: 0%;
       height: 4px;
       z-index: 9999;
   }
   
   #scrollbar-bg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color:linear-gradient(45deg, #FF17E4, #FF1744);
   }
   </style>

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

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

   
   
7. Simpan Tema
   

 

Cara Mengubah Progress ScrollBar Vertical Blogger

Kalau cara sebelumnya adalah membuat sebuah scrollbar baru yang bentuknya horizontal (melintang), cara kali ini adalah mengatur progress scrollbar vertikal (berdiri) yang ada di kanan halaman ini.

 

Seperti apa yang bisa kamu lihat, progress scrollbar Gubuk Pintar berbeda dengan bawaan browser pada umumnya. Ini telah Gubuk Pintar modifikasi agar tampilannya lebih nyaman. Seperti ini cara melakukannya,

1. Buka Edit HTML Tema Blog mu
   
   
2. Cari kode </body> atau </body>
   
   
3. Letakkan script berikut ini DI ATAS nya,
   
   

   /* Progress Scrollbar Vertical By GubukPintar */
   :root{scrollbar-width: thin !important;}
   ::-webkit-scrollbar {width: 7px; height: 10px;}
   ::-webkit-scrollbar-thumb {height: 30px; background-color: #cdcdcd;}
   ::-webkit-scrollbar-thumb:hover {height: 30px; background-color: #a6a6a6;}
   ::-webkit-scrollbar-track-piece  {background-color: #efefef;}

   
   
4. Simpan Tema

Cara diatas setidaknya akan berjalan dengan baik di Mozilla Firefox, Google Chrome dan beberapa browser populer lainnya (pastikan sudah update terbaru). Kamu juga dipersilahkan mengganti kode yang diwarnai sesuai dengan keinginan mu.

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: