Membuat nilai persentase di scrollbar blog

Satality32 - ./ halow om , ketemu lg sama saya om kali ini saya ingin berbagi ke om tentang

saya akan menjelaskan bahwa bagaimana Anda dapat menambahkan / menampilkan nilai persentase untuk scrollbar di blog blogger. sebenarnya tidak penting untuk blog Anda, tapi ini adalah bagi mereka yang ingin memberikan efek yang unik untuk scroll-bar di blog mereka. mungkin bermanfaat bagi pembaca Anda untuk memeriksa bahwa berapa banyak mereka telah menggulir ke bawah atau ke atas atau berapa banyak konten tersisa untuk dibaca.

Demo :

Cara untuk menambah nilai persentase scrollbar di blogger?

1. Pergi ke blogger -> Tempalte -> Edit HTML

2. CTRL + F untuk menemukan ini:]]> </ b: skin>

3. Copy dan paste kode di bawah ini tepat di atas ini:]]> </ b: skin>

#scroll { display: none; position: fixed; top: 0; right: 20px; z-index: 500; padding: 3px 8px; background-color: #2187e7; color: #fff; border-radius: 3px; } #scroll:after { content: ” ”; position: absolute; top: 50%; right: -8px; height: 0; width: 0; margin-top: -4px; border: 4px solid transparent; border-left-color: #2187e7; }

4. Pencarian berikutnya untuk </ head>
5. Copy dan paste kode berikut tepat setelah </ head>

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

Pastikan Anda menyisipkan kode setelah </ head> dan sebelum <body> seperti ini:

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

6. Sekarang, lagi cari </ body>
7. Copy dan paste kode di bawah ini tepat di atas </ 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>

8. Simpan template.

Sangat Mudah bukan ???
* jangan lupa di BackUp dulu XML blognya om untuk jaga"

Jika artikel ini di copy paste tolong di kasih sumber http://satality32.blogspot.com jika tidak kami akan bertindak tegas , terimakasih