Hallo Sobat
Blog Krizeer pada kesempatan kali ini saya akan membagikan tutorial mengenai
Cara Membuat Scrollbar Dengan Persentase.
apa sih itu ?, menjelaskannya susah liat saja scrollbar di blog ini sebagai demonya. dan tutorial ini hanya untuk memperindah tampilan blog saja.
ini dia screenshootnya :
Langsung saja ke tutorialnya yukk :
Tutorial Cara Membuat Scrollbar Dengan Persentase
saya anggap kalian sudah memasang custom scrollbar, bila belum memasang scrollbar bisa dibaca di artikel
Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog,
1. login ke Blogger
2. masuk ke template
3. klik edit HTML
4. lalu cari kode
]]></b:skin>, gunakan ctrl+f untuk mempercepat proses pencarian, jika sudah ketemu letakan kode dibawah ini tepat di atas kode
]]></b:skin>#scroll {
display: none;
position: fixed;
top: 0;
right: 15px;
z-index: 500;
padding: 3px 8px;
background-color: #2493C4;
font-size:13px;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
font-size:13px;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2493C4;
}
setelah itu, cari kode
<body> atau
<bodysetelah ketemu,tambahkan kode ini di bawahnya <body>
<div id='scroll'></div>
selanjutnya cari lagi kode
</body>, lalu letakan kode dibawah ini tepat di atas kode
</body> (gunakan tombol Ctrl+F untuk mempercepat pencarian)
<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>
5. yang terakhir simpan template, dan lihat hasilnya :D
Untuk Setting
untuk mengganti warna background, cari background-color:
#2493C4,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right:
15px; lalu ganti, untuk menggantinya kode 15px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color:
#fff; dan ganti kode warna
biru muda tersebut dengan kode warna yang kalian inginkan.
Sekian totorial kali ini dan semoga bermanfaat :D
sumber source : AH-SHARED
Artikel Keren Lainnya:
:v
BalasHapus:v
- Author AHS \ :v /
kan ada tuh postingan paling bawah sumber source : AH-SHARED :D
HapusKeren sob ..
BalasHapustpi ane mau yg jam yg punya sob itu gmna
baca nih : http://yoga-tc.blogspot.com/2013/06/cara-memasang-widget-jam-digital-di.html
Hapuskeren tuh,, tapi erorr
BalasHapusmantap kali ini tutornya :)
BalasHapus