Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger - Hallo apa kabar sahabat blogger, pada kesempatan kali ini saya akan memberikan tutorial cara mudah memasang efek persentase scrollbar keren di blogger. dengan kita memasang persentase scrollbar di blog maka ini menjadi nilai tambah dan kesan menarik pada tampilan blog anda. blog anda juga akan terlihat lebih keren dan profesional.
Baca Juga : Cara Merubah Warna Address Bar Blog Pada Browser Smartphone
Baca Juga : Cara Merubah Warna Address Bar Blog Pada Browser Smartphone
Saya sendiri juga sudah menerapkan persentase scrollbar pada blog saya sendiri yaitu serieswans.com . persentase scrollbar ini juga dapat membantu visitor atau pengunjung blog anda untuk mengetahui seberapa jauh mereka berada di halaman ataupun artikel yang sedang di baca oleh mereka.
 |
| Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger |
Persentase scrollbar ini akan muncul ketika anda menscroll halaman artikel. di mulai dari atas dengan anga 0% sampai 100% jika kita sudah menscroll halaman artikel sudah sampai bawah. nah bagi anda yang ingin memasangnya, silahkan ikuti langkah-langkah di bawah ini.
Berikut adalah langkah-langkah untuk memasang Efek Scroll Persentase pada Scrollbar di Blogger
- Masuk terlebih dahulu ke Blogger.com sampai ke menu Dashboard
- Kemdian pilih dan klik menu Tema > Edit HTML
- Selanjutnya Copy Scrip CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#369fcf;
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;
}
- Kemudian Copy script HTML di bawah ini dan letakan di bawah kode <body>
<div id='scroll'></div>
- Terakhir Copy script Javascript di bawah ini dan letakan diatas 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>
- Kemudian Simpan Template dan silahkan cek apakah sudah muncul persentase scrollbarnya.
Nah, itulah Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger . jika persentase scrollbarnya sudah muncul artinya anda sudah berhasil memasangnya dengan benar. silahkan anda ikuti langkah-langkahnya dengan benar. jika masih tidak paham silahkan berkomentar di bawah postingan ini.
Baca Juga : 5 Tips dan Cara Mendapatkan Sitelink Blog dari Google
Baca Juga : 5 Tips dan Cara Mendapatkan Sitelink Blog dari Google
Mungkin itu saja tutorial kali ini mengenai Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger . terima kasih bagi yang sudah mengunjugi blog serieswans.com dan jangan lupa kunjugi fanspage serieswans di facebook untuk mendapatkan tutorial lainnya. semoga bermanfaat
Posting Komentar