Saturday, June 29, 2013

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..!

Related Posts

Cara Membuat Persentase pada Scrollbar
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

12 komentar

Tulis komentar
avatar
July 2, 2013 at 12:50 PM

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

Reply
avatar
July 4, 2013 at 8:36 AM

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
August 4, 2013 at 4:53 PM

cara buat tulisan admn gimana???

Reply
avatar
August 4, 2013 at 5:08 PM

Nanti Malem Ane share caranya sob!

Reply
avatar
August 12, 2013 at 7:35 PM

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

Reply
avatar
December 19, 2013 at 3:20 PM

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

Reply
avatar
December 19, 2013 at 10:18 PM

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

Reply
avatar
February 10, 2019 at 1:49 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================