Cara Membuat Persentase Pada Scrollbar Di Blog

Cara Membuat Efek Persentase Berwarna Keren dan Responsive Pada Scroll Bar Di Blog - Efek persentase pada scroll bar di blog ini sudah menjadi tren di kalangan blogger terutama blogger pemula.

Tak heran kenapa fitur persentase pada scroll bar blog ini sangat banyak di pasang di blog. Karena selain keren, efek scroll bar ini juga dapat menarik perhatian para pengunjung blog agar mereka betah lama-lama di blog kamu.

Tentunya jika page view rata-rata blog besar, ini akan menguntungkan blog kamu dari sisi penghasilan Adsense atau yang lainnya. Nah, di artikel kali ini saya akan membahas bagaimana cara membuat dan memasang efek persentase yang keren, unik dan responsive ini pada scroll bar blog dengan menggunakan CSS dan beberapa baris kode JavaScript. 

Baca Juga 5 Situs Layanan PING Terbaik Agar Blog Cepat di Indeks Google

Selain itu, persentase scroll bar ini cocok banget bagi kamu yang hobi dan suka menghias tampilan dan desain blog agar terlihat lebih keren, unik dan terlihat lebih profesional. 

Kalau kamu tertarik untuk membuat dan memasang efek persentase ini pada scroll bar blog kamu, kamu bisa simak dan ikuti langkah-langkah dibawah ini dengan benar.

Cara Membuat dan Memasang Efek Persentase Keren dan Responsive Pada Scroll Bar Di Blog Blogger

1. Masuk ke dashboard blogger kamu dulu
2. Masuk ke menu Theme » Edit HTML
3. Tambahkan CSS persentase scroll bar dibawah ini sebelum ]]></b:skin> atau </style>

   /* CSS persentase scroll bar By BokBan */ 
   #scroll{display:none;position:fixed;top:0;right:15px;z-index:500;padding:3px 8px;background-color:#134f5c;color:#fff;border-radius:3px;font-size:14px}
   #scroll:after{content:" ";position:absolute;top:50%;right:-10px;height:0;width:0;margin-top:-6px;border:6px solid transparent;border-left-color:#134f5c}

   Untuk mengganti warna background dari persentase scroll bar, ubah tulisan yang sudah ditandai
4. Kemudian tambahkan kode pemanggil CSS dibawah ini setelah tag <body>

   <div id="scroll"></div>

5. Langkah sebelum terakhir tambahkan JavaScript dibawah ini sebelum tag penutup body.

   <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 - $('#scroll').height() / 2;
   $('#scroll')
   .css('top', distance)
   .text(' (' + Math.round(progress * 100) + '%)')
   .fadeIn(100);
   if (scrollTimer !== null) {
   clearTimeout(scrollTimer);
   }
   scrollTimer = setTimeout(function() {
   $('#scroll').fadeOut();
   }, 1500);
   });
   /*]]>*/
   </script>

6. Setelah semua kode diatas dimasukan ke dalam template kamu sesuai di tempatnya, langkah terakhir klik simpan dan lihat hasilnya.

Nah, itulah tutorial cara membuat dan memasang efek persentase scroll bar yang keren, unik, SEO dan responsive diblog. Semoga artikel ini bisa membantu bagi yang membutuhkan khususnya blogger pemula yang suka menghias blognya agar terlihat lebih unik, keren dan berbeda dari yang lain.

Share :