Cara Membuat Efek Scrollbar Persentasi di Blog - Persentase scrollbar merupakan efek khusus pada scrollbar suatu situs blog, tidak sedikit blog atau website yang memakai Scrollbar persentasi, bertujuan agar pengunjung dapat mengetahui seberapa sejauh mereka ada pada suatu artikel atau halaman. Tidak hanya itu saja, ternyata tujuan lainnya merupakan untuk mempercantik blog.
Selain itu juga scrollbar persentasi ini akan menunjukan angka persentasi kepada pengunjung blog, efek ini akan dimulai dari 0% sampai 100%, dimana pada angka 100% menandakan bahwa anda telah berada pada halaman akhir suatu situs blog.
Bagaimana apakah anda tertarik, jika kalian tertarik untuk memasang scrollbar persentasi ini simak langkah-langkah dibawah ini :
2. Salin dan tempel kode CSS tepat di atas ]]></b:skin> atau </style> berikut kode yang disediakan di bawah ini.
3. Kemudian salin kode HTML dibawah ini tempel tepat dibawah kode <body> ( cari kode tersebut menggunakan CTRL-F )
4. Langkah terakhir salin kode dibawah ini, lalu kalian tempelkan tepat diatas tag </body>.
5. Jika sudah klik " Simpan Tema ".
Jika scrollbar persentasi sudah tampil pada blog kalian, itu berarti kalian sudah berhasil mengikuti cara di atas dengan benar. Jika scrollbar tersebut tidak muncul silahkan kalian ulangi cara diatas sampai berhasil.
Selain itu juga scrollbar persentasi ini akan menunjukan angka persentasi kepada pengunjung blog, efek ini akan dimulai dari 0% sampai 100%, dimana pada angka 100% menandakan bahwa anda telah berada pada halaman akhir suatu situs blog.
Bagaimana apakah anda tertarik, jika kalian tertarik untuk memasang scrollbar persentasi ini simak langkah-langkah dibawah ini :
Cara Membuat Scrollbar Persentase Di Blogger
1. Seperti biasa, masuk ke dashboard Blogger - >> Template - >> Edit HTML dan temukan kode ]]></b:skin> atau </style>2. Salin dan tempel kode CSS tepat di atas ]]></b:skin> atau </style> berikut kode yang disediakan di bawah ini.
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#36d1dc;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#36d1dc;
}Jika kalian ingin mengganti warnanya kalian bisa mengganti hex colornya sesuai dengan yang kalian inginkan.
3. Kemudian salin kode HTML dibawah ini tempel tepat dibawah kode <body> ( cari kode tersebut menggunakan CTRL-F )
<div id='scroll'></div>4. Langkah terakhir salin kode dibawah ini, lalu kalian tempelkan tepat diatas tag </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>5. Jika sudah klik " Simpan Tema ".
Jika scrollbar persentasi sudah tampil pada blog kalian, itu berarti kalian sudah berhasil mengikuti cara di atas dengan benar. Jika scrollbar tersebut tidak muncul silahkan kalian ulangi cara diatas sampai berhasil.
Post a Comment