إضافة نسبة مئوية تخص شريط التمرير لمدونة بلوجر

إخواني الكرام كيف حالكم اتمنى أن تكونوا بألف خير

في هذه التدوينة إن شاء الله سأقدم لكم إضافة جميلة تخص شريط تمرير المتصفح

إضافة بسيطة لكن قد تعجب معضمكم صورة توضيحية

لتركيب هذه الخاصية لقالبك كل ما عليك فعله هو نسخ الكود التالي ووضعه قبل وسم ]]></b:skin>

        #scroll {

        display: none;

        position: fixed;

        top: 0;

        left: 20px;

        z-index: 500;

        padding: 3px 8px;

        background-color: #2187e7;

        color: #fff;

        border-radius: 3px;

        }

        #scroll:after {

        content: ” ”;

        position: absolute;

        top: 50%;

        left: -8px;

        height: 0;

        width: 0;

        margin-top: -4px;

        border: 4px solid transparent;

        border-left-color: #2187e7;

        }

ثم بعد ذالك إبحث عن وسم </head> ثم أسفله ضع هذا الكود

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

وآخر خطوة هي البحث عن وسم </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>

ثم قم بحفظ القالب وهنيئا لك لقد إنتهيت

هذا كل شيئ أتمنى ان تعجبكم الإضافة بالتوفيق للجميع

ودمتم في رعاية الله وحفظه