 |
| Inilah Cara Membuat Persentase Pada Scrollbar Diblog Yang Valid HTML5 |
Deizuna Blog - Inilah Cara Membuat Persentase Pada Scrollbar Diblog Yang Valid HTML5 - selamat sore para blogger indonesia! Pada kesempatan kemarin saya sudah sempate berbagi tutorial tentang 2 Cara Mudah Menghapus QuickEdit Diblogger. Dan pada kesempatan kali ini saya akan membahas alias berbagi tutorial tentang Bagaimana Cara Membuat Persentase Pada Scrollbar Diblog. Dengan memasang Persentase pada scrollbar akan membuat blog menjadi lebih menarik. Diluar sana banyak blogger yang membagikan tutorial ini namun tidak semuanya tidak valid html5 dan Css3. Namun disini saya akan membagikan tutorial Cara Membuat Persentase Pada Scrollbar Diblog Yang Valid HTML5. Bagaimana caranya? yuk kita simak berikut tutorialnya :
Inilah Cara Membuat Persentase Pada Scrollbar Diblog Yang Valid HTML5
- Pertama anda harus login dulu keakun blogger masing masing
- Klik Template kemudian => Edit HTML
- Cari Kode ]]></b:skin> atau </style> (gunakan CTRL+F untuk mempermudah)
- Dan simpan kode ini diatas kode tadi
/* Scroll Persentase */ #scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:royalblue;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}
- Kemudian cari kode <body> dan letakkan kode dibawah ini tepat bawahnya
<div id='scroll'/>
- Kemudian Cari Kode </body> dan letakkan kode dibawah ini tepat diatasnya
<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>
- Kemudian cari kode </head> dan pastekan kode ini diatasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Sekian Postingan saya mengenai Inilah Cara Membuat Persentase Pada Scrollbar Diblog Yang Valid HTML5 semoga dapat membantu anda :D
Subscribe to:
Post Comments (Atom)
4 comments
kaya yang di blog agan ya gan , keren gan ane cobain di blog ane
silakan bro :D
Keren gan ! Izin praktek dulu :D
Boleh gan :D
Peraturan Komentar
√ Jangan berkomentar berbau SARA ( Suku, Agama, Ras, AntarGolongan ).
√ Berkomentar sesuai topik.
√ Komentar yang melanggar peraturan akan dihapus dan dianggap sebagai spam.
√ Anda boleh copy paste artikel tersebut, asalkan disertakan link artikel tersebut
√ Anda dapat berkomentar dengan link aktif asalkan, sebelumnya sudah melakukan perjanjian tukar link.