Skip to main content

Cara Memasang Progress Scrollbar Keren di Blog

Cara memasang Progress Scrollbar Keren di Blog - Tutorial kali ini saya akan membagikan cara membuat progress scrollbar atau biasa juga disebut animasi proses scrollbal di atas halaman atau postingan blog.

Progress Scrollbar adalah sebuah garis berwarna di atas postingan blog yang memberikan petunjuk pada pembaca sampai dimana artikel ini berakhir. Progress Scrollbar ini berbentuk sebuah garis horizontal berwarna di atas postingan blog atau berbentuk seperti loading, saat blog di scroll ke bawah garis tersebut akan bergerak ke arah kanan atau saat kita scroll ke atas maka garis tersebut akan bergerak ke arah kiri.

Sebenarnya disetiap browser yang kita miliki sudah mempunyai Progress bar di samping kanan layar anda, namun Progress bar yang satu ini berfungsi untuk memperindah blog kita, karena berbentuk horizon dan berwarna lebih menarik, sehingga para pembaca tidak merasa bosan lihat blog atau website kita.

Perlu diketahui walaupun mempercantik tampilan blog, progress scrollbar ini menggunakan JavaScript sehingga akan menambahkan sedikit beban pada loading atau proses memuat blog anda. Namun jika anda tertarik memasangnya di blog anda, silahkan ikuti tutorial berikut.

Cara Mudah Memasang Progress Crollbar Keren di Blog

1. Masuk ke blog anda > Pilih menu Tema > pilih Edit HTML

2. Tambahkan kode ini sebelum atau tepat berada di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt

<script type='text/javascript'>
//<![CDATA[
// scrollbar-top Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("scrollbar-top")){(r=$("scrollbar-top")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".scrollbar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>

3. Selanjutnya tambahkan kode ini tepat berada di bawah <body> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<scrollbar-top value='0' max='1'>
   <div class='scrollbar-color'>
      <span class='scrollbar'></span>    
   </div>
</scrollbar-top>

4. Lanjut, Tambahkan kode ini tepat berada si atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* scrollbar-top Scrollbar */
scrollbar-top{position:fixed;left:0;top:0;width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#2fc8b4;z-index:1000}
scrollbar-top::-webkit-scrollbar{background-color:transparent;z-index:10}
scrollbar-top::-webkit-scrollbar-top-value{background-color:#2fc8b4;z-index:10}
scrollbar-top::-moz-scrollbar{background-color:#2fc8b4;z-index:10}
.scrollbar-color{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.scrollbar{background-color:#2fc8b4;width:0%;display:block;height:inherit;z-index:10}
</style>

5. Terakhir, jika sudah selanjutnya pilih Simpan Tema

Untuk melihat hasilnya bisa di cek di bawah ini

Untuk yang bercetak tebal merah anda bisa memodifikasinya sesuai dengan keinginan anda sendiri, berikut keterngannya:

KodeKeterangan
top:0Kode tersebut agar Progress Crollbal tepat berada di atas, namun jika ingin meletakkan Progress Scrollbar di bawah postingan blog bisa menggantinya dengan kode ini bottom:0
#2fc8b4Bisa di ubah sesuai warna kesukaan anda, atau bisa menggantinya dengan gradient color
4pxDigunakan untuk mengubah tebalnya garis pada Progress Scrollbar

Sekian dari saya tutorial dari saya tentang Cara Memasang Progress Scrollbar Keren di blog, semoga tutorial ini sangat memberikan manfaat bagi anda. Jika ada sesuatu yang kurang jelas bisa langsung ditanyakan di kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar