Membuat Persentase Pada Scrollbar Blog
Membuat Persentase Pada Scrollbar Blog - Postingan kali ini akan menjelaskan cara wacana memasang/membuat fungsi persentase pada scrollbar blog.
Memasang persentase di scrollbar blog merupakan salah satu cara untuk mempercantik tampilan blog Anda.
Memasang widget persentase di blogger juga dapat membantu pengunjung mengetahui sejauh mana mereka ada pada halaman atau artikel yang sedang mereka baca.
Jadi jikalau kalian memasang persentase ini di blog maka akan muncul berapa persen Anda berada di halaman tersebut, mulai dari 0% jikalau berada di paling atas sampai 100% jikalau berada di paling bawah.
Bagi Anda yang mempunyai artikel atau postingan panjang atau yang punya banyak komentar di blognya dapat memakai widget persentase
Bila anda tertarik untuk menciptakan persentasi pada scrollbar blog, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Memasang Persentase Pada Scrollbar Blog
1. Masuk ke Blogger.com2. Klik Tema > Edit HTML
3. Simpan isyarat css ini di atas kode
]]></b:skin> atau </style>/* Scrollbar Persentase */ #scroll { display:none; position:fixed; top:0; right:5px; z-index:500; padding:3px 8px; background-color:#4B4B4B; color:#FFF; 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 } 4. Kemudian simpan isyarat ini di bawah kode
<body><div id='scroll'/> 5. Lalu tambahkan isyarat 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> 6. Klik Simpan tema
Itulah artikel mengenai membuat persentase pada scrollbar blog.
