Cara Memasang Efek Scroll Presentase di Scrollbar Blogger

Imamkunblog.com | selamat datang di imamkunblog pada artikel ini saya membuat artikel Tutorial Blogger lagi yaitu Cara Membuat Efek Scroll Presentase di scrollbar blogger. Dengan menambah efek scrollbar presentase maka tampilan blog anda jauh lebih keren dan menarik.

Manfaat memasang efek presentase pada scrollbar blogger yaitu dapat membantu para pengunjung blog seberapa juah mereka berada di halaman atau artikel yang sedang mereka baca. Efek ini sudah saya terapkan di blog saya ini untuk demo lihat saja pada scrollbar blog imamkunblog.

Tidak hanya memberikan efek scroll presentase tetapi juga mengubah scrollbar blogger anda jauh lebih keren dari biasanya yang putih tebal kini menjadi scrollbar kecil yang keren dan resposnive.

Presentase akan tampil pada saat anda melakukan scroll pada halaman blog. Presentase dimulai dari 0% hingga 100%, pada akhir artikel akan menampilkan 100% presentase. Sungguh membantu bukan?

Untuk memasang efek scroll presentase di scrollbar blogger hanya menggunakan kode CSS dan Javascript aja, nah bagaimana cara memasangnya? Silahkan ikuti berikut ini langkah-langkah memasang efek scroll presentase di blogger.

Cara Memasang Efek Scroll Presentase di Scrollbar Blogger

1. Pertama, login ke blogger.com > Theme/tema >Edit HTML.
2. Cari kode ]]></b:skin>, copy dan paste kode dibawah ini tepat diatas kode yang sudah ditemukan.


#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#008080;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

3. Kemudian cari kode </body>, copy dan paste kode dibawah ini diatas kode body.


<div id='scroll'></div>

4. Copy dan paste lagi kode Javacript dibawah ini dan paste diatas kode </body>


<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

5. Terakhir, simpan Template!! dan Lihat hasilnya.

Begitulah cara memasang efek scroll presentase di scrollbar blogger. jika anda ingin mengubah warna pada efek scroll anda dapat mengubah kode background-color:#008080 dengan kode warna sesuai keinginan anda.

Baca Juga: Cara Membuat Reading Progress Bar di Blogger

Demikian artikel kali ini semoga bermanfaat dan apabila ada yang ingin anda pertanyakan silahkan anda berkomentar dibawah!!