Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger

Daftar isi [Tampil]
Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger - Hallo apa kabar sahabat blogger, pada kesempatan kali ini saya akan memberikan tutorial cara mudah memasang efek persentase scrollbar keren di blogger. dengan kita memasang persentase scrollbar di blog maka ini menjadi nilai tambah dan kesan menarik pada tampilan blog anda. blog anda juga akan terlihat lebih keren dan profesional.

Baca Juga : Cara Merubah Warna Address Bar Blog Pada Browser Smartphone

Saya sendiri juga sudah menerapkan persentase scrollbar pada blog saya sendiri yaitu serieswans.com . persentase scrollbar ini juga dapat membantu visitor atau pengunjung blog anda untuk mengetahui seberapa jauh mereka berada di halaman ataupun artikel yang sedang di baca oleh mereka.

Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger
Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger 
Persentase scrollbar ini akan muncul ketika anda menscroll halaman artikel. di mulai dari atas dengan anga 0% sampai 100% jika kita sudah menscroll halaman artikel sudah sampai bawah. nah bagi anda yang ingin memasangnya, silahkan ikuti langkah-langkah di bawah ini.

Berikut adalah langkah-langkah untuk memasang Efek Scroll Persentase pada Scrollbar di Blogger  

  • Masuk terlebih dahulu ke Blogger.com sampai ke menu Dashboard
  • Kemdian pilih dan klik menu Tema > Edit HTML
  • Selanjutnya Copy Scrip CSS  di bawah ini dan letakan di atas kode ]]></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;
}
  • Kemudian Copy script HTML di bawah ini dan letakan di bawah kode <body>

<div id='scroll'></div>
  • Terakhir Copy script Javascript di bawah ini dan letakan diatas 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>
  • Kemudian Simpan Template dan silahkan cek apakah sudah muncul persentase scrollbarnya.
Nah, itulah Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger . jika persentase scrollbarnya  sudah muncul artinya anda sudah berhasil memasangnya dengan benar. silahkan anda ikuti langkah-langkahnya dengan benar. jika masih tidak paham silahkan berkomentar di bawah postingan ini.

Baca Juga  : 5 Tips dan Cara Mendapatkan Sitelink Blog dari Google

Mungkin itu saja tutorial kali ini mengenai Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger . terima kasih bagi yang sudah mengunjugi blog serieswans.com dan jangan lupa kunjugi fanspage serieswans di facebook untuk mendapatkan tutorial lainnya. semoga bermanfaat
SHARE Pin Share
Show comments
Hide comments

Belum ada Komentar untuk "Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger "

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With