Cara Membuat Persentase Pada Scrollbar Blog Memasang persentase di scrollbar blog merupakan salah satu cara untuk mempercantik tampilan blog Anda, membuat persentase pada scrollbar blog akan terlihat lebih keren.
Dulu hal ini sangat banyak diminati dan digunakan oleh beberapa blogger, termasuk saya sendiri tapi digunakan di blog lain bukan yang ini.
Memasang widget persentase di blogger juga bisa membantu pengunjung mengetahui sejauh mana mereka ada pada halaman atau artikel yang sedang mereka baca.
Jadi jika kalian memasang persentase ini di blog maka akan muncul berapa persen Anda berada di halaman tersebut, mulai dari 0% jika berada di paling atas hingga 100% jika berada di paling bawah.
Bagi Anda yang memiliki artikel atau postingan panjang atau yang punya banyak komentar di blognya bisa menggunakan widget persentase ini.
Selain itu untuk memudahkan pengunjung melihat bagian atas artikel dan bagian bawah artikel bisa dengan memasang tombol go up dan go down di blog Anda.
Jadi tidak perlu lagi melakukan scroll atau gulir ke atas dan ke bawah, hanya dengan menekan tombol go up atau go down maka akan secara otomatis berada di bagian atas atau di bagian bawah, tentu cara ini akan lebih praktis.
Atau jika Anda hanya ingin meloncat ke bagian atas, maka bisa menggunakan tombol back to top.
Kode CSS untuk membuat persentase scrollbar ini sudah di optimasi dan valid CSS3.
Bagi Anda yang tertarik untuk membuat persentasi pada scrollbar blog, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Persentase Pada Scrollbar Blog
Cara Memasang Persentase Pada Scrollbar Blog
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Simpan kode css ini di atas kode ]]></b:skin> atau </style>
/* Scrollbar 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
}4. Kemudian simpan kode ini di atas kode <body>
<div id='scroll'/>5. Lalu tambahkan kode ini di atas 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>6. Klik Simpan tema