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 dahuluLalu 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'>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
/*<![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>
<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
Tidak ada komentar:
Posting Komentar