Cara Membuat Persentase Pada Scrollbar Blog
Cara Membuat Persentase Pada Scrollbar Blog - Memasang atau menambahkan persentase pada scroll blog memang membuat blog lebih menarik, oleh karena itu Anda bisa menggunakan cara ini untuk mempercantik tampilan blog Anda. Scrollbar yang saya buat pada blog ini banyak sekali variasinya, pada setiap Template Blog memang tidak semuanya menggunakan tampilan persen ini pada scroll blog tersebut karena ini tidak terlalu penting dalam sebuah SEO dan tidak akan mempengaruhi kualitas blog Anda, hanya akan mempercantik tampilannya saja, tadi apa boleh buat tidak ada salahnya untuk mencoba tutorial membuat persentase paba scroll blog ini. Banyak sekali yang share mengenai cara membuat persentase pada scrollbar blog, namun semuanya hampir sama dan itu tidak valid html5 dan juga css level 3. Dengan begitu saya merubah beberapa kode agar menjadi Valid HTML5 dan Valid CSS3, dengan begitu Anda tidak usah ragu menambahkan kode script yang saya bagikan untuk Anda karena script ini sudah saya coba dan tidak menampilkan error html5 dan css3. Oke langsung saja ke tutorial Cara Membuat Persentase Pada Scrollbar Blog, silahkan lihat dibawah ini :
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode script dibawah ini, lalu Paste diatas kode ]]></b:skin>
/* SCROLL PERSENTASE */
#scroll {
display: none;
position: fixed;
top: 0;
right: 5px;
z-index: 500;
padding: 3px 8px;
background-color: #4B4B4B;
color: #FFF;
border-radius: 3px;
}
#scroll:after {
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #4B4B4B;
}
- Kode yang berwarna Biru : Jarak dari scrollbar, semakin besar angka yang diberikan maka akan semakin jauh letaknya.
- Kode yang berwarna Orange : Merupakan tinggi dan lebarnya kotak persen
- Kode yang berwarna Merah : Warna background kotak persen
- Koda yang berwarna Kuning : Warna huruf pada kotak persen
- Kode yang berwarna Hijau : Memberikan efek melengkung pada kotak persen
Untuk mengganti warna silahkan kunjungi ini Kode Warna HTML
5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>
<div id='scroll'/>
8. Copy kode dibawah ini, lalu Paste diatas 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>
10. Copy javascript berikut, lalu Paste diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Catatan :
Jika blog Anda sudah memiliki JavaScript seperti diatas, Anda tidak perlu memasangnya lagi. Tetapi untuk jaga-jaga lebih baik memasangnya saja.
+copy.png)
+copy.png)
0 komentar:
Posting Komentar