14‏/06‏/2014

ستحصل مع هاته الإضافة على تأثير جميل لموقعك  بجوار شريط التمرير فى مدونات البلوجر وهي عبارة عن اضافة نسبة مئوية بجانب شريط التمرير
مع كل نزول أو صعود تظهر لمدة ثانية وتختفي
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <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>
3. ابحث عن <head/> وضع الكود التالي أسفله
<div id='scroll'></div>
4. الأن ننتقل لستايل ابحث عن <b:skin/><[[ ثم ضع الكود فوقه
#scroll {
  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;
}
ستحصل مع هاته الإضافة على تأثير جميل لموقعك  بجوار شريط التمرير فى مدونات البلوجر وهي عبارة عن اضافة نسبة مئوية بجانب شريط التمرير
مع كل نزول أو صعود تظهر لمدة ثانية وتختفي
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <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>
3. ابحث عن <head/> وضع الكود التالي أسفله
<div id='scroll'></div>
4. الأن ننتقل لستايل ابحث عن <b:skin/><[[ ثم ضع الكود فوقه
#scroll {
  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;
}
7 Blogger تعليقات
Disqus
7 التعليقات
المشرف
avatar

شكرا جزيلا لك أخي
صاحب مدونة عبدالله للمعلوميات
xasire.blogspot.com

المشرف
avatar

هناك خطأ المرجو تصحيحه
4. ابحث عن head/
5. ضع الكود التالي قبله [ فوقه ]
_________________________
ليس قبله بل بعده لأن div لا يوضع في head

المشرف
avatar

شكرا للملاحظة تم التصحيح

المشرف
avatar

لم اجد لا head ولا body ولا b skin

المشرف
avatar

حقاً؟ رابط مدونتك

المشرف
avatar

انا استخدم قالب الهام التدوين

المشرف
avatar

انا استخدم قالب الهام التدوين

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة