Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Scrolling Progress dan Reading Progress di Blogger

Membuat Scrolling Progress dan Reading Progress di Blogger

Membuat Persentase Scroll (Scrolling Progress) dan Reading Progress di Blogger ― Apakah kamu pernah melihat pada suatu halaman situs atau blog yang menampilkan nilai persen tepat di samping scroll bar!? Atau kamu pernah melihat sebuah loading bar kecil (seperti batang diagram bar) di bagian atas halaman blog yang berubah pada saat halaman di scroll?

Itu disebut dengan scrolling progress atau angka yang menampilkan persentase scroll sebuah halaman. Sama seperti namanya, tujuan dari angka persen scrolling progress yang tampil di halaman blog ini adalah untuk menampilkan berapa persen bagian dari suatu halaman yang dilihat oleh penunjung blog dari keseluruhan satu halaman tersebut dari atas hingga ke bawah.

Membuat Scrolling Progress dan Reading Progress di Blogger

Pada dasarnya scroll bar percentage ini fungsinya sama seperti scroll bar yang sering kamu lihat pada saat mengakses sebuah halaman situs melalui PC atau desktop, tetapi beberapa orang membuat sebuah inovasi yang menampilkan persentase scroll bar tersendiri untuk menarik perhatian pengunjungnya. Contoh dari persentase scroll bar tersebut bisa kamu lihat pada halaman demo berikut ini.


Scrolling Progress di Samping Scrollbar

Untuk memasang Scrolling Progress yang tampil dalam bentuk angka persen di bagian samping halaman blog atau bisa juga disebut scrolling progress seperti pada halaman Demo #1, kamu bisa mengikuti langkah-langkah berikut ini.
  1. Buka Blogger lalu pada bagian Tema buka Edit HTML.
  2. Membuat Scrolling Progress dan Reading Progress di Blogger
  3. Temukan kode </head> dan letakkan kode berikut ini di atasnya.
  4. <style>
    /* Scrolling Progress */
    #scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#4B4B4B;color:#FFF;border-radius:3px}
    #scroll:after{position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#4B4B4B}
    </style>
  5. Kamu bisa mengganti bagian yang ditandai dengan kode warna yang kamu inginkan untuk warna background kotak persentase yang akan tampil nantinya.
  6. Setelah itu temukan kode <body> lalu tambahkan kode berikut di bawahnya.
  7. <div id="scroll"></div>
  8. Dan terakhir, temukan kode </body> dan tambahkan kode berikut ini di atasnya.
  9. <script type='text/javascript'>
    /*<![CDATA[*/
    var scrollTimer=null;$(window).scroll(function(){var l=$(this).height(),o=l/$(document).height()*l,t=$(this).scrollTop()/($(document).height()-l),e=t*(l-o)+o/2-$("#scroll").height()/2;$("#scroll").css("top",e).text(" ("+Math.round(100*t)+"%)").fadeIn(100),null!==scrollTimer&&clearTimeout(scrollTimer),scrollTimer=setTimeout(function(){$("#scroll").fadeOut()},1500)});
    /*]]>*/
    </script>
  10. Setelah itu simpan perubahan tersebut dan lihat hasilnya pada halaman blog kamu, akan muncul angka di samping scroll bar saat halaman digulir/scroll ke bawah maupun ke atas.

Reading Progress di Atas Halaman

Reading Progress ini bentuknya berbeda dari scrolling progress di atas, jika sebelumnya menampilkan angka persentase di samping scroll bar, reading progress ini tampil seperti loading bar yang berada di bagian atas halaman blog seperti pada Demo #2. Jika kamu tertarik mencoba reading progress bar versi Jquery, kamu bisa baca di sini. Untuk membuatnya, silakan ikuti langkah-langkah berikut ini.
  1. Buka Blogger lalu pada bagian Tema buka Edit HTML.
  2. Membuat Scrolling Progress dan Reading Progress di Blogger
  3. Temukan kode </head> dan letakkan kode berikut ini di atasnya.
  4. <style>
    #scrollLine{background-color:#f44336;height:2px;position:fixed;top:0;left:0;transition:0.05s ease-in all;margin-bottom:1em;z-index:9999}
    </style>
  5. Kamu bisa mengganti bagian yang ditandai dengan kode warna yang kamu inginkan untuk warna bar yang tampil nantinya.
  6. Setelah itu temukan kode <body> lalu tambahkan kode berikut di bawahnya.
  7. <div id="scrollLine"></div>
  8. Dan terakhir, temukan kode </body> dan tambahkan kode berikut ini di atasnya.
  9. <script>//<![CDATA[
    let scrollBar=document.querySelector("#scrollLine");function fillProgressBar(){let e=window.innerHeight,o=document.body.clientHeight,n=window.scrollY/(o-e)*100;scrollBar.style.width=`${n}%`}function checkPosition(){document.querySelectorAll("h1").forEach(e=>{window.scrollY+window.innerHeight>e.offsetTop+30?e.classList.add("in"):e.classList.remove("in")});document.querySelectorAll("p").forEach(e=>{window.scrollY+window.innerHeight>e.offsetTop+30?e.classList.add("in"):e.classList.remove("in")})}function debounce(e,o=15,n){var i;return function(){var t=this,l=arguments,c=n&&!i;clearTimeout(i),i=setTimeout(function(){i=null,n||e.apply(t,l)},o),c&&e.apply(t,l)}}window.addEventListener("scroll",debounce(fillProgressBar)),document.addEventListener("DOMContentLoaded",debounce(checkPosition)),window.addEventListener("scroll",debounce(checkPosition));
    //]]></script>
  10. Setelah itu simpan perubahan tersebut dan lihat hasilnya pada halaman blog kamu, akan muncul bar di bagian atas halaman blog kamu yang berubah saat halaman blog di-scroll.

Penutup

Itulah beberapa langkah yang bisa kamu lakukan untuk memasang scrolling progress dan reading progress pada halaman blog di Blogger. Baik scrolling progress maupun reading progress bar ini hanya menggunakan Javascript murni, jadi cocok bagi kamu yang tidak menggunakan Jquery, kamu juga bisa coba reading progress yang menggunakan jquery.

Semoga pembahasan dalam tulisan ini bisa bermanfaat untuk kamu. Apabila ada hal-hal yang kurang jelas, silakan tanyakan pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Posting Komentar untuk "Membuat Scrolling Progress dan Reading Progress di Blogger"

Dapatkan Info Terbaru!