إضافة النسبة المئوية في شريط التمرير في بلوجر
مقالآت حصرية

جاري التحميل ...

الأحد، 28 يناير 2018

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

أهلاً وسهلاً بكم مجدداً زوار مدونة عدن ويب الأعزاء، اليوم في هذة التدوينة سوف أشارك معكم طريقة إضافة النسبة المئوية لشريط التمرير الخاص بمدونات بلوجر أو أي موقع مكتوب بلغة HTML.

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

تركيب الإضافة


هذة الأضافة بسيطة من ناحية التركيب ولا تحتاج تعقيد في شرحها، فقط كل ما عليك أن تتبع 3 خطوات بسيطة لتركيبها .

- قم بالتوجة إلى لوحة تحكم بلوجر .
- إضغط على خيار المظهر من القائمة اليمنى .
- إضغط على تحرير HTML .
- قم بنسخ محتوى القالب كنسخة إحتياطية في حالة حدوث مشكلة .


 الخطوة الأولى (css) :

قم بنسخ الكود التالي ولصقة فوق الوسم </head> .


<style>
#aden-web-scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:99999;
  padding:3px 8px;
  background-color:#254e71;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#aden-web-scroll:after {
  content: &quot; &quot;;
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#254e71;
}
</style>
 

الخطوة الثانية (html) :

قم بنسخ الكود التالي والصقة تحت الوسم <body>


<div id='aden-web-scroll'/>
 

الخطوة الثالثة (java script) :

قم بنسخ الكود التالي والصقة فوق الوسم </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 - $('#aden-web-scroll').height() / 2;
    $('#aden-web-scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#aden-web-scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>



إلى هنا تم شرح تركيب الأضافة بنجاح، أي استفسار اتركة في تعليق .

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



عن الكاتب :

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


التعليق بواسطة الفيسبوك




التعليق بواسطة بلوجر



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

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم

شارك التدوينة

إذا أعجبك الموضوع قم بمشاركته مع أصدقائك

بضغطة زر تدعمنا وتشارك الفائدة

تم النسخ