أضافة النسبة المئوية في شريط التمرير - عالم المدون

السبت، 4 يونيو، 2016

أضافة النسبة المئوية في شريط التمرير


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



شرح التركيب

1- قم باخذ نسخة اختياطية من قالب مدونتك قبل عمل اى شئ وتركيب اى شئ

2- قم بالبحث فى قالب مدونت عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقه - قبله 

#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#F74047;
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:#F74047;
}

3- قم بالبحث فى قالب مدونتك عن الوسم </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(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>


4- قم بالبحث عن الوسم <body> ثم قم بوضع الكود اسفل منه

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

5- قم بحفظ القالب ومبروك عليك الإضافة

وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

  • اضافة تعليق
  • 5 تعليق على موضوع : أضافة النسبة المئوية في شريط التمرير

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
    الأبتساماتأخفاء الأبتسامات

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر