-->

Cara Membuat Efek Scroll Persentase pada Scrollbar di Blogger

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
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Show comments
    Hide comments

    0 Komen

    Posting Komentar

    • 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.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!