Cara Menciptakan Persentase Pada Scrollbar Blog - Gasskeun Cara Menciptakan Persentase Pada Scrollbar Blog | Gasskeun

Cara Menciptakan Persentase Pada Scrollbar Blog

Memasang persentase di scrollbar blog merupakan salah satu cara untuk mempercantik tampilan blog Anda, menciptakan persentase pada scrollbar blog akan terlihat lebih keren.

Dulu hal ini sangat banyak diminati dan dipakai oleh beberapa blogger, termasuk aku sendiri tapi dipakai di blog lain bukan yang ini.

Memasang widget persentase di blogger juga dapat membantu pengunjung mengetahui sejauh mana mereka ada pada halaman atau artikel yang sedang mereka baca.

Kaprikornus jikalau kalian memasang persentase ini di blog maka akan muncul berapa persen Anda berada di halaman tersebut, mulai dari 0% jikalau berada di paling atas sampai 100% jikalau berada di paling bawah.

Bagi Anda yang mempunyai artikel atau postingan panjang atau yang punya banyak komentar di blognya dapat memakai widget persentase ini.

Selain itu untuk memudahkan pengunjung melihat bab atas artikel dan bab bawah artikel dapat dengan memasang tombol go up dan go down di blog Anda.

Kaprikornus tidak perlu lagi melaksanakan scroll atau gulir ke atas dan ke bawah, hanya dengan menekan tombol go up atau go down maka akan secara otomatis berada di bab atas atau di bab bawah, tentu cara ini akan lebih praktis.

Atau jikalau Anda hanya ingin meloncat ke bab atas, maka dapat memakai tombol back to top.

Kode CSS untuk menciptakan persentase scrollbar ini sudah di meningkatkan secara optimal dan valid CSS3.

Bagi Anda yang tertarik untuk menciptakan persentasi pada scrollbar blog, silahkan ikuti langkah-langkahnya di bawah ini.

Memasang persentase di scrollbar blog merupakan salah satu cara untuk mempercantik tampila Cara Membuat Persentase Pada Scrollbar Blog

Cara Memasang Persentase Pada Scrollbar Blog

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Simpan arahan css ini di atas arahan ]]></b:skin> atau </style>

/* Scrollbar 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 }

4. Kemudian simpan arahan ini di atas arahan <body>

<div id='scroll'/>

5. Lalu tambahkan arahan ini di atas arahan </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>

6. Klik Simpan tema

Itulah artikel mengenai cara menciptakan persentase pada scrollbar blog. Semoga bermanfaat.
Sumber https://www.caramanual.com/

Related Posts