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

مرحبا بكم متتبعينا الأعزاء، سأقوم اليوم بإرشادكم الى كيفية إضافة مؤشر موضع القراءة في التدوينة او إضافة شريط التقدم بقراءة المقالة في بلوجر. للقيام بذلك ،على مدونات وورد بريس قم بتثبيت المكون الإضافي المسمىّ "Reading Position Indicator" وسيتم الأمر بسهولة ، ولكن بلوجر لا يدعم المكونات الإضافية ، ولكن يمكنك تثبيتها باستخدام بعض أكواد CSS و HTML.

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

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

طريقة إضافة الأكواد

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

4. الصق الكود التالي فوق/قبل علامة </head>

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

5. الآن ، أضف الكود أدناه أسفل علامة <body> مباشرة

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

6. أخيرًا ، أضف الكود أدناه فوق/قبل علامة </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>

7. الآن ، انقر فوق حفظ المظهر للانتهاء من العملية.

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

المحترف تك | دروس مصوّرة ، أخبار تقنيّة ، ويندوز ، أندرويد ، تطبيقات ، حماية والمزيد.

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

طريقة إضافة الأكواد

إرسال تعليق