Bagi anda yang sudah mempunyai sebuah blog pastinya anda menginginkan tampilan blognya lebih indah lagi agar enak di pandang para pembaca atau pengunjung blog anda maupun anda sendiri. Jadi dalam kesempatan kali ini saya akan menshare beberapa kode CSS dan HTMLJava Script yang bisa menjadikan scrollbar pada bilah samping kanan blog anda berbeda dengan sebelum nya.
Namun jika anda berminat menggunakan kode nya nanti setelah di uraikan atau di jelaskan langkah penerapan nya di bawah. Nah sebelum melangkah lebih jauh lagi maka saya jelaskan sedikit tentang kode tersebut kalau kode nya sudah di pasang ke template blog dan fungsi dari kode itu adalah pada saat scroll di gulir ke atas ataupun kebawah maka akan muncul sebuah efek yang di sebut persentase scrollbar.
Untuk lebih jelas mengenai cara membuatnya simak dan pahami langkah dan tutorial nya berikut ini;
Cara Membuat Persentase Scrollbar di Blog Blogger:
1. Masuk ke dasbor blogger
2. Pilih menu tema
3. Klik tombol Edit HTML
4. Lalu klik dimana saja pada area kode dan tekan tombol Control + F atau Command + F pada keyboard pc(laptop) untuk membuka kotak pencarian di sudut kanan atas jendela kode dan tuliskan ]]></b:skin> kemudian tekan tombol Enter untuk mencari.
5. Salin dan tempelkan kode CSS atau HTMLJava Script di bawah tepat diatas kode ]]></b:skin> berikut ini kodenya;
#scroll {
display: none;
position: fixed;
top: 0;
right: 17px;
z-index: 500;
padding: 3px 8px;
background-color: #2D2DFF;
color: #FFFFFF;
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: #2D2DFF;
}Keterangan;
Angka yang diberi tanda warna merah 17px ganti dan sesuaikan jarak antara efek presentase scrollbar dengan scrollbar bilah samping blog anda.
Kode warna yang diberi tanda warna blue(biru) #2D2DFF ganti sesuai selera warna favorit anda untuk efek scrollbar presentase nya.
Pada kode warna #FFFFFF anda ganti dengan warna sesuai pilihan hati untuk angka pada efek presentase scrollbar nya.
6. Langkah selanjutnya Kembali lagi ke kotak pencarian di sudut kanan atas jendela kode dan tuliskan </head> kemudian tekan tombol Enter untuk mencari jika sudah ketemu salin dan tempelkan kode <div id='scroll'></div> dibawah kode </head> nya.
7. Dan langkah terakhir kembali cari lagi kode </body> dan salin kode html/javascript dibawah lalu tempelkan tepat di atas kode </body> nah in kodenya;
<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>
8. Kemudian langsung simpan templatenya
Info:
Sumber kode Html javascript diatas bukan hasil karya saya dan pembuatnya sudah saya lupa entah dari situs mana saya,namun saya di artikel ini hanya bertujuan untuk berbagi para blogger lainnya.
Nah, itulah Cara Membuatnya. Semoga artikel ini dapat bermanfaat bagi sahabat semua. Selamat mencoba dan, Sekian dan terima kasih...