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 store
ADMIN BLOG
April 28, 2015 at 8:30 AM delete

wah bisa jadi buat referensi gan, artikelnya bermanfaat

Reply
avatar
Thio Sanggara
ADMIN BLOG
April 28, 2015 at 8:31 AM delete

Wah boleh di coba tuh gan

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

Nyimak aja dah :), asik nih kayaknya

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

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

Reply
avatar
Asep Maulana Ismail
ADMIN BLOG
April 28, 2015 at 7:51 PM delete

mantap gan tips nya (Y)

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
Pitet haeng
ADMIN BLOG
April 28, 2015 at 11:05 PM delete

pengin nyoba,, tapi edit htmlnya lg error

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

Sangat Bermanfaat Bro :)

Reply
avatar