Cara Membuat Persentase Pada Scrollbar Blog
Senin, 14 Mei 2018
Tulis Komentar
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.
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
Itulah artikel mengenai cara membuat persentase pada scrollbar blog. Semoga bermanfaat.
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 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
Itulah artikel mengenai cara membuat persentase pada scrollbar blog. Semoga bermanfaat.
Belum ada Komentar untuk "Cara Membuat Persentase Pada Scrollbar Blog"
Posting Komentar
1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.