Keren kan, Jika berminat ikuti tips di bawah ini :
1. Pertama, login ke Blogger, dan pilih blog yang ingin Anda
beri widget persentase scrollbar.
2. Masuk ke bagian Template.
3. Backup
dulu template blog Anda. Lalu, klik Edit
HTML.
4. Tekan CTRL + F, dan cari kode ]]></b:skin>, lalu copy
dan pastekan kode berikut tepat diatas /
sebelum kode ]]></b:skin>
#scroll {display: none;position: fixed;top: 0;right: 20px;z-index: 500;padding: 3px 8px;background-color: #FF8000;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: #FF8000;}
Catatan
:
Ganti kode 20px untuk mengubah jarak antara
persentase scrollbar dengan scrollbar blog
Ganti kode #FF8000 untuk mengubah warna
persentase scrollbar.
Ganti kode #fff untuk mengganti warna angka
yang ditampilkan dalam persentase scrollbar.
Jika anda tidak tau tentang kode2 warna, bisa menggunakan Photoshop. seperti gambar di bawah ini:
5. Selanjutnya,
cari kode </head>, dan pastekan kode berikut tepat dibawah / sesudah 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(100);if (scrollTimer !== null) {clearTimeout(scrollTimer);}scrollTimer = setTimeout(function() {$('#scroll').fadeOut();}, 1500);});//]]></script>
7. Sebagai
penutup, silahkan klik Simpan / Save
Template untuk menyimpan perubahan. Buka blog Anda untuk melihat persentase
pada scrollbar ini.
Tidak ada komentar:
Posting Komentar