Cara Membuat Tampilan Scrollbar Dengan Efek Persentase pada Blog

Haloo Sobat Blogger Admin Mau Bagi Tutorial Cara Membuat Tampilan Scrollbar Dengan Efek Persentase pada Blog Langsung Saja Kita KTP


Langkah Pertama Kita Mulai Sobat


  1. Login ke akun blogger Sobat.
  2. Kemudiat Edit Template
  3. Copy kode dibawah ini. Dan Letakan K CSS ini di atas ]]></b:skin> atau </style>


 #scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #222222;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #ccc;
}


4. cari Kode Ini  <body> atau <body
5. Dan Pastekan kode dibawah kode  

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


6. Langkah Terakhir Cara Koe Ini  </body> dan Patekan Kode Di Bawah Ini 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>


Jika Sobat Ingin Mengubag Warna Nya CaRi Kode Ini  background-color: #222222; Dan border-left-color: #ccc;


Gampang Kan Sobat Selamat Mencoba Semoga Berhasil Tidak Membuat Blog Berat


JANGAN CUMA Coba  DOANG TAPI JANGAN LUPA TINGGALKAN KOMENTAR ANDA TUNJUKAN BAHWA ANDA BLOGGER YANG BIJAK TRIMAKSIH SALAM ADMIN

Pasang iklan anda Di ini

13 komentar

mantafff gan ;) ada persentasinya gitu yaa. hehee

nice artikel gan

wahh keren nihh ijin coba back yah

tutorialnya keren gan. Tapi saya lagi malas nyoba. Ditunggu kunbal dan komen backnya ea gan?

wahh keren nihh ijin coba back yah

buat blognya berat gak nih gan..,?
soalnya pernah nyoba tapi gak ada muncul apa-apa.,.
tapi ini scriptnya beda moga mau pas di blog saya.,.
thanks ya gan.,.,

Bagus bisa mempercaantik blog niehh

mantap ni gan , ini dia yg saya cari ijin terapin diblog ane gan , trimakasih :)

Lumayan nih buat mempercantik blog ane :D , Thanks ya gan tutorialnya

info menarik .... follow back and coment http://matematicinmylife.blogspot.com/2013/11/cameracoid-online-shop-termurah-di.html

.. Seperti nya mantep nieh kalau di coba, izìn jajal triknya sob, niche info nya. . . . . . . .


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>


EmoticonEmoticon