Cara Membuat dan Memasang Persentase Pada Scrollbar Blog Yang Valid - Sebagian Blogger banyak yang memasang persentasepada Scrollbar blognya , hal itu berguna untuk mengukur berapa persen anda menggulang tampilan layout blog tersebut dalam bentuk persen .
Widget persentase ini cara pemasangannyan berbeda dengan tutorial blog lain , karena hasilnya nanti tidak ada error ketika anda cek di valdator html5 maupun css3 , sehingga dengan memasang widget ini blog anda akan tetap valid .
Bagi anda yang penasaran seperti apakah the widget Persentase Scrollbar Blog ? silakan perhatikan gambar berikut
Berikut Cara Membuat Persentase Untuk Scrollbar Blog Yang Valid
1. Pertama silahkan sobat masuk ke Blogger.com2. 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}- 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
5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>
<div id='scroll'/>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>10. Copy javascript berikut, lalu Paste diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>Jika blog Anda sudah memiliki JavaScript seperti diatas, Anda tidak perlu memasangnya lagi. Tetapi untuk jaga-jaga lebih baik memasangnya saja.
Nah itulah Cara Gampang Membuat Persentase Untuk Scrollbar Blog Yang Valid , semoga tutorial tersebut bermanfaat bagi anda . oh iya jika anda merasa kesulitan untuk memasang widget Persentase pada scrollbar blog anda , silahkan komentar di bawah
Selamat Mencoba
