Cara Membuat Persentase (PERSEN) Keren Pada Scrollbar Blog

Cara Membuat Persentase Pada Scrollbar Blog - Ficri Pebriyana
Cara Membuat Persentase Pada Scrollbar Blog - Memasang atau menambahkan persentase pada scroll blog memang membuat blog lebih menarik, oleh karena itu Anda bisa menggunakan cara ini untuk mempercantik tampilan blog Anda. Scrollbar yang saya buat pada blog ini banyak sekali variasinya, pada setiap Template Blog memang tidak semuanya menggunakan tampilan persen ini pada scroll blog tersebut karena ini tidak terlalu penting dalam sebuah SEO dan tidak akan mempengaruhi kualitas blog Anda, hanya akan mempercantik tampilannya saja, tadi apa boleh buat tidak ada salahnya untuk mencoba tutorial membuat persentase paba scroll blog ini. Banyak sekali yang share mengenai cara membuat persentase pada scrollbar blog, namun semuanya hampir sama dan itu tidak valid html5 dan juga css level 3. Dengan begitu saya merubah beberapa kode agar menjadi Valid HTML5 dan Valid CSS3, dengan begitu Anda tidak usah ragu menambahkan kode script yang saya bagikan untuk Anda karena script ini sudah saya coba dan tidak menampilkan error html5 dan css3. Oke langsung saja ke tutorial Cara Membuat Persentase Pada Scrollbar Blog, silahkan lihat dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode script dibawah ini, lalu Paste diatas kode ]]></b:skin>
/* 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}
Catatan :
- Kode 5px : Jarak dari scrollbar, semakin besar angka yang diberikan maka akan semakin jauh letaknya.
- Kode 3px 8px : Merupakan tinggi dan  lebarnya kotak persen
- Kode yang berwarna #4B4B4B : Warna background kotak persen
- Koda yang berwarna #FFF : Warna huruf pada kotak persen
- Kode yang berwarna 3px : Memberikan efek melengkung pada kotak persen

Untuk mengganti warna silahkan kunjungi ini Kode Warna HTML


5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>

<div id='scroll'/>
7. Cari kode </body>
8. Copy kode dibawah ini, lalu 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>
9. Cari kode </head>
10. Copy javascript berikut, lalu Paste diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Catatan :
Jika blog Anda sudah memiliki JavaScript seperti diatas, Anda tidak perlu memasangnya lagi. Tetapi untuk jaga-jaga lebih baik memasangnya saja.