Cara penerapan atau pemasanganya juga cukup mudah,bari disimak.
Pertama,simpan CSS di bawah tepat 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; }selanjutnya cari kode </head> lalu simpan kode di bawah.
<div id='scroll'></div>Setelah itu simpan kode di bawah tepat di 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(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>
Nah setelah kode di atas telah di simpan, sekarang kalian tinggal melihat hasilnya
Sekian artikel mengenai Membuat Presentase Scrollbar pada Blog. Semoga artikel tersebut bermanfaat untuk Anda. Anda juga dapat menyebarluaskan atau mengcopy artikel Membuat Presentase Scrollbar pada Blog ini jika memang bermanfaat bagi Anda, namun jangan lupa untuk mencantumkan link sumbernya. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan, Terima Kasih.
0 Komentar untuk "Membuat Presentase Scrollbar pada Blog"