Cara Memasang Persentase Scroll Bar di Blog Valid CSS3 dan HTML5

Pasang Persentase Scroll di Blog

Beberapa para Blogger ada yang menggunakan persentase scrollbar di blognya, untuk mengetahui berapa persentase dari tinggi layout dari halaman yang dikunjungi. Widget ini valid HTML5 dan CSS3. Langsung saja lihat cara membuat persentase scroll di blog.

Tutorial :

1. Masuk Blogger anda
2. Klik Template > edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy code berikut ini, lalu Paste diatas ]]></b:skin> atau </style>

/* Scroll Persentase */
#scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#4B4B4B;color:#FFF;border-radius:3px}
#scroll:after{position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#4B4B4B}

* Keterangan :

Kode right:5px; > Jarak dari Scrollbar, jika angkanya semakin besar, maka jarak dari scrollbar semakin jauh

Kode padding:3px 8px; > Tinggi dan lebarnya kotak persentase

Kode background-color:#4B4B4B; > Warna dari background kotak persentase

Kode color:#fff; > Warna huruf pada kotak persentase

Kode border-radius:3px} > Memberikan efek kotak yang sudutnya melengkung

5. Cari code <body>

6. Salin kode HTML dibawah, lalu Tempel dibawah kode <body>

<div id='scroll'/>

7. Selanjutnya lagi, cari kode </body>
8. Salin kode JQuery berikut ini, lalu Tempel 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>

9. Cari kode </head>
10. Copy kode JavaScript berikut ini, lalu Paste diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

* Peringatan :
Kalau blog anda sudah terdapat kode seperti diatas / jquery.min.js, anda tidak perlu lagi menggunakan kode diatas, atau untuk jaga2, lebih baik pasang saja.

Sumur : http://www.masyadi.com/2014/10/cara.buat.persentase.scrollbar.blog.html