Cara Menampilkan Nilai Persen Tampilan Article
Tutorial kali ini MDB Blog akan berbagi tips tentang menampilkan Cara Menampilkan Nilai Persen laman blog. Ketika pengunjung Scroll ke bawah dan ke atas, maka secara otomatis nilai persen laman blog akan tampil (seperti gamabar di bawah ini)
Langkah Pertama
1. Login ke Account blog sobat2. Pilih template ==> Edit HTML
3. Selanjutnya cari kode]]></b:skin>(gunakan Ctrl+F)
4. Copy pastekan kode di bawah ini tepat di atas ]]></b:skin> Tag
<style>
#scroll
{
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after
{
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
</style>
Langkah Selanjutnya
5. Cari kode </head> (gunakan Ctrl+F)6. Copy pastekan kode di bawah ini tepat di bawah atau setalah </head> Tag
<div id='scroll'></div>Pastikan sobat meletakkan kode di atas tepat di antara </head> dan <body> Tag
</head>
<div id='scroll'></div>
<body>
Langkah Terakhir
6. Temukan kode </body>7. Copy pastekan kode di bawah ini tepat di atas </body> Tag
<script type='text/javascript'>8. Klik save dan selesai. Terima kasih telah membaca Cara Menampilkan Nilai Persen Tampilan Article.
/*<![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>
Join the conversation