أخر التعليقات

اضافه نسبه مئويه فى شريط التمرير للبلوجر

اضافه نسبه مئويه فى شريط التمرير للبلوجر
السلام عليكم ورحمه الله وبركاته
فى الماضى لقد عرضت لكم طريقه عن كيف تغير اداه التنقل فى البلوجر وتغير لونها وهكذا . ولكن كنت تتسأل اذا كان يوجد اضافه لوضع نسبه مئويه ؟ الاجابه نعم . وما هى فائدتها ؟ الفائده التى تعود منها ليعرف الزائر كم المسافه التى قطعها فى المدونه أو ما المتبقى من الصفحه حتى يقرأها حتى لا يصاب بالملل . ففى هذا المقال سوف اعرض لكم كيف يتم وضع نسبه مثويه فى شريط التمرير الخاص بمدونتك البلوجر :] .

ننصحك بقراءه هذا الموضوع : تغير اداه التنقل فى المدونه بشكل جميل

ملحوظه : انت الان يمكنك معاينه الاداه من هنا حتى تتأكد ان الاداه تعمل معك عندما تصعد وتهبط

كيفيه تركيب الاضافه الى المدونه

1.  اذهب الى مدونتك ---> القالب --> تحرير القالب

2.  اضغط CTRL+ F فى المربع الذى به الاكواد

3.  ابحث عن هذا الكود ]]></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.  ثم ابحث عن هذا الكود </head> وتحته مباشرة ضع هذا الكود الذى بالاسفل


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

5.  ثم قم بالبحث عن هذا الكود ايضا  </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>

مبروك تم التركيب بنجاح احفظ قالبك وشاهد التغير
أتمنى ان يكون الموضوع عجبكم :] .

شاركه على جوجل بلس

عن Unknown

    تعليقات بلوجر
    تعليقات فيسبوك

1 التعليقات: