BLANTERTOKOSIDEv102
6217215329334371520

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



السلام عليكم ، مرحبًا بكم في TI9NIYA-AR . 
سيكون موضوعنا في هذا اليوم عن كيفية إضافة شريط تقدم القراءة لمدونات   بلوجر   .
 لا تقلق إنها مجرد عمليات بسيطة، لايوجد خطوات كثيرة أو معقدة ، فكل ماعليك هو إضافة بعض الأكواد للقالب الخاص بك.

تعطي أداة شريط تقدم القراءة موقعك أو مدونتك فكرة عن طول المقالة. وأيضا توفر هذه الأداة مدى تقدم الزوار في قراءة المنشور أو المقالة.

كيف تضيف شريط تقدم القراءة؟
سنضيف شريط تقدم القراءة في ثلاث خطوات بسيطة وكل هذه لا تتطلب أي خبرة مسبقة.

  الخطوة الأولى إضافة كود css :

ابحث عن الكود ]]></ b: skin> والصق كودCSS التالي فوقه مباشرة.


.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}

.progress-bar{height:5px;background:#ff000;}

إذا كنت ترغب في تغيير لون شريط التقدم غير الرمز: background:#ff0000. 
ولتغيير حجم شريط التقدم ابحث عن الكود: height:3px;


  الخطوة الثانية إضافة كود JAVASCRIPT :

ابحث عن الوسم </body> وألصق كود JavaScript التالي فوقه مباشرة.

  <script>

window.onscroll = function() {

    myFunction()

};

function myFunction(){

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    var scrolled = (winScroll / height) * 100;

    document.getElementById("myBar").style.width = scrolled + "%";

}

</script>

  الخطوة التالثة إضافة كود HTML :

الآن ابحث في الوسم <body> وهذه المرة ألصق كود HTML أسفله مباشرة.

  
  <div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>

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