Cara Membuat Persentase Pada Scrollbar Blog Dengan Mudah

Cara Membuat Persentase Pada Scrollbar Blog Dengan Mudah

Memasang widget persentase di blogger 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.
Membuat Persentase Pada Scrollbar Blog

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 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. Selamat mencoba


Advertisement

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

No comments