اليوم سنتعلم كيفية إضافة شريط تقدم القراءة ، يمكنك بسهولة تثبيت هذه الاضافة على ووردبريس عن طريق استخدام المكون الاضافي Reading Position Indicator ، لكنكم تعلمون جميعًا أنه لا يمكننا إضافة مكونات إضافية في مدونات بلوجر، ولكن يمكنك تثبيتها بسهولة باستخدام بعض CSS و HTML.
لقد رأيت عددًا قليلاً من المدونات التي تحتوي على نوع من المؤشر شريط تقدم القراءة الحالي. عادةً ما يتم استخدام شريط تقدم القراءة هذه في منشورات المدونة أو المقالات الطويلة وتساعد المستخدمين على فهم مدى بعدهم عن الانتهاء من القراءة ولكن قد تجد أيضًا تطبيق Chrome لنظام Android في شريط تحميل النموذج (ومتصفح Apple Safari ، شريط تحميل مشابه جدًا المظهر)
سنرى في هذا المنشور كيفية إضافة شريط تقدم القراءة في مدونة بلوجر ، لذا اقرأ المنشور بعناية واتبع جميع الخطوات بدقة حتى لا تواجه أي أخطاء.
- تسجيل الدخول إلى حساب بلوجر الخاص بك
- انتقل إلى قسم المظهر > تعديل HTML
- الصق الكود أدناه أعلى علامة </head>
<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#0000FF;}
</style>4. أضف هذه الشفرة أسفل علامة <body> مباشرةً
<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div>5. اضف الكود التالي أعلى علامة </ 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>6. الآن انقر فوق حفظ القالب.
هذا كل شيء إذا كنت قد اتبعت خطواتي بشكل صحيح ، فسترى النتيجة عندما تفتح مقالة معينة على مدونتك.
هذا كل ما في هذا منشور إضافة شريط تقدم القراءة ، أتمنى أن تجده مفيدًا ، إذا واجهت أي مشكلة أثناء التثبيت ، فيرجى التعليق أدناه.
أحدث المقالات