Cara Memasang Efek Scroll Presentase di Scrollbar Blogger
February 02, 2020
Manfaat memasang efek presentase pada scrollbar blogger yaitu dapat membantu para pengunjung blog seberapa juah mereka berada di halaman atau artikel yang sedang mereka baca. Efek ini sudah saya terapkan di blog saya ini untuk demo lihat saja pada scrollbar blog imamkunblog.
Tidak hanya memberikan efek scroll presentase tetapi juga mengubah scrollbar blogger anda jauh lebih keren dari biasanya yang putih tebal kini menjadi scrollbar kecil yang keren dan resposnive.
Presentase akan tampil pada saat anda melakukan scroll pada halaman blog. Presentase dimulai dari 0% hingga 100%, pada akhir artikel akan menampilkan 100% presentase. Sungguh membantu bukan?
Untuk memasang efek scroll presentase di scrollbar blogger hanya menggunakan kode CSS dan Javascript aja, nah bagaimana cara memasangnya? Silahkan ikuti berikut ini langkah-langkah memasang efek scroll presentase di blogger.
Cara Memasang Efek Scroll Presentase di Scrollbar Blogger
1. Pertama, login ke blogger.com > Theme/tema >Edit HTML.
2. Cari kode ]]></b:skin>, copy dan paste kode dibawah ini tepat diatas kode yang sudah ditemukan.
3. Kemudian cari kode </body>, copy dan paste kode dibawah ini diatas kode body.
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#008080;
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:#369fcf;
}
4. Copy dan paste lagi kode Javacript dibawah ini dan paste diatas kode </body>
<div id='scroll'></div>
<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>
Begitulah cara memasang efek scroll presentase di scrollbar blogger. jika anda ingin mengubah warna pada efek scroll anda dapat mengubah kode background-color:#008080 dengan kode warna sesuai keinginan anda.
Baca Juga: Cara Membuat Reading Progress Bar di Blogger
Demikian artikel kali ini semoga bermanfaat dan apabila ada yang ingin anda pertanyakan silahkan anda berkomentar dibawah!!
0 komentar