أضافة شريط التمرير Scrollbar اسفل هيدر المدونة

شرح طريقة اضافة شريط التمرير scrollbars في هيدر مدونة بلوجر.
الرجاء الانتظار 0 ثانية...
قم بالتمرير لأسفل وانقر فوق فتح الرابط للتوجيه
تم فحص وتجهيز الرابط

نقدم لكم اليوم شرح طريقة اضافة شريط التمرير اسفل الهيدر في قالب Plus UI، بطريقة سهلة حتى تضع لمسة سحرية وجمالية على مدونة بلوجر الخاصة بك، فهي من الاضافات الجميلة.

شريط التمرير Scrollbar بلوجر

شريط التمرير اسفل الهيدر

إضافة السكرول بار ( scrollbars ) في قالب Plus UI بشكل جذاب التي يمكنك استخدامها أيضاً في قالب Median UI, iMagz. Fletro pro بلوجر بطريقة احترافية تماماً ، فهي عبارة عن مجموعة من اكواد css التي تضعها اسفل الهايدر موقعك من اجل تغيير شكل شريط التمرير لشكل احترافي بسهولة.

طريقه تركيب شريط التمرير.

خطوات تركيب شريط التمرير scrollbars إلى مدونة بلوجر.

  1. اولا توجه الى الصفحه الرئيسيه Blogger.
  2. بعد اذهب الى القالب » تحرير HTML.
  3. قم بالبحث عن وسم </header> واضاف الكود التالي قبله مباشر.
<div class="addons section" id="progress-bar">
    <div class="widget HTML" data-version="2" id="HTML24">
        <div class="pRs">
            <div class="pBar pSt pAn" id="Progress-bar" />
        </div>
    </div>
</div>

الان ناتي لاضافه اكواد CSS الخاصة بشريط التمرير، هذا الاكواد هي المسؤوله عن التحكم في الابعاد والألوان.

  • الان قم بالبحث مجددا عن الوسم ]]></b:skin> وضيف الكواد التالي قبل منه.
.pRs{border:1px solid var(--darkBa);background:var(--darkBs)}.pRs{border:.1px solid var(--contentL);top:0;left:0;z-index:999;height:6px;display:-webkit-box;display:-ms-flexbox;display:flex;background:#e9ecef}.pBar{top:0;left:0;z-index:2;border-radius:.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content;transition:width .6s ease}.pSt{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:50px 50px}.drK .bar {background: var(--darkU);}

واخيرا ناتي إضافة كود جافا سكريبت لشريط التمرير بلوجر

  • ابحث عن وسم الإغلاق </body> وضيف الكود التالي فوقه، واحفظ العمل
<script type='text/javascript'>//<![CDATA[
window.addEventListener("scroll", function (e) {
    var s = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    var body = document.body;
    var html = document.documentElement;
    var d = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    var c = window.innerHeight;
    var position = (s / (d - c)) * 100;
    document.getElementById("Progress-bar").setAttribute("style", "width: " + position + "%");
});
//]]></script>

شاركنا معكم كيفيه اضافه شريط تمرير اسفل راس المدونه في قالب Plus UI، Fletro pro، iMagz و قالب Mediain. ليعطي مظهر احترافي للمدونة الخاصة بك. اذا وجهتك اي مشكله لا تتردد في التواصل معنا او كتابه مشكلتك في التعليقات.

ينتهي هنا موضوعنا عن "أضافة شريط التمرير Scrollbar اسفل هيدر المدونة"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

تقييم المقالة

عن الكاتب

عبدالحميد ميدو منشئ محتوى رقمي ومهتم بجديد التقنية بشكل عام والبرمجة JS ,CSS بشكل خاص
معلومات أكثر

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - لإضافة كود برمجي حوله أولاً بمحول الأكواد
4 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام
ملفات تعريف الارتباط
نحن نستخدم ملفات تعريف الارتباط ( كوكيز ) لفهم كيفية استخدامك لموقعنا ولتحسين تجربتك في المحتوى والإعلانات..
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.