Cara Membuat atau Memasang Scrollbar Persentase Pada Scroll Blog | Assalamualikum wr.wb hai sobat blogger yang sudah berkunjung dan melihat postingan saya apa kabar?? nah kali ini blog DANIELSPUTRA akan share nih buat kalian semua yaitu Cara Membuat atau Memasang Scrollbar Persentase Pada Scroll Blog.
Scrollbar Persentase merupakan suatu tampilan dimana pada saat kita menscroll bagian blog kebawah akan ada tampilan nomor atau persen seperti gambar diatas tersebut . dan juga jika kalian memasang tampilan persentase diblog anda masing masing anda juga bisa tahu berapakah jumlah yang anda scroll kebawah di blog tersebut .
Tetapi memasang scrollbar persentase ini sudah tidak asing lagi bagi kita semua dan hendaknya kita melakukan sesuatu yang baru , nah jika kalian menginginkan contoh atau DEMO pada persentase scrollbar anda bisa melihatnya dibawah ini .
Nah jika kalian menginginkan tutorial Cara Membuat atau Memasang Scrollbar Persentase Pada Scroll Blog anda bisa melihatnya dibawah berikut ini .
- Login di Blogger.com
- Masuk ke Dashboard > Template > Edit HTML
- Kemudian tekan CTRL + F secara bersamaan .
- Cari kode "]]></b:skin>"
- Jika sobat sudah menemukan kode diatas, sobat copy kode dibawah ini, kemudian taruh diatas kode tersebut kode yang diatas tuh sobat.
/*Script Scrollbar Persentase By http://www.danielsputra.blogspot.com/*/
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #555;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 8px solid transparent;
border-color:#555 transparent transparent #555;
}
- Kemudian cari kode </head> , jika sobat sudah menemukan kode tadi, taruh kode dibawah ini dibawah kode </head>
<div id='scroll'></div>
- Jika kalian sudah memasang kode jQuery terbaru maka tidak usah memasang lagi, nah jika kalian belum memasang kode jQuery terbaru anda bisa melihatnya dibawah ini .
/*Script Scrollbar Persentase By http://www.danielsputra.blogspot.com/*/
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
- Taruh kode diatas di atas kode </head> .
- Kemudian cari kode </body>, jika sobat sudah pasang javascript dibawah ini tepat diatas kode </body>.
/*Script Scrollbar Persentase By http://www.danielsputra.blogspot.com/*/
<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>
- Jika sudah kalian klik Simpan Template pada template kalian .
Source : https://danielsputra.blogspot.com/2015/05/cara-membuat-atau-memasang-scrollbar.html
0 komentar:
Posting Komentar