Trik Membentuk Reading Progress Caf pada Blog

Reading progress tapkast merupakan sebuah indikator misalnya garis berwarna buat mengetahui sejauh mana pengunjung situs Sobat membaca sebuah wetsartikel pada blog atau webstek Sobat.

Widget reading progress tapkast ini memilik banyak sekali macam jenis, terdapat yang berada pada bagian atas blog yang berperan mendatar saat Sobat melakukan scroll pada sebuah halaman maka progress tapkast bakal menunjuk dari kiri ke kanan.

Terdapat pula dengan peranan vertikal misalnya yang telah pernah aku periksa pada wetsartikel sebelumnya cara membuat presentase scrollbar di blog.

Nah, buat progress tapkast yang bakal aku untuk kalium ini yaitu yang mempunyai peranan mendatar dibagian atas blog.

Terdapat 2 jenis pilihan yang aku tawarkan kepada Sobat, yaitu progress tapkast dengan warna flat atau datar serta pula progress tapkast dengan warna gradient atau gradasi. Sobat dapat memilihnya sesuai dengan kesukaan masing-masing.

Baik, langsung saja bagia Sobat yang tertarik buat memasang reading progress tapkast pada blog silahkan ikuti langkah-langkahnya pada bawah ini :

Trik Memasang Reading Progress Caf pada Blog

1. Masuk ke Blogger.
2. Kemudian buka hidangan Tema > Edit HTML.
3. Selanjutnya masukkan kode CSS ini pada atas kode </headdangt;

Versi Flat

<style type="text/css">
/* Reading Progress Caf (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:1000}
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}
</styledangt;

Catatan :
height:3px; buat mengatur tinggi garis mendatar.
#6d1bef; merupakan warna pokok (flat), silahkan ganti dengan kode warna lain.

Versi Gradient

<style type="text/css">
/* Reading Progress Caf (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:1000}
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}
</styledangt;

Catatan :
height:3px; buat mengatur tinggi garis mendatar.
#5E64EE serta #5EEE66 merupakan warna gradasi, silahkan ganti dengan kode warna lain.

4. Selanjutnya masukkan kode HTML ini pada bawah kode <bodydangt;

<progress value="0" max='1'>
   <div group="progress-container">
      <span group="progress-bar"></spandangt;   
   </divdangt;
</progressdangt;

5. Kemudian masukkan kode JavaScript ini pada atas kode </bodydangt;

<script type="text/javascript">
//<![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()})}});
//]]>
</scriptdangt;

6. Terakhir silahkan klik Simpan tema.

Catatan:
Jika reading progress tapkast atau garis mendatar tidak timbul silahkan masukkan kode jQuery ini pada atas kode </bodydangt;

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

Kesimpulan

So, widget reading progress tapkast ini adalah garis yang bergerak secara mendatar jika pembaca atau pengunjung blog menggulir atau scroll halaman ke bawah.

Selain buat mempercantik tampilan blog Sobat, tentu reading progress tapkast ini pula sangat bermanfaat buat pengunjung situs Sobat mengetahui seberapa panjang atau dalam sebuah halaman pada situs Sobat.

Berbagi :