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,
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 <body
setelah ketemu,tambahkan kode ini di bawahnya <body>
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.
setelah 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'>5. yang terakhir simpan template, dan lihat hasilnya :D
//<![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>
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
sumber source : AH-SHARED
Label:
Tips Trik,
Tutorial Blog
pada
6/26/2013
: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
keren tuh,, tapi erorr
BalasHapusoke ditunggu kunbalnya! http://ferdirahmadrizaldi.blogspot.com/
BalasHapus