Cara membuat presentase scroll bar pada blog


Progress scroll bar


Halo soba blogmania, tutorial blogger kali ini, blogmania akan berbagi tutorial cara membuat presentase scroll bar.

Apa itu presentase scroll bar?
Presentase scroll bar yaitu jika halaman blog di scroll, makan nanti di samping akan menunjukkan progress berapa persen kamu menscroll nya.

Biasanaya para blogger mesang presentase scroll bar ini digunakan untuk menamilkan sebaerapa jauh para pembaca membaca artikelnnya, misal sudah 50%, maka nanti presentase scroll bar akan tampil di sebelah kanan.

Nah untuk memasangnya cukup mudah, silahkan ikuti tutorialnnya di bawah ini.
Masuk ke blogger.com dan pilih bagian tema dan pilih edit html, lalu cari kode </b:skin> dan paste css di bawah ini.

/* Persentase Scrollbar */ #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px} #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

Jika sudah selesai, silahkan kamu simpan dan masuk ke bagian tata letak dan tambahakan gadget lalu pilih html/javascript dan paste kode html di bawah ini.

<div id='scrollPersentase'/>

Lalu yang terakhir cari kode </body> dan paste script ini di atas kode </body> tersebut.

<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 - $('#scrollPersentase').height() / 2; $('#scrollPersentase') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scrollPersentase').fadeOut(); }, 1500); }); /*]]>*/ </script>

Jika sudah, silahkan di simpan dan lihat hasilnnya.

Nah, jika ingin menyembunyikan scroll bar tadi pada home page dan hanya ingin menampilkan scroll bar di halaman artikel saja, silahkan edit lagi pada tema dan edit html.

lalu cari kode untuk menamilkan widget scroll bar yang kamu buat di tata letak tadi lalu tambahakan !data:view.isPost di bagian widget cond=' ' seperti di bawah ini

<b:widget cond='!data:view.isPost' id='HTML1' locked='false' title='Author' type='HTML' version='2' visible='true'><div id='scrollPersentase'/></b:widget>

Semoga membantu dan bisa bermanfaat dan jangan lupa untuk berkomentar jika ada yang salah.

You may like these posts