يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

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

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

إرسال تعليق

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