Metode Membuat Responsive Persentase Scrollbar di Blog

Metode Membuat Responsive Persentase Scrollbar di Blog - Bicara soal scrollbar diblog kurang lengkap rasanya jika tidak diperindah dengan diberi persentase pada scrollbar diblog. Lihat blog ini pada bagian scrollbarnya saat anda turunkan seperti itukan? Maka daripada saya ambil pusing untuk menulis saya membagaikan Metode Membuat Responsive Persentase Scrollbar di Blog kepada anda sebagai rasa terima kasih saya setelah anda membaca artikel saya terdahulu jika belum mebaca silahkan membacanya terlebih dahulu di Sitemap atau Daftar Isi. Perhatikan dan cermati langkah berikut ini.

Metode Membuat Responsive Persentase Scrollbar

Buka Template lalu pilih Edit HTML
Cari ]]></b:skin> atau </style>. Letakkan tepat diatas ]]></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;
}

Cari </head> letakkan kode pemanggilnya

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

Simpan kode ini tepat diatas </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>

Selamat Mencoba. Semoga bermanfaat dan jika anda ingin mencari artikel lainnya carilah di Sitemap atau Daftar Isi.
Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell