Cara Membuat Persentase pada Scrollbar Blog

Tutorial Belajar Blogger

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. 

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

10   komentar

Waktu saya mau simpan, ada pemberitahuan seperti ini div should not appear inside of head. Solusinya gimana Mas ?
Reply Delete
wew...mungkin ada yg salah di blog demo ane berhasil ko gan
http://demotutorialbelajarblog.blogspot.com/
Reply Delete
Tapi kok di template blog saya nggak bisa Mas ?
Reply Delete
sudah berhasil Mas. saya salah menempatkan kode <div id='scroll'></div>. Saya taruh di atas </head>, seharusnya dibawahnya. Sebelumnya makasih Mas Oktri atas tutorialnya :)
Hehehhe.... Ada2 ªjª mas andi nie...
Delete
Reply Delete
kok ga bisa mas? Sudah saya coba satu per satu secara DETAIL. Tetap ga bisa... mohon pencerahanya =)
Reply Delete
Makasih mas, berhasil dengan sukses :)
Reply Delete
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

http://www.asianbrain.com/letter.html/903484
Reply Delete
mas ini yang ada di sebelah kanan floating social media agan gimana bisa caranya munculin. Saya muter2 cari ga ada yg model seperti masnya.
mohon dibuatkan tutornya kalo berkenan
Reply Delete

Posting Komentar

Cancel Reply