Cara Membuat Persentase pada Scrollbar

Hai sob kali ini saya akan membagikan tuorial tentang Membuat Persentase pada Scrollbar - Tutorial kali ini sebenarnya tidak terlalu penting bagi sebuah blog, namun bagi sahabat yang ingin membuat blognya lebih unik, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini.

Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.


Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Login ke akun Blogger sobat

 

2. Sekarang Klik Template




3. Klik EDIT HTML



4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f

5. Letakan kode di bawah tepat di atas kode ]]></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;
}

Sekarang simpan kode di bawah tepat di bawah kode </head>

 <div id='scroll'></div>

Dan Sekarang Simpan  JavaScript dibawah tepat di atas kode </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>

Gemana sob, mudah kan??Oke Cukup sekian, Semoga Bermanfaat..!
Previous
Next Post »

11 komentar

Write komentar
July 2, 2013 at 12:50 PM delete

Segera Gue Coba Bro !
Comment Back : http://gerardo-yeah.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
July 4, 2013 at 8:36 AM delete

Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan, dan ke mungkinan template anda tidak bisa menggunakan persentase ini

Reply
avatar
Fico Pangestu
AUTHOR
August 4, 2013 at 4:53 PM delete

cara buat tulisan admn gimana???

Reply
avatar
Henry Dwi.s
AUTHOR
August 4, 2013 at 5:08 PM delete

Nanti Malem Ane share caranya sob!

Reply
avatar
Prince Obm
AUTHOR
August 12, 2013 at 7:35 PM delete

Nice info masbro langsung coba :D
comment back princeobm.blgospot.com

Reply
avatar
Henry Dwi.s
AUTHOR
August 12, 2013 at 7:39 PM delete

thank's bro, siap meluncur

Reply
avatar
Steven Gulo
AUTHOR
December 19, 2013 at 3:20 PM delete

Gan, justru saya tertarik dgn template nya Pes Tricks agan. boleh tau dapat darimana? Boleh bagi gak gan?

Reply
avatar
Henry Dwi.s
AUTHOR
December 19, 2013 at 10:18 PM delete

itu saya download di mastemplate.com dan saya ubah2 sedikit, blom bisa di bagi bro karena ane masih make

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon