ngintip

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>

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

Yuga irgi

Add Comment