Cara Membuat Scroll Bar Dengan Persentase di Blog

Halo sob , malam ini admin ingin share tutorial Cara Membuat Scroll Bar Dengan Persentase di Blog. Tutorial ini bisa agan lihat di blog ini admin juga menggunakan nya gan selain untuk memperindah blog juga sebagai informasi tambahan bagi pengunjung.

Untuk menerapkan tutorial ini agan harus memasang syarat dari pemasangan scrollbar persentase ini. Seperti memasang Javascript atau Jquery tapi tenang saja disini agan juga bisa langsung mendapatkan kedua script tersebut.

Oke silahkan baca tutorial pemasangan dibawah ini

1. Masuk ke Template ~> Edit HTML

2. Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

3. Copypaste kode CSS dibawah ini tepat diatas kode ]]></b:skin>

/* Scroll 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. Lanjut cari kode <body> atau <body
5. Copypaste kode dibawah ini tepat dibawah kode tadi

<div id='scroll'/>

6. Lanjut cari kode </body>
7. Copypaste kode Javascript dibawah ini tepat diatas kode tadi

<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. Lanjut cari kode </head>
9. Copypaste kode Jquery dibawah ini tepat diatas kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

10. Klik save template dan Selesai

Jika ditemplate blog agan sudah terdapat kode Jquery tidak usah memasang kode Jquery lagi gan. Kalau tetap agan pasang dampaknya SEO bisa melemah dan loading page pada blog juga bisa semakin lambat jika adanya dua javascript yang sama.

Cukup mudah bukan gan ? selain keren dan menambah keren blog kita fungsi ini juga dapat mempermudah pengunjung juga gan jadi blog kita semakin banyak pengunjung nya haha. Jika ada kendala silahkan tanyakan dikolom komentar.

Title: Cara Membuat Scroll Bar Dengan Persentase di Blog
Posted by:Unknown
Published :2015-06-28T21:05:00+07:00
Rating: 3.5
Reviewer: 5 Reviews
Cara Membuat Scroll Bar Dengan Persentase di Blog

Posted by Unknown

Cara Membuat Scroll Bar Dengan Persentase di Blog

0 Response to "Cara Membuat Scroll Bar Dengan Persentase di Blog"

Post a Comment

Followers