Cara Membuat Scrollbar persentase di Blog
Di artikel kali ini saya akan share tutorial cara membuat efek scrollbar persentasi di blog. Tidak sedikit blog atau website yang memakai Scrollbar persentasi.
Tujuannya supaya si pengunjung mengetahui sejauh mana mereka ada pada suatu artikel atau halaman dan tidak hanya itu, tujuan lainnya adalah untuk mempercantik blog.
Selain itu juga scrollbar persentasi ini menunjukan angka persentasi kepada si pengunjung, jika si pengunjung masih berada di paling atas suatu artikel atau halaman maka angka persentasi nya akan menunjukan 0%, tetapi jika si pengunjung berada di paling bawah suatu artikel atau halaman maka angka persentasi nya akan menunjukan 100%.
Bagaimana? Tertarik bukan😁, jika kalian tertarik untuk memasang scrollbar persentasi ini simak langkah-langkah dibawah ini :
Cara Membuat Scrollbar Persentase
1. Pertama kalian login terlebih dahulu ke akun blogger kalian.
2. Jika kalian sudah masuk ke dashboard blog kalian, kalian klik " Tema ".
3. Kemudian kalian klik titik tiga yang ada di pojok kanan atas, Yang saya tunjuk pada gambar dibawah ini.
4. Kemudian kalian edit template kalian dengan cara klik " Edit HTML " Seperti gambar dibawah ini.
5. Kemudian kalian Copy code CSS dibawah ini. Kalian pastekan di atas ]]<b:/skin> atau </style>
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#36d1dc;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#36d1dc;
}
Catatan :
Jika kalian ingin mengganti warnanya kalian bisa mengganti hex colornya sesuai dengan yang kalian inginkan.
6. Kemudian kalian copy code HTML dibawah ini tepat dibawah code <body>( cari kode tersebut menggunakan CTRL-F.
<div id='scroll'></div>
7. Kemudian yang terakhir copy code dibawah ini, lalu kalian pastekan tepat diatas tag </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>
Jangan lupa kalian klik " Simpan Tema ".
Jika scrollbar persentasi sudah tampil di blog kalian, itu berarti kalian sudah berhasil mengikuti cara di atas dengan benar. Jika scrollbar tersebut tidak muncul silahkan kalian ulangi cara diatas sampai berhasil.
Cukup sekian untuk tutorial kali ini. Terima kasih sudah mau berkunjung ke blog saya ini.
Jangan lupa berlanggan via email supaya kalian tidak ketinggalan artikel menarik dan yang pastinya keren dari blog saya ini atau kalian kunjungi fanspage Zonabiru BB Supaya kalian mendapatkan artikel terbaru setiap harinya.Semoga bermanfaat :).
#Salam_Blogger
0 Response to "Cara Membuat Scrollbar Persentase di Blog"
Post a Comment