19 أكتوبر، 2014

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

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

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

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


طريقة التركيب

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

اهم الملاحظات حول الكود 


لتغيير لون الخلفية التي بالازرق استبدل #369FCF ستجد الكود مكرر اكثر من مرة استبدلها كلها
لتغيير حجم الخط استبدل font-size:14px استبدل بالرقم الذي يناسبك

المرحلة الثانية


الان ابحث عن الوسم </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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

عند اكمال هذه الخطوات سوف يتم تفعيل النسبة المئوية بجانب شريط التمرير 

في امان الله 
مواضيع ذات صلة
اضافة نسبة مئوية بجانب شريط التمرير في بلوجر
4 / 5
بواسطة

هناك 12 تعليقًا :

  1. الردود
    1. بالتوفيق يا غالي

      ومن الجيد انها اعجبتك

      شكرا لتعليقك =r

      حذف
  2. شكرا اخي تمت الاضافة , فعلا اداة ممتازة , بارك الله فيك

    ردحذف
    الردود
    1. الشكر لله يا غالي
      شاكر لمرورك
      انرت المدونة =r

      حذف
  3. لم تنجح معي b=
    وايضاً لم تنجح معي بعض الاضافات الاخري

    ردحذف
  4. اهلا اخي الاضافة تعمل و لكن قد تكون انت اضفت بعض الاكواد بشكل خاطيء
    او قد تكون من القالب عندك
    بالنسبة لبعض الإضافات الاخرى عن اي اضافات تقصد

    ردحذف
    الردود
    1. اعتقد اني قمت بادخال الاكواد بشكل صحيح لاني اعدت في ادخالهم اكثر من مرة ..
      واظن ان العيب من القالب ولكن هل يوجد حل غير تغيير الفالب ؟

      حذف
    2. إذا كانت الاكواد تم إدخالها بالشكل الصحيح
      فالعيب من القالب
      قد يكون هناك بعض الإضافات تتعارض مع الإضافات التي انت تقوم بتركيبها عندك
      او قد تكون انك لم تمسح الإضافات القديمة بالشكل صحيح و هذا قد يسبب مشاكل

      حذف
    3. لا اعلم يا اخي لان معظم الاضافات الموجودة عندي هي اضافات من التخطيط فلا اظن انها تعارض اضافات القالب ..
      وايضاً القالب اعتقد به مشاكل لاننا كمت باضافة انارة الصور عند المرور بها ولكن تمت ازالة بدلاً منها شريط التمرير فاظن ان القالب به مشاكل ..
      وشكراً علي ردك علي :)

      حذف
    4. اهلا اخي مصطفى قصدي بالإضافات
      يعني الاكواد داخل القالب
      مثلا انت رأيت اضافة اعجبتك في مدونتي
      لنفترض كانت المشاركات الشائعة
      و انت قمت بتركيب الإضافة
      ولكن لم تقم بمسح اكواد الإضافة السابقة
      هنا تحدث المشاكل هذا كان قصدي و ليس التخطيط
      و إذا كن به هذه المشاكل فأنصحك بتغييره
      و لا شكر على واجب =r

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r