اضافة النسبة المئوية بجانب شريط التمرير لمدونات بلوجر
اليوم وفى موضوع جديد وحصرى كالعادة من مدونة ابداعاتى أقدم لكم تأثير جميل جدا بجوار شريط التمرير فى مدونات البلوجر وهو عبارة عن اضافة النسبة المئوية بجانب شريط التمرير ، وهذا يضفى على المدونة بعض من الرونق والجمال ، وهذا الموضوع لم تتناوله المدونات العربية لذلك قررت تناول الموضوع بعين من الرعاية وقررت تقديمه لكم فى هذه التدوينة ، ولكى لا أطيل عليكم فهيا بنا للمعاينة والشرح
♫ قبل أى شيء أريد أن أقول لك ♫
اذا كانت هذه أول زيارة لك لمدونة ابداعاتى >> فتفضل بالضغط هنا
ثم اضغط متابعـــــــــــة
♦ شاهد المعاينة الحية ♦
شرح التركيب
اذهب للوحة التحكم >> القالب >> تحرير 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> وضع اسفله هذا الكود
<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>
ثم قم بحفظ القالب ومبروك عليك الاضافة
√ فى انتظار تعليقات مشجعة تدفعنى لتقديم المزيد لخدمتكم √
من فضلك اضغظ لايك لمشاهدة لينك التحميل
هام : هذا الموضوع ضمن تصنيفات المدونة
زووم العربية نشكرك للمتابعة . يمكنك نقل الموضوع من المدونة لكن بشرط يجب ذكر المصدر و ذكر رابط الموضوع الاصلي قبل نقل أي موضوع المرجوا زيارة صفحة الخصوصية تحت ترخيص DMCA Protection
إضافات بلوجر,
أكواد Css
راااائع
ردحذفانت الأروع بتعليقك المشجع
حذفموضوع راااائع واصل
ردحذفشكرا لمرورك اخى الفاضل
حذف