‫اضافة النسبة المئوية بجانب شريط تمرير مدونتك‬

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

تعليقان1:12 ص, مرسلة بواسطة Hady store

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

♫ قبل أى شيء أريد أن أقول لك ♫

اذا كانت هذه أول زيارة لك لمدونة مدون >> فتفضل بالضغط هنا

♦ شاهد المعاينة الحية ♦

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير HTML

أولا : ابحث عن ]]></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;
}

◄ لتجعل النسبة المئوية على يمين المدونة غير كلمة left بـــ right

ثانيا : ابحث عن </head> وضع اسفله هذا الكود

ثالثا : ابحث عن </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>

ثم قم بحفظ القالب ومبروك عليك الاضافة

تعديل الرسالة…

صندوق التنبيهات أو للإعلان

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

تعليقان على { اضافة النسبة المئوية بجانب شريط تمرير مدونتك }

هل تريد التعليق على التدوينة ؟

من أنا

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

التسميات

الصفحات

أرشيف المدونة الإلكترونية

نص نشر المحتويات