Menampilkan Persentase Pada Scrollbar Blog - Agan Pernah mengunjungi blog orang lain lalu melihat persentase di sebelah kanan blog tersebut, bagaimana keren bukan, sebenarnya agan sendiri bisa membuat tampilan persentase scrollbar tersebut,
Sebenarnya tampilan tersebut hanya membuat blog menjadi menarik saja, tapi bagi yang mau untuk memasang fitur ini admin punya solusinya, persentase yang dihasilkan dapat dimulai dari 0% sampai 100% loh tergantung seberapa banyak agan scroll kebawah, untuk pemasangannya anda bisa lihat tutorial dibawah ini
Cara Menampilkan Persentase Pada Scrollbar Blog
- Pertama, simpan kode di bawah tepat di atas ]]></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;
}
- Setelah itu masukkan code dibawah ini dibawah code </head>
<div id='scroll'></div>- Simpan kode di bawah ini tepat di atas </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>
Langkah Terakhir Save Template Anda Dan lihat Hasilnya :),,,
Itulah cara membuat persentase blog menggunakan jQuery Semoga Bermanfaat,Sebagian artikel ini dikutip dari http://arlinadesign.blogspot.com/2014/10/memasang-persentase-pada-scrollbar.html
Belum berminat? tak apa, bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!
