Cara Mudah Membuat Persentase Pada Scrollbar di Blogger

Cara Mudah Membuat Persentase Pada Scrollbar di Blogger

Halo kawan-kawan, selamat datang pada kesempatan kali ini saya akan membagikan artikel tentang Cara Mudah Membuat Persentase Pada Scrollbar di Blogger. Fitur ini dapat digunakan untuk mengetahui seberapa panjang artikel yng akan kita baca pada halaman tersebut.

Persentase Pada Scrollbar

Sebenarnya menambah fitur ini tidak terlalu penting dan akan membuat loading blog menjadi lama, akan tepati untuk membuat tampilan blog menjadi lebih keren dan profesional kamu dapat menambahkan fitur tersebut pada blog kesayangan kamu. Cara yang akan kita gunakan pada artikel ini adalah menggunkan kode dari HTML, CSS dan JavaScript.

Ok langsung saja kita masuk kepembahasannya, berikut adalah panduan untuk membuat persentase pada scrollbar di blogger dengan mudah :

Cara Membuat Persentase Pada Scrollbar Di Blog

1. pertama tentunya kita harus login ke blogger terlebih dahulu.

2. Kemudian kita masuk pada menu Tema dan Klik pada edit HTML

3. Selanjutnya silakan copy paste 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
}

4. Kemudian paste kode dibawah ini tepat diatas <body>

<div id='scroll'/>

5. Dan pastekan kode dibawah ini tepat diatas 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>

6. Lalu Simpan tema


Selesai Cara Mudah Membuat Persentase Pada Scrollbar di Blogger, bagaimana sangat mudah untuk dipraktekan. Demikianlah artikel yang dapat saya sampaikan semoga bermanfaat dan menambah pengetahuan kita.

Tidak ada komentar untuk "Cara Mudah Membuat Persentase Pada Scrollbar di Blogger"