Cara Memasang Progress Scrollbar Keren Di Blog
Cara memasang Progress Scrollbar Keren di Blog - Tutorial kali ini aku akan membagikan cara menciptakan progress scrollbar atau biasa juga disebut animasi proses scrollbal di atas halaman atau postingan blog.
Progress Scrollbar yakni sebuah garis berwarna di atas postingan blog yang menawarkan petunjuk pada pembaca hingga dimana artikel ini berakhir. Progress Scrollbar ini berbentuk sebuah garis horizontal berwarna di atas postingan blog atau berbentuk menyerupai loading, ketika blog di scroll ke bawah garis tersebut akan bergerak ke arah kanan atau ketika kita scroll ke atas maka garis tersebut akan bergerak ke arah kiri.
Sebenarnya disetiap browser yang kita miliki sudah memiliki Progress kafe di samping kanan layar anda, namun Progress kafe yang satu ini berfungsi untuk memperindah blog kita, alasannya berbentuk horizon dan berwarna lebih menarik, sehingga para pembaca tidak merasa bosan lihat blog atau website kita.
Perlu diketahui walaupun mempercantik tampilan blog, progress scrollbar ini memakai JavaScript sehingga akan menambahkan sedikit beban pada loading atau proses memuat blog anda. Namun jikalau anda tertarik memasangnya di blog anda, silahkan ikuti tutorial berikut.
2. Tambahkan instruksi ini sebelum atau sempurna berada di atas </body>
atau <!--</body>--></body>
3. Selanjutnya tambahkan instruksi ini sempurna berada di bawah <body>
atau </head><!--<head/>-->
4. Lanjut, Tambahkan instruksi ini sempurna berada si atas </head> atau </head><!--<head/>-->
5. Terakhir, jikalau sudah selanjutnya pilih Simpan Tema
Untuk melihat balasannya dapat di cek di bawah ini
Untuk yang bercetak tebal merah anda dapat memodifikasinya sesuai dengan impian anda sendiri, berikut keterngannya:
Sekian dari aku tutorial dari aku perihal Cara Memasang Progress Scrollbar Keren di blog, semoga tutorial ini sangat menawarkan manfaat bagi anda. Jika ada sesuatu yang kurang terperinci dapat pribadi ditanyakan di kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/
Progress Scrollbar yakni sebuah garis berwarna di atas postingan blog yang menawarkan petunjuk pada pembaca hingga dimana artikel ini berakhir. Progress Scrollbar ini berbentuk sebuah garis horizontal berwarna di atas postingan blog atau berbentuk menyerupai loading, ketika blog di scroll ke bawah garis tersebut akan bergerak ke arah kanan atau ketika kita scroll ke atas maka garis tersebut akan bergerak ke arah kiri.
Sebenarnya disetiap browser yang kita miliki sudah memiliki Progress kafe di samping kanan layar anda, namun Progress kafe yang satu ini berfungsi untuk memperindah blog kita, alasannya berbentuk horizon dan berwarna lebih menarik, sehingga para pembaca tidak merasa bosan lihat blog atau website kita.
Perlu diketahui walaupun mempercantik tampilan blog, progress scrollbar ini memakai JavaScript sehingga akan menambahkan sedikit beban pada loading atau proses memuat blog anda. Namun jikalau anda tertarik memasangnya di blog anda, silahkan ikuti tutorial berikut.
Cara Praktis Memasang Progress Crollbar Keren di Blog
1. Masuk ke blog anda > Pilih sajian Tema > pilih Edit HTML2. Tambahkan instruksi ini sebelum atau sempurna berada di atas </body>
atau <!--</body>--></body>
<script type='text/javascript'> //<![CDATA[ // scrollbar-top Scrollbar $(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("scrollbar-top")){(r=$("scrollbar-top")).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=$(".scrollbar"),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>3. Selanjutnya tambahkan instruksi ini sempurna berada di bawah <body>
atau </head><!--<head/>-->
<scrollbar-top value='0' max='1'> <div class='scrollbar-color'> <span class='scrollbar'></span> </div> </scrollbar-top>4. Lanjut, Tambahkan instruksi ini sempurna berada si atas </head> atau </head><!--<head/>-->
<style type='text/css'> /* scrollbar-top Scrollbar */ scrollbar-top{position:fixed;left:0;top:0;width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#2fc8b4;z-index:1000} scrollbar-top::-webkit-scrollbar{background-color:transparent;z-index:10} scrollbar-top::-webkit-scrollbar-top-value{background-color:#2fc8b4;z-index:10} scrollbar-top::-moz-scrollbar{background-color:#2fc8b4;z-index:10} .scrollbar-color{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10} .scrollbar{background-color:#2fc8b4;width:0%;display:block;height:inherit;z-index:10} </style>5. Terakhir, jikalau sudah selanjutnya pilih Simpan Tema
Untuk melihat balasannya dapat di cek di bawah ini
Untuk yang bercetak tebal merah anda dapat memodifikasinya sesuai dengan impian anda sendiri, berikut keterngannya:
| Kode | Keterangan |
|---|---|
| top:0 | Kode tersebut supaya Progress Crollbal sempurna berada di atas, namun jikalau ingin meletakkan Progress Scrollbar di bawah postingan blog dapat menggantinya dengan instruksi ini bottom:0 |
| #2fc8b4 | Bisa di ubah sesuai warna kesukaan anda, atau dapat menggantinya dengan gradient color |
| 4px | Digunakan untuk mengubah tebalnya garis pada Progress Scrollbar |
Sekian dari aku tutorial dari aku perihal Cara Memasang Progress Scrollbar Keren di blog, semoga tutorial ini sangat menawarkan manfaat bagi anda. Jika ada sesuatu yang kurang terperinci dapat pribadi ditanyakan di kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/