×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

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.
Buka komentar
Tutup komentar
  1. Akhirnya nongol juga tutor yg dicari2, klo dr admin faronesia pasti udah fix nih tutornya..klo situs lain masih agak ragu ngikutinnya heheh, btw makasih tutor scroll percentage nya om admin.

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup