Beranda » Tutorial Blog » Cara Membuat Persentase pada Scrollbar Blog

Cara Membuat Persentase pada Scrollbar Blog

Tutorial Belajar Blog - Cara Membuat Persentase pada Scrollbar Blog - Melanjutkan tutorial sebelumnya yaitu Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog apabila pada tutorial sebelumnya membuat scroll lebih keren akan tetapi tutorial ini untuk mencoba menerapkan persentase pada scrollbar.

Sebelumnya sempat bingung asal muasal siapa yang pertama membuat tutorial tentang persentase scroll pada blog, sebab pada saat saya ( Mas Oktri ) search di mbah google ternyata banyak yang menuju ke bloggertut, semoga pembuat pertama tutorial ini dapat berkomentar supaya saya bisa tidak penasaran karena banyak blog yang share tentang tips ini.

Demo persentase pada scroll blog

Untuk membuatnya silahkan ikuti langkah-langkahnya :

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

Biasakan untuk membackup template sebelum melakukan editing pada template blog.

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>

Simpan Template.

Keterangan :
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.

Demikian Tutorial persentase di samping scrollbar Semoga Bermanfaat

Belum ada tanggapan untuk "Cara Membuat Persentase pada Scrollbar Blog"

Posting Komentar