كيفية إضافة شريط تقدم القراءة على بلوجر -->
الرئيسية إضافات كيفية إضافة شريط تقدم القراءة على بلوجر

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

:
:
    مرحبًا اليوم توصلت إلى تقنية التصميم الرائعة لجذب انتباه المستخدم إلى تصميم UX للصفحة ، نعم سأقوم اليوم بشرح كيفية إضافة مؤشر موضع القراءة (RPI) ، يمكنك إضافته بسهولة على Wordpress عن طريق تثبيت برنامج Reading Position Indicator Plugin ، لكنكم تعلمون جميعًا أنه لا يمكننا إضافة مكونات إضافية في blogger ، ولكن يمكنك إضافتها بسهولة باستخدام بعض CSS و HTML و javascript.
    كيفية إضافة شريط تقدم القراءة على بلوجر
    لقد رأيت عددًا قليلاً من صفحات الويب التي تحتوي على نوع من المؤشر لعرض موضع القراءة الحالي. عادةً ما يتم استخدام مؤشرات موضع القراءة هذه في منشورات المدونة أو المقالات الطويلة وتساعد المستخدمين على فهم مدى بعدهم عن الانتهاء من القراءة ولكن قد تجد أيضًا تطبيق Chrome لنظام Android في شريط تحميل النموذج (ومتصفح Apple Safari ، شريط تحميل مشابه جدًا المظهر)
    سنرى في هذا المقال كيفية إضافة شريط تقدم القراءة على بلوجر ، لذا اقرأ المنشور بعناية واتبع جميع الخطوات بدقة حتى لا تواجه أي أخطاء.

    1. تسجيل الدخول إلى حساب Blogger الخاص بك
    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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
    }
    </script>

    7. الآن انقر فوق حفظ المظهر.

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

    آخر المشاركات

    تعليقات : 0

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

    إرسال تعليق