هذه الإضافة ليس أساسية لمدونات بلوجر ولكن هى تزيد من جمال مدونتك وتجذب الزائر إلى التمرير لأسفل والصعود إلى أعلى حتى يشاهد الأضافة تزيد وتنقص.
وهذه الأضافة ليس إليك فقط أنما لزوار مدونتك حتى يعرفون كم النسبة المئوية الذى ترك فيها الموضوع ربما يعود إلى هذه النقطة مره أخرى ويتذكر فى اى نسبة مئوية ترك الموضوع وعند الوصول إلى نهاية الصفحة تظهر له الأداة أنها وصلت إلى 100%.
طريقة التطبيق والتثبيت فى غاية السهولة ، فقط تتبع الخطوات
نفتح blogger > قالب > تحرير HTML ونتتبع الخطوات القادمة
نقوم بوضع هذا الكود بعد/تحت <b:skin><![CDATA[
#scroll {نقوم بأضافة هذا الكود بعد/تحت <body>
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#369fcf;
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:#369fcf;
}
<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(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>
0 التعليقات:
إرسال تعليق
من الرائع ان تشاركنا تجربتك ورأيك، من فضلك لا تستخدم اي كلمات خارجة، روابط لا علاقة لها بالموضوع لانه سيتم حذفها فوراً. فالتعليقات خاضعة للإشراف، دعنا نجعل التعليقات ساحة لتبادل الخبرات والنقاش , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.