Cara Membuat Scroll Persentase di Blog atau Website


Kali ini Saya akan memberitahu Cara Membuat Scroll Persentase di Blog.
Jika Anda punya blog yang keren dan bagus, memasang scroll persentase ini pun menjadi keunikan sendiri untuk blog yang Anda punya, tapi jika blog Anda tidak terlalu bagus atau keren, Saya sarankan untuk tidak memasang scroll ini, karena hanya membuat blog Anda menjadi berat saja, tapi jika Anda ingin, Anda boleh copy script Cara Membuat Scroll Persentase di Blog yang ada di bawah.


Cara Membuat Scroll Persentase di Blogspot

Langkah-langkah membuatnya :

  • Login ke blogger.com, jika sudah. 
  • Pilih Template → Edit HTML
  • Cari kode ]]></b:skin> untuk mudah mencari tekan [F3]
  • Letakkan script di bawah 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;
}

  • Setelah itu cari kode </head>
  • Letakkan script di bawah ini, di bawah kode </head>

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

  • Cari kode </body>
  • Setelah itu letakkan JavaScript di bawah 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>

  • Simpan dan lihat hasilnya.

Perhatian !

Sebelum menyimpan hasil, disarankan membackup template terlebih dahulu !

    Itulah sedikit informasi mengenai Cara Membuat Scroll Persentase di Blog atau Website. Semoga apa yang saya sampaikan dapat bermanfaat untuk kalian.

    1 Komentar untuk "Cara Membuat Scroll Persentase di Blog atau Website"

    1. info yang sangat bermanfaat gan,, mau ane coba dulu yaa,,

      koment back yaa www.ankurniawan.blogspot.com

      BalasHapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    Tekan close (x) 2 kali untuk menutup, jangan lupa Berlangganan

    Masukkan Email aktif untuk update artikel via email :

    Delivered by FeedBurner

    ×