Cara mudah membuat persentase pada scrollbar blog

Faronesia.com - Halo blogger, gimana kabaranya? Semoga selalu senantiasa sehat wal afiat. Ok, pada kesempatan kali ini admin seperti biasa akan share beberapa tutorial mengenai blogging. Seperti yang telah disebutkan pada judul diatas, kali ini kita akan membahas tutorial cara membuat persentase pada scrollbar blog. Pastinya kalian sering menemukan blog yang memiliki persentase pada scrollbarnya, terlihat sangat cantik bukan? Namun pastinya anda bertanya-tanya bagaimana cara membuat scrollbar persentase tersebut.

Sebelum melanjutkan ke tutorialnya kita harus tahu kegunaan dari scrollbar persentase, apa sih kegunaannya? nah, widget persentase di blog berguna untuk membantu pengunjung mengetahui sejauh mana mereka ada pada halaman atau artikel yang sedang mereka baca.

Jika anda tertarik untuk membuat persentasi pada scrollbar blog, silahkan ikuti langkah-langkahnya di bawah ini. Namun sebelumnya, agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara mudah membuat persentase pada scrollbar blog

  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode ]]></b:skin>
  • Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* Scrollbar Persentase */
#scroll {
display:none;
position:fixed;
top:0;
right:5px;
z-index:500;
padding:3px 8px;
background-color:#4B4B4B;
color:#FFF;
border-radius:3px
}
#scroll:after {
position:absolute;
top:50%;
right:-8px;
height:0;
width:0;
margin-top:-4px;
border:4px solid transparent;
border-left-color:#4B4B4B
}
  • Selanjutnya simpan kode dibawah ini tepat di atas kode <body>
<div id='scroll'/>
  • Lalu tambahkan kode 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>
  • Terakhir simpan tema

TAMBAHAN

Jika tutorial diatas dipandang terlalu rumit  dan panjang admin sarankan menggunakan tutorial versi dari mas bagus surochman pemilik website www.kurazone.net agak berbeda dan lebih simpel dalam pemasangannya. Simak tutorialnya dibawah ini:
  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode </body>
  • Tempelkan kode dibawah ini tepat diatas kode </body>
<style> #kurascroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;} #kurascroll:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;} </style> <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 - $('#kurascroll').height() / 2;$('#kurascroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);} scrollTimer = setTimeout(function(){$('#kurascroll').fadeOut();} ,1500);} );//]]></script> <div id='kurascroll'></div>
  • Lalu simpan tema
Demikianlah mengenai Cara mudah membuat persentase pada scrollbar blog semoga bermanfaat untuk para pembaca dimanapun anda berada. jangan lupa share dan jika ingin tanggapan serta masukan silahkan di kolom komentar yang telah tersedia dibawah postingan ini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel