Cara Membuat Tampilan Scrollbar Dengan Efek Persentase pada Blog

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

13 komentar

  1. mantafff gan ;) ada persentasinya gitu yaa. hehee

    BalasHapus
  2. keren buat blog gan

    BalasHapus
  3. wahh keren nihh ijin coba back yah

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

    BalasHapus
  5. wahh keren nihh ijin coba back yah

    BalasHapus
  6. 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.,.,

    BalasHapus
  7. Bagus bisa mempercaantik blog niehh

    BalasHapus
  8. Anonim11:30

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

    BalasHapus
  9. Anonim11:39

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

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

    BalasHapus
  11. Anonim07:43

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

    BalasHapus


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>