بعد رؤية التصويت لهذا الأسبوع كان القسم الحاصل علي أعلي نسبة تصويت هو "بلوجر" لذا اتيت إليك بهذه النسبة المئوية التي ستضيفها تكون مفيدة للغاية للزوار لمعرفة مدى الصفحة التي تمريره، أو كم تبقى المحتوى إلى أن تقرأ. في هذه المقالة، وسأشرح لك كيفية إضافة قيمة نسبة مئوية لشريط التمرير في المدونة.
ثم ابحث عن </head> وضع الكود بعدها مباشرةً.
أي بين </head> و <body>
والصق هذا الكود اسفل الكود السابق أي قبل <body>
والآن استمتع بالإضافة ولا تنس أن تخبرنا بتجربتك.
توجه إلي لوحة التحكم / قالب / إعدادات HTML
ابحث عن ]]></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;}
ثم ابحث عن </head> وضع الكود بعدها مباشرةً.
أي بين </head> و <body>
<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>
والآن استمتع بالإضافة ولا تنس أن تخبرنا بتجربتك.
بارك الله فيك أخي شكراً لك.
ردحذفالعفو أخي شكراً لتفاعلك معنا ^_^
ردحذف