Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tips Blogger / Widget

Cara Menciptakan 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 ketika discroll ke bawah atau ke atas ada pergerakan pada bab scrollbar.
Cara Membuat dan Memasang Progress ScrollBar Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog

Pergerakan menyerupai animasi tersebut sering diaebut Progress ScrollBar. Memasang Progress ScrollBar pada blog akan terlihat lebih menarik ketika dilihat oleh pengunjung. Dan fungsinyapun sanggup diaebut hanya untuk mempercantik tampilan blog saja.

Namun bukan itu saja, fungsi lainnya ialah sebagai tanda kalau artikel yang kita baca sudah mencapai batas selesai suatu artikel. Makara pada ketika di scroll kebawah, animasi tersebut terlihat seakan-akan mencapai suatu titik. Makara pengunjung akan lebih gampang melihat selesai suatu artikel kita.

Progress ScrollBar terbilang sangat gampang untuk dipasang dan dibentuk ke dalam blog yang kita kelola. Dan memasang atau menciptakan progress scrollbar sama sekali tidak akan menciptakan loading blog menjadi berat.

Jika kalian tertarik untuk menciptakan atau memasang progress scrollbar didalam blog kalian, silahkan ikuti langkah-langkah dibawah ini.

Baca Juga Artikel Lain Kored.id :
Sebelum menambahkan arahan lainnya, bila blog atau template kalian belum memasang atau belum terdapat JQuery, silahkan tambahkan arahan JQuery dibawah ini sempurna diatas arahan </head>
<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 arahan </head> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan arahan dibawah ini sempurna diatas arahan </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 impian kalian. Jika dirasa sudah cukup dengan warna diatas, lanjut ke langkah selanjutnya

5. Lalu tambahkan arahan dibawah ini sempurna dibawah arahan <body>. Jika didalam arahan template kalian tidak terdapat arahan biasanya arahan 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 arahan </body>. Lalu tambahkan arahan dibawah ini sempurna diatas arahan </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 :

Membuat Progress ScrollBar dengan Warna Gradient

Untuk cara atau style Progress ScrollBar Style 2, cara pemasangannya hampir sama, namun warna yang dihasilkan lebih bervariasi, alasannya ialah warna yang dipakai menggunakan warna gradient.

1. Masih di Dashboard Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari arahan ]]></b:skin> atau </style>
4. Lalu tambahkan arahan css dibawah ini sempurna di atas arahan ]]></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 sempurna diatas arahan </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 kafe     var kafe = 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 arahan dibawah ini sempurna diatas arahan <body>
<div id="top-scrollbar"> <div id="top-scrollbar-bg"> </div> </div>

  • Silahkan ubah warna yang diberi warna merah sesuai impian kalian. Untuk warna gradient, bila kalian ingin menggunakan satu warna saja, silahkan hapus arahan background-gradient(45deg, #26A65B, #22A7F0), kemudian ganti dengan warna #2967E3
  • Untuk yang menggunakan sajian navigasi Sticky silahkan atur letak progress scrollbar pada arahan top 0: menjadi top: 45px;
  • Mengubah posisi Progress ScrollBar menjadi dibawah silahkan ubah arahan top: 0:menjadi 0
7. Kemudian, Simpan Tema

Itu saja yang sanggup kored id sampaikan pada tutotial wacana Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog. Semoga sanggup diterapkan ke dalam blog kalian. Terimakasih dan biar bermanfaat.

Artikel wacana Cara Membuat dan Memasang Progress ScrollBar Keren Di Blog orisinil dari blog https://www.kored.id. Jika ada yang menduplikat secara keseluruhan baik gambar atau goresan pena dari kored id. Segera insaf saja. Itu semua tidak ada gunanya.



Sumber arahan : Galih Design dan Kampung Design
Sumber https://www.kored.id/

Anda mungkin menyukai postingan ini :