Cara Memasang Persentase Pada Scrollbar Blog Keren - 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.
Baca Juga: Cara Membuat 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 ]]></b:skin> atau </style>.
4. Kemudian simpan kode ini di bawah kode
<div id='scroll'/>
5. Lalu tambahkan kode ini di atas kode
6. Klik Simpan tema
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.
Baca Juga: Cara Membuat 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 Keren
1. Masuk ke Blogger.com2. Klik Tema > Edit HTML
3. Simpan kode css ini di atas kode ]]></b:skin> atau </style>.
Catatan: pada surcecode background-color:#039be5; kalian bisa ubah warna background-color dan border-left-color:#039be5
/* Scrollbar Persentase */
#scroll {
display:none;
position:fixed;
top:0;
right:5px;
z-index:500;
padding:3px 8px;
background-color:#039be5;
color:#ffffff;
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:#039be5
}4. Kemudian simpan kode ini di bawah kode
</head>.<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
Demo
Apabila artikel ini bermanfaat untuk kalian semua jangan lupa subscribe atau berlangganan pada blog jalanpintarr dan jangan lupa share ke seluruh aksess sosial media kalian, terimakasih.