Membuat tampilan interaktif akan memberikan kemudahan dan kenyamanan pada pengunjung atau pembaca blog anda, salah satunya adalah dengan menambah kan fitur progress scrollbar pada blog. Mungkin banyak para pemilik situs blog yang belum memahami istilah progress scrollbar atau biasa juga disebut animasi proses scrollbar biasanya fitur tersebut berada disebelah kanan halaman postingan atau ada juga yang berada di atas postingan blog.
Sebenarnya default disetiap browser yang kita miliki sudah mempunyai Progress bar di samping kanan layar anda dan fitur tersebut bekerja secara vertical (Dari atas ke bawah dan sebaliknya). Namun untuk tutorial kali ini saya akan memberikan Progress bar yang bekerja secara horizontal (Dari kiri ke kanan dan sebaliknya) dan memiliki fitur berwarna yang lebih menarik, sehingga para pembaca tidak merasa bosan melihat tampilan blog atau website anda.
Progress Scrollbar adalah sebuah garis berwarna di atas postingan blog yang memberikan petunjuk pada pembaca sampai dimana artikel ini berakhir. Progress Scrollbar ini berbentuk sebuah garis horizontal berwarna di atas postingan blog dan berbentuk seperti loading.
Fitur tersebut dapat bekerja pada saat menggulir atau scroll halaman postingan blog ke bawah maka akan ada garis yang akan bergerak menuju ke arah kanan dan saat kita scroll ke atas maka garis tersebut akan bergerak menuju ke arah kiri. Untuk menampilkan progress scrollbar ini pada blog, anda hanya perlu menyisipkan JavaScript dan CSS. Jadi jika anda tertarik memasangnya silahkan ikuti tutorial berikut ini.
Cara Mudah Memasang Progress Scrollbar Horizontal Pada Blogger
1. Masuk ke blog anda > Pilih menu Tema > pilih Edit HTML
2. Tambahkan kode ini sebelum atau tepat berada di atas </body>
atau <!--</body>--></body>
3. Selanjutnya Tambahkan kode ini tepat berada di bawah <body>
atau </head><!--<head/>-->
4. Lanjut, Tambahkan kode ini tepat berada si atas </head> atau </head><!--<head/>-->
5. Terakhir, jika sudah selanjutnya pilih Simpan Tema
Untuk yang bercetak tebal merah anda bisa memodifikasinya sesuai dengan keinginan anda sendiri, berikut keterngannya:
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 kode ini tepat 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 kode ini tepat 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, jika sudah selanjutnya pilih Simpan Tema
Untuk yang bercetak tebal merah anda bisa memodifikasinya sesuai dengan keinginan anda sendiri, berikut keterngannya:
| Kode | Keterangan |
|---|---|
| top:0 | Kode tersebut agar Progress Crollbal tepat berada di atas, namun jika ingin meletakkan Progress Scrollbar di bawah postingan blog bisa menggantinya dengan kode ini bottom:0 |
| #2fc8b6 | Bisa di ubah sesuai warna kesukaan anda, atau bisa menggantinya dengan gradient color |
| 4px | Digunakan untuk mengubah tebalnya garis pada Progress Scrollbar |
Demikian Tutorial dari saya bagaimana Cara Mudah Memasang Progress Scrollbar Horizontal Pada Blogger. Bila anda kesulitan menerapkannya pada blog anda silahkan meninggalkan pesan pada kolom komentar dibawah. Semoga informasinya bermnafaat dan sampai jumpa pada tutorial selanjutnya.