Saya hari ini akan membagian widget untuk blog anda, Widget ini disebut Persentase Untuk
Scrool Bar di blog anda,Sebenarnya saya sendiri pernah menggunakan untuk widget ini
dan juga tutorial ini sudah sangat lawas sekali,Tetapi ternyata meskipun lawas,widget ini
masih dipakai oleh blogger sekarang.
Langkah Pembuatan :
1.Masuk Ke dalam template anda2.Silahkan Cari Kode ]]><b:skin> Dalam Template Anda
3.Letakan Kode Dibawah Ini Diatasnya :
#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;
}
4.Cari Kembali Kode </head> Dalam Template Anda5.Letakan Kode Dibawah Ini Diatasnya :
<div id='scroll'></div>
6.Langkah Selanjutnya,Cari Kode </body>7.Letakan Kode Ini Diatas Kode Tersebut :
<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>oll-bar.html" target="_blank">Cara Membuat Persentase Pada Scroll Bar di Blog</a>
Untuk Menyesuaikan,Anda Bisa Mengganti Jenis Font,Warna Sesuai Selera
6 Komentar untuk "Memodifikasi Scrool Bar Blog Dengan Membuat Persentase"
wah keren gan blognya.... contohnya yang di sidebar itu yah gan.... ijin nyoba tutorialnya gan...
ijin nyoba tutorialnya gan.... contohnya yang kaya di sidebar itu yah gan....
nda ada ssnya bang ? ane penasaran
nice tutorial gan,thx buat ilmu nya,jadi bertambah pengetahuan ane..
sip gan
Akhirnya nemu juga,, kebetulan buat presentasi minggu depan.
"Ikutilah Peraturan Berkomentar Di Blog Ini ↓ "
✔ Dimohon Untuk Berkomentar Sesuai Artikel
✔ Komentar Tidak Relavan Akan Masuk Folder Spam
✔ Dilarang menaruh link aktif
✔ Diharapkan berkomentar menggunakan bahasa yang sopan
© Reza Rizal ✔