Halo para pengunjung.....
Sekarang kita bahas tantang artikel kita hari ini, kali ini Rafi Blog akan SHARE "Cara Membuat Persentase Scroll Di Blog", Selain untuk membuat blog semakin keren dan unik, persentase ini juga bisa membantu visitor. Ingin tahu bagaimana cara membuatnya? Sama saya juga. Hehehe. Oke langsung saja, berikut ini adalah caranya. . Tertarik? berikut tutorialnya.
Tutorial
- Log in ke akun blogger kalian
- Pilih menu Template, Klik Edit HTML
- Cari kode ]]></b:skin>
- Letakan kode berikut tepat diatas kode ]]></b:skin>
#scroll { display: none; position: fixed; top: 0; right: 20px; z-index: 500; padding: 3px 8px; background-color: #000;border:1px solid #006acc; color: #fff; border-radius: 3px; }
- Eitts, belum selesai sampai disitu, cari kode <body>
- Letakan kode berikut tepat diatas kode <body>
<div id='scroll'>
</div>
Selesaieh salah, ini belum selesai. Cari kode </body>- Letekan kode berikut tepat 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>
- Klik simpan
- Selesai
Backlinks Please Thanks
| URL |
| Code For Forum |
| HTML Code |
Anda Baru Saja Membaca Artikel Tentang Cara Membuat Persentase Scroll Di Blog ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Cara Membuat Persentase Scroll Di Blog Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Cara Membuat Persentase Scroll Di Blog Sebagai SumberNya.
Nice Post!!
BalasHapusWahh gan, udah lama nih gak ngunjungin. Nice Post nih gan! #kece
BalasHapusUdah update lagi nih gan?? Update terus ya....
BalasHapusWah bang, gimana kabarnya? baru post lagi nih??
BalasHapusNice Post Gan! Update lagi ya,ngomong-ngomong kemana ajah?
BalasHapusWah agan, ngeblog lagi gan??
BalasHapusFont yang digunakan di header blog agan itu apa ya??
BalasHapusSejak kapan blog ini aktif lagi? bukanya dah off
BalasHapusijin coba yh bro
BalasHapus