Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Membuat Reading Progress Bar di Blogger

Cara Membuat Reading Progress Bar di Blogger
Cara Membuat Reading Progress Bar di Blogger
Cara Membuat Reading Progress Bar di Blogger - Selamat datang di imamkunblog.com, hello sobat kembali lagi dengan saya disini dan pada artikel kali ini saya akan membagikan kepada sobat cara membuat reading prgress bar. Apa itu reading progress bar?

Reading Progress Bar adalah sebuah petunjuk seperti garis bawah yang berwarna untuk memberikan sejauh mana para pengunjung atau sobat sendiri membac artikel di blog sobat.

Jika sobat sering membaca web berita biasanya ada reading progress bar ini, reading progress bar sendiri terdapat dua jenis yaitu horizontal yang berada di atas blog dan juga vertikal.

Jika sobat membaca semakin kebawah maka Reading Progress Barnya akan melakukan scroll dari kiri kekanan semakin jauh sobat membaca maka semakin jauh juga progress barnya berjalan dari kiri ke kanan.

Jika sobat tertarik ingin memasang Reading Progress Bar ini di blog sobat, sobat bisa memasangnya dengan mengikuti langkah-langkahnya dibawah ini.

Cara Memasang Reading Progress Bar di Blog


Untuk langkah cara membuat reading progress bar nya sobat ikuti dengan baik ya supaya tidak ada kesalahan pada saat pemasangannya nanti.

1. Pertama, sobat Login ke Blogger.com


2. Setlah login dan masuk ke Dasboard Blogger maka selanjutnya sobat pilih menu Template/Theme > Edit HTML.

3. Setelah itu sobat cari kode </head> (Gunakan CTRL+F Untuk mempermudah pencarian kode). Jika sudah ketemu maka selanjutnya sobat copy dan paste kan CSS dibawah ini tepat diatas kode </head>.

&lt;style type=&quot;text/css&quot;&gt;
/* 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: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}
&lt;/style&gt;

Catatan:
height:3px; sobat bisa atur tinggi garis horizontalnya, atau sesuaikan sesuai keinginan sobat. #6d1bef; sobat bisa ubah warna utamanya dengan kode warna sesuka sobat.

Jika sudah maka selanjutnya kita harus membalasny kodenya dengan memasang Kode HTML. Cari kode <body> dan pastekan kode dibawah ini tepat dibawah kode <body>.

<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>   
   </div>
</progress>

Jika sudah maka selanjutnya adalah dengan memasang kode JavaScript tepat diatas kode </body>. cari dan pastekan kodenya dibawah ini tepat diatas kode </body>.

<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()})}});
//]]>
</script>

4. Terakhir Simpan Template.

Nah, itulah cara membuat reading progress bar di blogger, dengan memasang Reading Progress Bar ini maka tampilan Blog sobat akan lebih keren dan juga dapat memebrikan sebuah navigasi oleh pengunjung sejauh mana mereka membaca artikel di blog sobat.

Happy Blogging!!
Show comments
Hide comments

0 Response to "Cara Membuat Reading Progress Bar di Blogger"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×