Yeay,udah berapa hari nihh gak update?? gak tau dehh,ok kali ini gw akan kasih tutorial blog,yang pasti nya nihh trick udah banyak yang pake,dan masih ada yang belum tau trick ini,trick ini yaitu membuar scrool dengan persentase,awal gw liat nihh scrool adaa di rvmalice,gw seart di google,"membuat persen di scroll" nahh yang ketemu cuma "membuat persentase pada scrollbar" dari bloggertut,rupa nya itu dia yang gw cari cari,dan langsung dehh gw pasang di blog pada waktu ituu,nahh kali ini gw akan share trick nya,ok ini diaa demo nya
gimana keren kan?? yukk langsung ajaa
1.Cari kode ]]></b:skin letakkan kode di bawah ini di atas kode tadi
#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; }
2.Cari kode </head> letakkan kode di bawah ini di bawah kode tadi
<div id='scroll'></div>
3.Letakkan kode di bawah ini 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(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(); }, 1500); }); //]]> </script>
4.Simpan template lo,dan liat hasil nya
gimana?? udah munculkan persen nya??
see you
penulis
sumber
