Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah)

by Kank Maret 26, 2019 0 Comments

Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) - Selamat datang di halaman kami 15HITS | Kumpulan Viral Paling Dicari, Pada postingan kali ini kita akan ulas Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah), Disini semua telah di siapkan khusus buat anda. Dalam postingan Gambar Blogger, yang sudah dibuat ini, bisa di ambil manfaatnya.



link : Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah)

Mungkin Anda Tertarik


Daftar Isi [Buka]

Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah)

15hits- Sudah tau apa itu efek scroll persen? efek scroll persen atau persentase scrollbar merupakan efek khusus pada scrollbar suatu situs blog, yang mana fungsinya adalah untuk memberikan keterangan berapa persen halaman blog sudah dibaca.

Disebut sebagai presentase scrollbar karena memang efek ini memberikan keterangan dalam bentuk persen, dimana efek ini akan muncul ketika seseorang melakukan scroll pada kursor/mouse komputer.

Efek ini akan dimulai dari 0% sampai 100%, dimana angka 100% menandakan bahwa anda telah berada pada halaman akhir suatu situs blog.

Untuk lebih jelasnya, silahkan perhatikan tampilan scrollbar situs blog ini. Ketika anda melakukan scroll down maka efek persentasenya akan muncul, begitupula ketika anda melakukan scroll up.

Nah, untuk cara membuat efek persen ini sendiri sangatlah mudah, anda hanya perlu mengikuti panduan dibawah ini:

1. Login ke Blogger.com>>Tema>>Edit HTML.
2. Copy atau salin kode berikut, dan pastekan diatas kode </body>.
<style>
#topscroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#topscroll:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;}
</style>
<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 - $('#topscroll').height() / 2;$('#topscroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);}
scrollTimer = setTimeout(function(){$('#topscroll').fadeOut();}
,1500);}
);//]]></script>
<div id='topscroll'></div>
3. Simpan Tema, dan selesai.

Penutup

Itu dia cara mudah memasang efek persen pada scrollbar blog, cara ini bisa langsung anda aplikasikan pada situs blog anda. Sedikit tambahan saja, bahwa jika anda ingin mengubah warna persentase, maka anda bisa mengubah kode warna #007bfd pada kode diatas.

Akhir kata, saya ucapkan terimakasih. Dan jangan lupa untuk terus mengunjungi situs blog ini untuk mendapatkan informasi menarik lainnya.


Itulah Ulasan Kami Tentang Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah)

Sekianlah informasi tentang Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) yang dapat kami bagikan, semoga dapat memberikan manfaat bagi anda.Teriakasih, jangan lupa share dan tuliskan komentar dibawah ini.


Anda sudah melihat postingan Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) dengan alamat link https://15hits.blogspot.com/2019/03/cara-membuat-efek-scroll-persen-pada.html silahkan di copy dan bagikan.

0 Komentar