Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Persentase Keren Pada Scrollbar Di Blog

Cara Membuat Persentase pada Scrollbar di Blog Cara Membuat Persentase Keren pada Scrollbar di Blog
Siapa sih yang tidak suka kalau tampilan blognya menarik dan menawan, semua orang niscaya menginginkannya. Nah kali ini saya akan menyebarkan tips untuk Anda mengenai cara menciptakan efek persentase di scrollbar blog. Sebagian Blogger banyak yang memasang persentase pada Scrollbar blognya , hal itu mempunyai kegunaan untuk mengukur berapa persen halaman yang telah di scroll, apabila halaman telah discroll hingga bawah maka nilai persentase akan mengambarkan 100%. Widget persentase ini akan berada di sebelah scrollbar, dan mengatakan berapa persen scrollbar telah digulung. Sebenarnya Persentase Scrollbar ini bukanlah hal yang wajib ada pada blog, namun hal ini lebih ke mempercantik blog, jadi tinggal selera kita aja. Cara pemasangannya pun cukup gampang dan Anda tidak akan mengalami error walaupun dikala Anda mengeceknya di Validator HTML5 ataupun di CSS3, sehingga dengan memasang widget ini, blog anda akan tetap valid. Nah jadi tunggu apalagi yuk ikuti cara pemasangannya, dan lihat juga tampilannya menyerupai ini.

1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode ]]></b:skin>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

#scroll { display: none; position: fixed; top: 0; right: 20px; z-index: 500; padding: 3px 8px; background-color: rgb(51, 51, 51); color: #fff; border-radius: 3px; } #scroll:after { content: " "; position: absolute; top: 50%; right: -8px; height: 0; width: 0; margin-top: -4px; border: 4px solid transparent; border-left-color: rgb(51, 51, 51); }

Catatan :
Kode 3px 8px : Merupakan tinggi dan  lebarnya kotak persen, silahkan bila mau diubah  3px menyatakan tinggi, sedangkan 8px untuk lebar. 
Ganti kode 20px untuk mengubah jarak antara persentase scrollbar dengan scrollbar blog.
Ganti kode rgb(51, 51, 51);  untuk mengubah warna persentase scrollbar misal menjadi ##4B4B4B atau dapat juga script warna lainnya.
Ganti kode #fff untuk mengganti warna abjad & angka yang ditampilkan dalam persentase scrollbar.

5.Selanjutnya, cari kode </head>, dan pastekan arahan berikut sempurna dibawah / sehabis kode </head> 
<div id='scroll'></div>

6.Terakhir, cari kode </body>, dan pastekan script dibawah ini diatas / sebelum kode </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(600);     if (scrollTimer !== null) {         clearTimeout(scrollTimer);     }     scrollTimer = setTimeout(function() {         $('#scroll').fadeOut(600);     }, 1000); }); //]]> </script>
8. silahkan klik Simpan / Save Template untuk menyimpan, kemudian silahkan dicek dan lihat hasilnya.


 Bagaimana gampang bukan dan caranya sangat simple untuk dilakukan. Jadi sekian dari artikel kali ini, bila ada yang ingin Anda tanyakan atau ingin menambahkan silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :