recent
أخبار ساخنة

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

mostafa
الصفحة الرئيسية

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

How to add a progress bar by reading an article in Blogger

شرح طريقه إضافة مؤشر موضع القراءة في التدوينة او إضافة شريط التقدم بقراءة المقالة في بلوجر. 

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

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



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

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

ادخل الى لوحة التحكم بمدونتك على بلوجر
انتقل إلى قسم المظهر
انقر فوق تحرير HTML
ثم قم بالبحث عن الوسم التالي

 </head>
ثم ضع هذا الكود فوقه

<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#0000FF;}
</style>

ثم قم بالبحث عن الوسم
  

<body>

ثم ضع هذا الكود اسفله

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

ثم ابحث عن الوسم 

</body>

ثم ضع فوقه هذا الكود

<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>

انقر فوق حفظ المظهر للانتهاء من العملية. يمكن رؤية النتيجة عند فتح مدوناتكم إذا اتبعتم خطواتي بشكل صحيح
google-playkhamsatmostaqltradent