Cara Membuat dan Memasang Persentase Pada Scrollbar Blog Yang Valid - Sebagian Blogger banyak yang memasang persentasepada Scrollbar blognya , hal itu berguna untuk mengukur berapa persen anda menggulang tampilan layout blog tersebut dalam bentuk persen .
Widget persentase ini cara pemasangannyan berbeda dengan tutorial blog lain , karena hasilnya nanti tidak ada error ketika anda cek di valdator html5 maupun css3 , sehingga dengan memasang widget ini blog anda akan tetap valid .
Adakah hubunganya memasang Persentase di Scrollbar Blog ? hembs , kalau di logika gak ada hununganya sama sekali anda memasang wisget persen itu maupun tidak memangnya , karena ini hanya untuk memodifikasi blog agar terlihat lebh cantik. Bagi anda yang penasaran seperti apakah the widget Persentase Scrollbar Blog ? silakan perhatikan gambar berikut
Berikut Cara Membuat Persentase Untuk Scrollbar Blog Yang Valid
1. Pertama silahkan sobat masuk ke Blogger.com
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}
Catatan :
- Kode 5px : Jarak dari scrollbar, semakin besar angka yang diberikan maka akan semakin jauh letaknya.
- Kode 3px 8px : Merupakan tinggi dan lebarnya kotak persen
- Kode yang berwarna #4B4B4B : Warna background kotak persen
- Koda yang berwarna #FFF : Warna huruf pada kotak persen
- Kode yang berwarna 3px : Memberikan efek melengkung pada kotak persen
5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>
<div id='scroll'/>
7. Cari kode </body>
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>
9. Cari kode </head>
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.
Nah itulah Cara Gampang Membuat Persentase Untuk Scrollbar Blog Yang Valid , semoga tutorial tersebut bermanfaat bagi anda . oh iya jika anda merasa kesulitan untuk memasang widget Persentase pada scrollbar blog anda , silahkan komentar di bawah
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Bahasaremajacom
Kalau saya malah jarang otak atik template mas biar tampilannya clear and clean spt website google
ReplyDeleteBetul mas . Saya mau berbagi untuk pemula yang suka otak-atik template nya . Hahaha
DeleteThanks atas informasinya.. Saya tampung dulu nehniknya bang, soalnya lagi ngedit-ngedit template.
ReplyDelete