6

percent scroll

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: &#8221; &#8221;;
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

Posting Komentar Blogger

  1. Unik nih, saya simpan ya sob :D

    BalasHapus
  2. bagus infonya. bagi yang sedang mencari web hosting silahkan berkunjung
    kesini www.pesanhosting.com harganya murah cocok untuk pemula maupun
    corporate

    BalasHapus
  3. cip...
    longok2 gencablak.blogspot.com (h)

    BalasHapus
  4. JUJUR AJA KAWAN.. DL SY SERING KENA TIPU SM PRAMAL GADUNGN & SAMPAI2 MTR AKU KEJUAL BUAT IKUTIN PERMINTAANNYA.. TP TUHAN SDH KASIHAN SM SY & BERIKAN JLN KLUAR UNTK PERTEMUKAN NMR Hp SANG PERAMAL MBAH RUWUH INI DAN DI SITULAH AWAL MULA KESUKSESAN SAYA. BAGI YANG MAU ANGKA TOGEL DENGAN MODAL 300.000 SAJA YANG ANDA KIRIM SAMA PERAMAL MBAH RUWUH,, MAKA KAMU SDH BISA DPT 3D/4D YG DI JAMIN 100% TEMBUS & MEMUASKAN . NI NOMOR Hp MBAH RUWUH 082 347 737 757 www.prediksitogelsgp4d.blogspot.com








    JUJUR AJA KAWAN.. DL SY SERING KENA TIPU SM PRAMAL GADUNGN & SAMPAI2 MTR AKU KEJUAL BUAT IKUTIN PERMINTAANNYA.. TP TUHAN SDH KASIHAN SM SY & BERIKAN JLN KLUAR UNTK PERTEMUKAN NMR Hp SANG PERAMAL MBAH RUWUH INI DAN DI SITULAH AWAL MULA KESUKSESAN SAYA. BAGI YANG MAU ANGKA TOGEL DENGAN MODAL 300.000 SAJA YANG ANDA KIRIM SAMA PERAMAL MBAH RUWUH,, MAKA KAMU SDH BISA DPT 3D/4D YG DI JAMIN 100% TEMBUS & MEMUASKAN . NI NOMOR Hp MBAH RUWUH 082 347 737 757 www.prediksitogelsgp4d.blogspot.com

    BalasHapus

 
Top