Cara Membuat Scroll Bar Dengan Tampilan Persen Paling Keren

          Cara Membuat Scroll Bar Dengan Tampilan Persen Paling Keren - Scroll bar merupakan bagian yang paling sering terlihat oleh pengunjung blog, benar kan ? untuk sebagian blog, mereka memodifikasi blog nya dengan scroll bar berwarna, ada juga yang cukup unik, yaitu dengan membuat persentase di scroll bar blog, cukup unik bukan sobat ? tapi jelas keren donk ! Okay deh, langsung aja kita to the point.

WARNING !
Diharapkan untuk membuat back up dulu template anda, jadi sewaktu-waktu terjadi hal-hal yang tidak di inginkan anda sudah memiliki simpanan template.

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin>



#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; }

Langkah 2 : Simpan kode ini di bawah </head>

<div id='scroll'> </div>

Langkah 3 : Simpan JavaScript ini 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(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(); }, 1500); }); //]]> </script>

Dan yang terakhir simpan template, dan lihat hasil nya . 

Keren bukan ?

NB : untuk mengganti warna background, cari background-color: #2187e7,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 20px; lalu ganti, untuk menggantinya kode 20px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan..

Share this

Share on FacebookPlus on Google+