» » Cara Membuat Persentase untuk Scrollbar Blog

Cara Membuat Persentase untuk Scrollbar Blog

KEYZEE Shared - Assalamualaikum Wr.Wb pada kesempatan kali ini saya akan membagi sebuah tutorial yang bernama "Cara Membuat Persentase untuk Scrollbar Blog",karena pada waktu itu ada yang Request ke saya, "Bagaimana sih cara membuat seperti persen-persen di blog itu"

Tentunya jika kita memakai Persentase ini,mungkin blog kita akan terlihat lebih menarik atau cantik,dan tentu saja dengan memasang widget ini,anda tidak usah khawatir jika blog anda akan menjadi berat nantinya bila memakai ini,karena widget ini tidak berat alias Ringan untuk dipakai..
Bagi anda yang penasaran untuk memakai widget ini,yuk langsung saja Simak tutorial yang saya berikan!

Berikut Cara Memasang Persentase untuk Scrollbar Blog 

1.Pertama masuk kehalaman Dashboard Blog (Halaman Utama Blog)
2.Kemudian Klik Template -> EDIT Html
3.cari kode ]]></b:skin
4.lalu copy script dibawah ini,tepatkan kode dibawah ini diatas kode ]]></b:skin
/* Scroll Persentase */
#scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#1971ff;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}
Kode yang berwarna Biru,bisa dengan kode warna sesuai keinginan anda!! 
5.cari kode <body> 
6.lalu copy script dibawah ini,dan letakkan tepat diatas kode <body>
<div id='scroll'/>
7.cari kode </body>
8.lalu copy script dibawah ini,dan letakkan 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>
9.cari kode </head>
10.lalu copy script dibawah ini,dan letakkan kode dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> 

Selamat,widget Persentase Scroll ini sudah terpasang di blog anda,mudah bukan untuk memasangnya hehe,jika teman-teman merasa kesulitan untuk memasang widget ini,anda bisa bertanya kok di kolom komentar,Insyaallah nanti saya akan jawab!

Contact Me :
Jika anda memiliki Pertanyaan/Kritik maupun saran,anda bisa menghubungi Contact admin KEYZEE Shared di bawah ini :

    0 Response to "Cara Membuat Persentase untuk Scrollbar Blog"

    Post a Comment

    Subscribe to: Post Comments (Atom)