Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Suka dengan konten Maringngerrang.com?
Jika kamu merasa terbantu dengan konten di blog ini, silakan dukung kami melalui Saweria.co/maringngerrang. Dukungan berharga dari kalian semua-lah yang membuat blog ini bisa tetap hadir di hadapan kamu. Terima kasih!

Membuat Reading Progress Bar di Blogger

Membuat Reading Progress Bar di Blogger

Tentang Reading Progress Bar

Membuat Reading Progress Bar di Blogger ― Setelah pada tulisan sebelumnya telah dibahas tentang scroll bar percentage, maka pada tulisan kali ini akan dibahas hal yang kurang lebih sama seperti post sebelumnya, yaitu tentang reading progress bar.

Bagi kamu yang belum mengetahuinya, reading progress bar (atau yang jika diterjemahkan artinya bilah kemajuan pembacaan) merupakan sebuah bar (bilah) yang mirip seperti loading bar yang muncul pada bagian atas halaman blog yang berfungsi untuk menampilkan reading progress kepada pengunjung/pembaca blog. Maksud dari reading progress adalah pembaca dapat mengetahui sudah berapa jauh sebuah halaman blog yang telah dia baca melalui scroll yang dia lakukan pada halaman tersebut.

Reading progress bar akhir-akhir ini cukup banyak digunakan pada berbagai blog maupun situs di internet dan menjadi sebuah tren baru. Pada dasarnya untuk membuat reading progress bar seperti itu caranya cukup mudah dan tidak memerlukan sebuah proses yang kompleks dan rumit. Sebagai sebuah contoh, kamu bisa melihat hasilnya seperti apa pada halaman demo berikut.


Membuat Reading Progress Bar di Blogger

Sebelum mengetahui cara memasang reading progress bar di Blogger, terlebih dahulu perlu kamu ketahui bahwa untuk membuatnya berfungsi kamu membutuhkan javascript library bernama JQuery, jadi jika blog kamu belum dipasangi JQuery, silakan pasang dulu kode berikut ini di di atas </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Untuk memasang reading progress seperti pada halaman demo di atas, kamu bisa mengikuti langkah-langkah berikut ini.
  1. Buka Blogger lalu pada bagian Tema buka Edit HTML.
  2. Membuat Persentase Scrollbar dan Reading Progress di Blogger
  3. Temukan kode </head> dan letakkan kode berikut ini di atasnya.
  4. Flat Version
    <style>
    /* Reading Progress Bar (Flat) */
    progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#6d1bef;z-index:9999}
    progress::-webkit-progress-bar{background-color:transparent;z-index:10}
    progress::-webkit-progress-value{background-color:#6d1bef;z-index:10}
    progress::-moz-progress-bar{background-color:#6d1bef;z-index:10}
    .progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
    .progress-bar{background-color:#6d1bef;width:0%;display:block;height:inherit;z-index:10}
    </style>
    Gradient Version
    <style>
    /* Reading Progress Bar (Gradient) */
    progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:9999}
    progress::-webkit-progress-bar{background-color:transparent;z-index:10}
    progress::-webkit-progress-value{background:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:10}
    progress::-moz-progress-bar{background:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:10}
    .progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
    .progress-bar{background:linear-gradient(45deg, #5E64EE, #5EEE66);width:0%;display:block;height:inherit;z-index:10}
    </style>
  5. Kamu bisa mengganti bagian yang ditandai dengan kode warna yang kamu inginkan untuk warna bar yang akan tampil nantinya.
  6. Setelah itu temukan kode <body> lalu tambahkan kode berikut di bawahnya.
  7. <progress value='0' max='1'>
      <div class='progress-container'>
        <span class='progress-bar'></span>  
      </div>
    </progress>
  8. Dan terakhir, temukan kode </body> dan tambahkan kode berikut ini di atasnya.
  9. <script>
    //<![CDATA[
    // Progress Scrollbar
    $(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
    //]]>
    </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 reading progress bar di Blogger, kamu bisa memilih untuk memasang versi warna polos atau warna gradiasi. Jika kamu tidak ingin menggunakan Jquery di blog kamu, kamu bisa baca cara memasang reading progress bar tanpa 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 Reading Progress Bar di Blogger"

Dapatkan Info Terbaru!