Banyak cara yang bisa dilakukan untuk membuat tampilan blog, ada yang menggunakan manipulasi loading blog, ada yang menggunakan cara Mengganti font blog, penambahan animasi jam digital. Dan lain sebagainya.
Tapi kali ini ada gaya lain yang bisa kalian pakai untuk mempercantik tampilan halaman blog kalian dengan Menambahkan nominal persentase Scrollbar Blog. Seperti apa tampilan yang akan terjadi dengan cara ini ?
Silahkan kalian scroll halaman blog saya ini ke atas dan kebawah. Maka akan muncul percentage value scrollbar berwarna biru du sebelah kiri scrollbar. Atau bisa lihat demo nya di sini.
Apakah kalian tertarik untuk memasangnya di blog kalian masing-masing.
Jika iya, perhatikan langkah-langkahnya di bawah ini.
1. Pada halaman Edit HTML blog kalian, silahkan cari kode ]]></b:skin> dengan bantuan CTRL+F untuk mempermudah pencarian tentunya.
2. Copas script CSS di bawah ini dan letakkan tepat sebelum kode di atas :
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
3. Cari kode </head> dan letakkan script di bawah ini tepat di bawah kode tersebut atau bisa meletakkanya di atas kode <body> :
<div id='scroll'></div>
4. Selanjutnya cari kode </body> dan silahkan copas saja script di bawah ini setelah kode tersebut :
<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. Simpan dan lihat hasilnya di blog kalian masing-masing.
Semoga bermanfaat dan selamat mencoba ya bro.
Source : http://www.mybloggerlab.com/2013/08/how-to-add-percentage-value-to-scrollbar-in-blogger.html
Cara Menambahkan Percentage Value Scrollbar di Blogger
Reviewed by Muhammad Ibnu Idris
on
16:49
Rating:
Reviewed by Muhammad Ibnu Idris
on
16:49
Rating:
This comment has been removed by the author.
ReplyDeleteartikel yang bermanfaat... salam kenal gan..
ReplyDeleteOke gan. Salam kenal juga :D
DeletePatut dicoba gan,,,
ReplyDeleteThanks,,,
Ga usah dicantumin sourcenya gan... MyBloggerLab aja copas.. nih aslinya :
ReplyDeletehttp://www.bloggertut.com/2013/06/membuat-persentase-pada-scrollbar.html
begitu muncul saya komen.. eh sampe sekarang komen saya ga di terbitkan LOL
kalo ga percaya coba cari dengan kata kunci potongan script ini :
Deletedistance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
Ya sih nggak apa2 lah mas. Menghormati sumber aja. Nah kebetulan baru dapet info dari mas bro ini.
DeleteSo, thanks udah ngasih link sumbernya kang mas. :D
ini untuk blogspot yah, akalu di terapkan di wordpress kira2 gimana yah caranya mas
ReplyDelete