×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Persentase Scrollbar diBlogger

January 17, 2020   • Comment

Apa itu persentase scrollbar ? persentase scrollbar merupakan sebuah fitur yang mampu menghitung sejauh mana blog kamu ditelusuri oleh pengunjung, jadi ketika seseorang melakukan scroll kebawah postingan atau web kalian maka disamping scrollbar kalian tersebut akan ada sebuah persentase penghitung.

Dengan memasang persentase scrollbar web atau blog kita akan terlihat lebih lengkap dan menarik, dan untuk pemasangan persentase scrollbar pun tidak terlalu rumit, nah bagi kalian yang penasaran bagaimana cara membuat persentase scrollbar kalian dapat membaca dan menerapkan tutorial yang ada diweb ini, untuk DEMO dari persentase scrollbar nanti akan saya buatkan di Akhir postingan.

Yuk Langsung aja ke tutorial membuat persentase scrollbar
Cara Membuat Persentase Scrollbar

  1. Seperti biasa login dulu ke Blogger,
  2. Pada dashboard Blogger, pilih Tema ➟  Edit HTML,
  3. Kemudian cari kode ini ]]></b:skin> atau </style>, jika sudah ketemu copy kode css dibawah ini dan letakkan tepat diatas kode yang disebutkan sebelumnya,
    /* Persentase Scrollbar */
    #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
    #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
  4. Setelah menempatkan kode tersebut, cari kembali kode <body> dan copy kode dibawah ini dan letakkan tepat diatas kode <body>tadi,
    <div id='scrollPersentase'/>
  5. Masih belum selesai, kemudian kamu cari lagi kode </body>, dan letakkan kode javascript dibawah ini tepat diatas kode tersebut,
    <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 - $('#scrollPersentase').height() / 2;
    $('#scrollPersentase')
    .css('top', distance)
    .text(' (' + Math.round(progress * 100) + '%)')
    .fadeIn(100);
    if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
    $('#scrollPersentase').fadeOut();
    }, 1500);
    });
    /*]]>*/
    </script>
    
  6. Terakhir simpan/save template.
Sekian tutorial blogger cara membuat persentase scrollbar, dan jika menurut kamu persentase scrollbar yang saya bagikan ini kurang menarik untuk dilihat kamu dapat mengembangkannya menjadi lebih menarik :D Semoga bermanfaat

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Membuat Persentase Scrollbar diBlogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With