Blogger.id - Artikel kali ini akan membahas dan membagikan tutorial cara membuat efek persen pada scroll blog atau istilah lainnya membuat efek persentase pada scrollbar blogger (blogspot).
Daftar isi
Dengan cara ini maka setiap pengunjung yang menscroll artikel yang telah anda publish, akan melihat efek persentas, hal ini pastinya akan membuat situs anda lebih menonjol dan mengutamakan fungsi estetika pada blog tersebut.
Selain fungsi estetika efek persentase pada scrollbar blog, secara tidak langsung membantu pengunjung anda mengetahui sudah seberapa banyak, bacaan yang telah di baca dan seberapa panjang kata pada artikel tersebut.
Cara Membuat Efek Persentase di Scrollbar Blogger
Berikut ini adalah tutorial singkat cara membuat efek persentase pada scrollbar blog, mudah dan simple.
1. Buka dashboard blogger.com
1. Buka dashboard blogger.com
2.Klik pada theme, lalu edit HTML
3. Sebelum itu backup artikel, untuk antisipasi kesalahan.
4. Copy script berikut lalu pastekan tepat di atas tag (</body>), gunakan CTRL + F Untuk memudahkannya.
3. Sebelum itu backup artikel, untuk antisipasi kesalahan.
4. Copy script berikut lalu pastekan tepat di atas tag (</body>), gunakan CTRL + F Untuk memudahkannya.
<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>
5. Terakhir Klik Save.
Settings Warna Pada Efek Scroll Persen
Pada kalanya dengan cara jika anda ingin situs terlihat berbeda, maka dari itu anda bisa mengubah setting atu pengaturan warna pada script yang telah dibagikan tersebut. Caranya gimana berikut penjelasannya.
- Sebelum menyimpan template, perhatikan pada kode (#007bdf) atau (#fff)
- Kode diatas adalah kode html / css yang digunakan untuk mengubah warna pada scrollbar tersebut
- Pada kode pertama (007bdf), adalah kode background scrollbar yang artinya (Blue)
- Dan pada Kode kedua (#fff), adalah kode warna tulisan pada scrollbar yang artinya (White)
- Nah untuk mengubah warnanya sendiri, anda bisa mencari macam - macam kode warna sesuai keinginan anda.
Akhir Kata dan Penutup
Demikianlah akhir dari tutorial dan artikel kali ini, saya harap artikel ini bermanfaat untuk anda dan jika ada beberapa hal yang perlu ditanyakan atau terjadi kesalahan saat mengedit template tersebut silahkan tanyakan di kolom komentar dibawah ini.
