Cara Membuat Presentase Pada ScrollBar di Blog

Halo Sobat Think Faiz Kali ini Aku Nih, Memposting Cara Membuat Presentase Pada ScrollBar Pada Blog. Widget Presentase di blog ini berguna untuk membuat blog sobat menjadi lebih lebih Keren. Sobat Bisa Mencoba cara - cara memasang presentase ini pada blog sobat.

Langsung Saja Yukk

1.Buka Blogger.com
2.Setelah Itu Buka Template>Edit Html
3.Kemudian Cari ]]></b:skin>
4.Kalau Sudah Ketemu Taruh Kode Dibawah ini Sebelum Kode ]]></b:skin>

/* Scroll Persentase */
#scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#9b59b6;color:#ecf0f;border-radius:3px}
#scroll:after{position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#4B4B4B}

(Kalau Kalian Ingin Mengeditnya:
-Kode "color:#ecf0f" Ini Adalah Warna Font
-Kode background-color:#9b59b6 Ini Adalah Warna Background Presentase ")

5.Setelah Itu Cari Kode </head> Lalu copy kode dibawah ini di bawah kode </head>

<div id='scroll'></div>

6.Lalu Copy Kode Dibawah ini Si Atas 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>

7.Setelah Itu Cari Kode </head> Lagi Lalu copy kode dibawah ini di bawah kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

8.Simpan Dan Lihat Hasilnya

Semoga Bermanfaat

Test

Thinkfaiz.blogspot.com adalah Blog Pemberi Tutorial Blog, Download DLL Blog ini Membantu Kalian Untuk mencari artikel tutorial.

Bagikan Ini Ke Social Media

Related Posts