GO Blog

Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulungan telah mencapai element batas maka di scroll akan muncul pensentase angka menjadi 100%.

Cara memasang scroll persentase pun tidak sulit, anda hanya perlu

Langkah 1 : Silahkan masuk ke akun Blogger dan pilih Template lalu Edit HTML. Copy dan pastekan kode dibawah ini di atas </style> atau ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}

#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #333;
}

Langkah 2 : Copy kode berikut ini dan letakkan di bawah kode tag </head>

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

Langkah 3 : Paste JavaScript ini di atas kode tag </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>

Langkah 4 : Simpan Template.

Lihat hasilnya dengan buka halaman blog anda dan scroll/gulung halaman.

Semoga berguna dan berhasil....