Cara Membuat Progress Scrollbar di Blogger
Cara Membuat Progress Scrollbar di Blogger - Pada kesempatan kali ini, saya mau berbagi sedikit tips untuk mempercantik tampilan blog kalian. Widget kali ini, kita akan membuat progress scrollbar di blog, yang mana widget ini akan menampilkan progres ketika kita melakukan scroll pada halaman blog kita.
Widget Progress Scrollbar ini akan menampilkan garis horizontal diatas halaman blog kita, yang mana saat halaman blog kita di scroll widget ini akan memanjang mengikutinya scroll dari halaman blog kita. Widget Progress Scrollbar ini, saya dapatkan dari blog naminakiky.com
Baiklah langsung saja, bagi kamu yang penasaran dengan tampilan widget Progress Scrollbar ini, kamu bisa langsung melihat demo-nya disini.
Cara Membuat Progress Scrollbar di Blogger
Bagaimana, menarik bukan? Bagi kamu yang ingin memasang widget progress scrollbar ini blog, kalian bisa mengikuti langkah-langkahnya dibawah ini.
1. Masuk ke menu tema > edit html > lalu tambahkan kode dibawah ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>2. Lalu tambahkan kode berikut sebelum kode </head>
<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#f39c12;z-index:10}
progress::-moz-progress-bar{background-color:#f39c12;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#f39c12;width:0%;display:block;height:inherit;z-index:10}
</style>Edit pada bagian yang ditandai untuk mengganti warna, posisi dan tinggi dari Progress Scrollbar.
3. Kemudian tambahkan kode berikut dibawah kode <body>
<progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>4. Selesai, simpan tema.
Bagaimana, sangat mudahkan? Baiklah saya rasa itu saja yang bisa saya bagikan pada kesempatan kali ini. Bagi kamu yang masih memiliki masalah seputar artikel diatas, jangan sungkan ajukan pertanyaan kamu melalui kotak komentar dibawah ini.
Posting Komentar untuk "Cara Membuat Progress Scrollbar di Blogger"