CARA MEMASANG PERSENTASE PADA SCROLLBAR

CARA MEMASANG PERSENTASE PADA SCROLLBAR - Dengan menambahkan trik ini bukan hanya sebagai hiasan blog semata tetapi pengunjung bisa melihat berapa persenkah halaman yang telah discroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100% dan ketika kita menariknya lagi keatas akan menjadi 0%, demikian juga sebaliknya. Jika sobat berminat untuk melakukan cara ini, itung-itung trik ini buat menghias blog agar menarik, dan apabila belum tau, contohnya seperti diblog saya ini, jadi silakkan ikuti step –by-stepnya.

_Masuk ke  Blogger >> Pada Dasbor >> Pilih Template >> Edit HTML >> Expand widget templates
_Sekarang cari kode ]]></b:skin> , dan  Copas kode CSS di bawah ini tepat diatas kode ]]></b:skin>.


#scroll {

  display:none;

  position:fixed;

  top:0;

  right:15px;

  z-index:500;

  padding:3px 8px;

  background-color:#369fcf;

  color:#fff;

  border-radius:3px;

  font-size:14px; 

}

#scroll:after {

  content: " ";

  position: absolute;

  top:50%;

  right:-10px;

  height:0;

  width:0;

  margin-top:-6px;

  border:6px solid transparent;

  border-left-color:#369fcf;

}

_Selanjutnya, simpan kode pemanggilnya di bawah </head>
<div id='scroll'></div>

_Simpan kode di bawah ini tepat di atas </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(600);

    if (scrollTimer !== null) {

        clearTimeout(scrollTimer);

    }

    scrollTimer = setTimeout(function() {

        $('#scroll').fadeOut(600);

    }, 1000);

});

//]]>

</script>


 _Kemudian simpan Template dan lihat hasilnya.

Jika sobat melakukanya dengan benar, maka persentase tsb sudah ada di samping scrollbar.


Sumber : http://belajar-dasar-seo.blogspot.com/2015/04/cara-memasang-persentase-pada-scrollbar_5.html
Previous
Next Post »

9 komentar

Write komentar
Saliman
ADMIN BLOG
April 28, 2015 at 8:30 AM delete

wah bisa jadi buat referensi gan, artikelnya bermanfaat

Reply
avatar
thiosanggara.top
ADMIN BLOG
April 28, 2015 at 8:31 AM delete

Wah boleh di coba tuh gan

Reply
avatar
Arijal
ADMIN BLOG
April 28, 2015 at 6:12 PM delete

Nyimak aja dah :), asik nih kayaknya

Reply
avatar
Darto Iwan
ADMIN BLOG
April 28, 2015 at 7:45 PM delete

Wah , bisa dicoba nih ..... makasih tips nya

Reply
avatar
April 28, 2015 at 7:55 PM delete

Boleh juga mas, sebagai penghias, jadi kita tau ketika scroll naik diturunkan berapa persentasenya.

Tapi ini enggak bakal bermasalah pada load mas?

Reply
avatar
Alfi Anggraeni
ADMIN BLOG
April 28, 2015 at 11:05 PM delete

pengin nyoba,, tapi edit htmlnya lg error

Reply
avatar
Unknown
ADMIN BLOG
April 29, 2015 at 12:56 AM delete

Sangat Bermanfaat Bro :)

Reply
avatar