Blogger'da Yüzdelik İlerleme Durumu Eklentisi

 Blogunuza okurlarınızın okudukları ve okuyacakları miktarı gösteren bir eklenti eklemek sizcede güzel olmaz mı?

 Bu yazımda vereceğim kodları sitenize ekledikten sonra okurlarınıza bu ayrıcalığı sunmuş olacaksınız.

 Tema > Html'yi Düzenle yolunu izleyerek blogumuzun şablon editör sayfasını açıyoruz.  

 Ardından ]]></b:skin> kodunu Ctrl+F yardımı ile aratıp üzerine aşşağıdaki kodu ekliyoruz.

#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; }

 Yine </head> kodunu aratıp aşşağıdaki kodu hemen altına ekliyoruz.

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

 </body> kodunuda aratıp üzerine aşşağıdaki kodu ekliyoruz.

<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>

 Her şey tamam temamızı kaydedip eklentiyi test edebiliriz. Eğer her hangi bir sıkıntı çıkarsa yorumlar bölümünden belirtiniz.