Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) - Hallo sahabat Berbagi Tips Trik Apa Saja, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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

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

Paling-Top21- 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.

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

Sekianlah artikel Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) dengan alamat link https://bangcombat.blogspot.com/2019/03/cara-membuat-efek-scroll-persen-pada.html

Bagikan Artikel ini