Cara Memasang Efek Scroll Presentase di Scrollbar Blogger

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