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.
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.
2. Klik Tema > Edit HTML
3. Simpan kode css ini di atas kode
4. Kemudian simpan kode ini di atas kode
5. Lalu tambahkan kode ini di atas kode
6. Klik Simpan tema. Selamat mencoba
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 Memasang Persentase Pada Scrollbar Blog
1. Masuk ke Blogger.com2. 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
Copyright ©
Masmur Blog All Right Reserved
0 Comments