Presentase scroll bar adalah sebuah fitur yang memiliki fungsi sebagai penanda bagi website, yang dimana jika sedang membaca artikel dan sudah di bagian akhir, maka Scroll Bar nya akan menampilkan persentase 100%. Di samping itu, dengan memasang Persentase Scroll Bar ini kamu juga dapat mempercantik tampilan website kamu, sehingga pengunjung lebih betah saat mengunjungi website kamu.
Apa Itu Scroll Bar ?
Scroll bar adalah alat penggeser yang digunakan untuk melihat bagian bawah suatu blog atau website.Rata-rata scroll bar normal dapat kita temukan pada bagian kanan website yang kita kunjungi.Kenapa harus ada scroll bar pada suatu website dikarenakan jika kita tidak mempunyai scroll bar pada website kita maka pengunjung akan kesusahan untuk menggeser dan membaca artikel kita terutama pengguna desktop.
Cara Membuat Presentase Scroll bar Di Blogger !
1. Pertama yang harus kalian lakukan adalah seperti biasa melakukan login pada blogger terlebih dahulu.
2. Setelah masuk kedalam dashborad blogger, pilih bagian Tema.
3. Setelah kita masuk ke dalam menu tema, nanti akan ada tulisan klik edit html.Kita klik saja menu tersebut.
4. Copy dan Pastekan kode Style CSS di bawah ini sebelum kode ]]></b:skin> atau </style>
<style type='text/css'>
/* Persentase Scrollbar */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
</style>5. Setelah kita pastekkan, langkah selanjutnya kita tinggal membuat pemanggilnya saja dengan meletakkan kode di bawah ini sebelum kode <body>
<div id='scrollPersentase'/>6. Terakhir masukkan kode javascript di bawah ini dan pastikan menaruhnya sebelum 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 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>7. Simpan tema dan selesai
Penutup
Itulah tutorial mengenai desain presentease scroll bar di blogger, jika ada pertanyaan atau kurang paham silahkan tinggalkan pada kolom komentar.Dan jangan lupa bila artikel ini bermanfaat harap di share kepada teman, kerabat, dan keluarga terdekat semoga yang lainya juga ikut mendapatkan ilmunya.Sekian terima kasih
0 Comments