EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

لتركيب هذه الخاصية لقالبك كل ما عليك فعله هو نسخ الكود التالي ووضعه قبل وسم ]]></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>

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

ليست هناك تعليقات:

إرسال تعليق

التالي السابق الرئيسية