Apa kabar sahabat. Bagaimana kabarnya ? Melihat tampilan blog saya yang
lebih ringan, tertarik gak mengunjungi blog saya terus ? Ha ha ha.
Baiklah, apakah kalian penasaran dengan kotak kecil di kanan yang muncul
disaat kalian meng-scroll blog anda ? Di kotak kecil terdapat berapa
persen anda mengscroll blog saya, tetapi apakah anda ingin memasangnya
juga di blog anda ? Baiklah simak artikel berikut
Note : Saya belum mencobanya di Firefox dan IE tetapi
kalau untuk firefox 4+ saya kira / kayaknya baik baik saja, kalau IE
biarlah yang makai komentar :)
CSS
Baiklah langsung buka Blogger terlebih dahulu
Lalu buka Blogger >> Template >> Edit HTML
Nah pasang kode berikut diatas */]]></b:skin>
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
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: #2187e7;
}
Tempat pemanggilan
Pasang kode ini diatas <body>
<div id='scroll'/>
Javascript
Untuk javascriptnya, pasang kode javascript berikut diatas </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>
Setelah ini, anda harus memasang jquery di blog anda. Tapi jika sudah
ada baik versi lebih lama maupun baru, anda tidak perlu memasang kode
dibawah ini
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Taruh diatas </head>
Note : Melihat kode javascript diatas, disana sebenarnya tidak
diperlukan jquery tapi setelah saya coba di suatu template, kode ini
tidak berfungsi tanpa jquery jadi buat jaga-jaga pasanglah jquery
Pertama-tama coba tanpa jquery, jika bisa ya sudah, jika tidak pakai
jquery. Jika tetep tida bisa memakai jquery berarti ada masalah dalam
scriptnya. Silahkan hubungi saya melalui komentar
capoenk 13
Published:
2014-05-11T08:54:00-07:00
Title:kisah sedih di hari minggu sekali
Rating:
5 On
22 reviews
