Latest News

Cara Membuat Persentase Pada Scrollbar - Memasang Persentasi Di Blog

Ingin menghias blog dengan tampilan yang keren dan menarik. Mungkin anda pernah melihat blog dengan scrollbar yang unik. Seperti adanya animasi di scrollbar,warna,dan ada juga persentase di scrollbar. Suka dengan design yang elegan maka pasang persentase di scroll kafe blog anda. Walaupun widget ini tidak terlalu penting.

Apa widget akan muncul di mobile? Widget persentase ini akan muncul kalau di mobile muncul scrollbar-nya. Jika tidak ada scroll bar-nya maka widget tampilan persentasi ini juga tidak akan muncul. Lalu apa fungsi widget persentase ini? Untuk membantu pengunjung mengetahui jarak dengan melihat persentase scrollbar-nya. 

Ingin

Meskipun dengan melihat scrollbar maka pengunjung mampu mengira-ira panjang artikel yang dibaca. Tapi dengan tampilan persentasi ini mungkin akan lebih menarik. Tertarik untuk memasang di blog anda? Yuk ikuti langkahnya dibawah ini ya.

Cara Memasang Widget Persentasi Scrollbar

Langkah 1
Silakan masuk ke blogger, pilih Template → Edit HTML

Langkah 2
Salin isyarat dibawah ini dan pastekan/letakkan diatas isyarat ]]></b:skin> atau </style>

#scroll {   display:none;   position:fixed;   top:0;   right:15px;   z-index:500;   padding:3px 8px;   background-color:#369fcf;   color:#fff;   border-radius:3px;   font-size:14px;   } #scroll:after {   content: " ";   position: absolute;   top:50%;   right:-10px;   height:0;   width:0;   margin-top:-6px;   border:6px solid transparent;   border-left-color:#369fcf; }

Langkah 3
Salin isyarat dibawah ini dan letakkan diatas isyarat </head>

<div id='scroll'></div>

Langkah 4
Cari isyarat </body> ,dan letakkan isyarat dibawah ini diatas isyarat </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(600);     if (scrollTimer !== null) {         clearTimeout(scrollTimer);     }     scrollTimer = setTimeout(function() {         $('#scroll').fadeOut(600);     }, 1000); }); //]]> </script>

Simpan template dan lihat hasil.

Silakan anda pribadi buka blog teman dan lihat hasilnya. Apa tampilan persentase di scrollbar blog anda sudah muncul atau belum. Pastikan anda mengikuti langkah dengan benar dan sukses. Cukup sekian artikel ini biar mampu membantu dan bermanfaat.