Cara Membuat Tampilan Scrollbar Dengan Efek Persentase pada Blog
Langkah Pertama Kita Mulai Sobat
- Login ke akun blogger Sobat.
- Kemudiat Edit Template
- Copy kode dibawah ini. Dan Letakan K CSS ini di atas ]]></b:skin> atau </style>
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #222222;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #ccc;
}
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #222222;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #ccc;
}
4. cari Kode Ini <body> atau <body
5. Dan Pastekan kode dibawah kode
<div id='scroll'></div>
6. Langkah Terakhir Cara Koe Ini </body> dan Patekan Kode Di Bawah Ini Di Atas 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>
//<![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>
Jika Sobat Ingin Mengubag Warna Nya CaRi Kode Ini background-color: #222222; Dan border-left-color: #ccc;
Gampang Kan Sobat Selamat Mencoba Semoga Berhasil Tidak Membuat Blog Berat
JANGAN
CUMA Coba DOANG TAPI JANGAN LUPA TINGGALKAN KOMENTAR ANDA TUNJUKAN
BAHWA ANDA BLOGGER YANG BIJAK TRIMAKSIH SALAM ADMIN
mantafff gan ;) ada persentasinya gitu yaa. hehee
BalasHapusnice artikel gan
BalasHapuskeren buat blog gan
BalasHapuswahh keren nihh ijin coba back yah
BalasHapustutorialnya keren gan. Tapi saya lagi malas nyoba. Ditunggu kunbal dan komen backnya ea gan?
BalasHapuswahh keren nihh ijin coba back yah
BalasHapusbuat blognya berat gak nih gan..,?
BalasHapussoalnya pernah nyoba tapi gak ada muncul apa-apa.,.
tapi ini scriptnya beda moga mau pas di blog saya.,.
thanks ya gan.,.,
Bagus bisa mempercaantik blog niehh
BalasHapuslangsung di coba dah
BalasHapusmantap ni gan , ini dia yg saya cari ijin terapin diblog ane gan , trimakasih :)
BalasHapusLumayan nih buat mempercantik blog ane :D , Thanks ya gan tutorialnya
BalasHapusinfo menarik .... follow back and coment http://matematicinmylife.blogspot.com/2013/11/cameracoid-online-shop-termurah-di.html
BalasHapus.. Seperti nya mantep nieh kalau di coba, izìn jajal triknya sob, niche info nya. . . . . . . .
BalasHapus