Cara Menciptakan Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah) - Masgunggoyo

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

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

- Sudah tau apa itu pengaruh scroll persen? pengaruh scroll persen atau persentase scrollbar merupakan pengaruh khusus pada scrollbar suatu situs blog, yang mana fungsinya yaitu untuk memperlihatkan keterangan berapa persen halaman blog sudah dibaca.

Disebut sebagai presentase scrollbar sebab memang pengaruh ini memperlihatkan keterangan dalam bentuk persen, dimana pengaruh ini akan muncul saat seseorang melaksanakan scroll pada kursor/mouse komputer.

Efek ini akan dimulai dari 0% hingga 100%, dimana angka 100% membuktikan bahwa anda telah berada pada halaman final suatu situs blog.

Untuk lebih jelasnya, silahkan perhatikan tampilan scrollbar situs blog ini. Ketika anda melaksanakan scroll down maka pengaruh persentasenya akan muncul, begitupula saat anda melaksanakan scroll up.

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

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

Penutup

Itu beliau cara gampang memasang pengaruh persen pada scrollbar blog, cara ini dapat pribadi anda aplikasikan pada situs blog anda. Sedikit komplemen saja, bahwa bila anda ingin mengubah warna persentase, maka anda dapat mengubah instruksi warna #007bfd pada instruksi diatas.

Akhir kata, aku ucapkan terimakasih. Dan jangan lupa untuk terus mengunjungi situs blog ini untuk mendapat gosip menarik lainnya.

0 Response to "Cara Menciptakan Efek Scroll Persen Pada Scrollbar Di Blog Tanpa Ribet (Paling Mudah)"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel