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

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

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

إضافة السكرول بار ( 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 اسفل هيدر المدونة"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

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

فتح رابط التوجية