كيفية جعل sidebar منزلق في قوالب بلوجر

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

في هذا المقال، سنشرح لك كيفية جعل sidebar منزلق في قوالب بلوجر. بإستخدام كود بسيط يسهل إستخدامه.

ماهو الشريط الجانبي المنزلق ( sticky sidebar ) في قوالب بلوجر

يُعتبر الشريط الجانبي الثابت في بلوغر أحد العناصر التي يُمكن إضافتها لتحسين مظهر ووظائف المدونة. ويظهر على جانب الصفحة بجوار المحتوى الرئيسي. يمكن استخدامه لعرض المعلومات الهامة والروابط السريعة والإعلانات أو أي نوع آخر من المحتوى الذي ترغب في عرضه بصورة متكررة ومستمرة للزوار.

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

كيفية جعل sidebar منزلق في قوالب بلوجر

في القسم التالي سوف نتعلم كيفية جعل sidebar منزلق بحيث عند النزول بالموقع يقوم قسم sidebar بتتبعك.وبالتالي الإستفادة من الموقع بكفاءة أكثر.

من أجل تثبيت sidebar في قوالب بلوجر يكفي إتباع الخطوات التالية:

1. إفتح موقع بلوجر https://www.blogger.com.

2. توجه لموقعك ، ثم المظهر ثم تعديل HTML.

3. إبحث عن </body> داخل مجموعة الأكواد.

4. قم بلصق الكود التالي أعلى </body> وقم بالحفظ.

<script type='text/javascript'>//<![CDATA[  

document.addEventListener("DOMContentLoaded", function() {
  if (document.getElementById('sticky-sidebar')) {
    var el = document.getElementById('sticky-sidebar');
    var stickyTop = el.offsetTop;
    var stickyHeight = el.offsetHeight;
    window.addEventListener("scroll", function() {
      var limit = document.querySelector('.sticky-stopper').offsetTop - stickyHeight - 20;
      var windowTop = window.pageYOffset || document.documentElement.scrollTop;
      if (stickyTop < windowTop) {
        el.style.position = 'fixed';
        el.style.top = '20px';
      } else {
        el.style.position = 'static';
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.style.top = diff + 'px';
      }
    });
  }
});

// Back to top button
(function() {
  document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("scroll", function() {
      if (window.pageYOffset > 600) {
        document.getElementById("back-to-top").classList.add("show");
      } else {
        document.getElementById("back-to-top").classList.remove("show");
      }
    });
    document.getElementById("back-to-top").addEventListener("click", function() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    });
  });
})();
   //]]>
</script>

5. إبحث عن <footer> وقم بلصق الكود التالي فوقه.

<div class='sticky-stopper'/>

7. إبحث عن </b:skin> وأضف الكود التالي فوقه

@media only screen and (max-width: 860px) {
  #sticky-sidebar {
    position: static !important;
    top: auto !important;
    width: auto !important;
  }
}

يقوم الكود التالي بجعل خصائص تثبيت قسم sidebar متوقفة عند حجم عرض شاشة 860px، وهذا مفيد لإيقاف تثبيت قسم sidebar في أجهزة الهاتف. فإن لم تقم بإيقاف تثبيت sidebar في الهاتف فسيعيق تجربة المستخدم.

6. افتح الموقع وضغط على قسم sidebar بالزر الأيمن للفأرة ونختار فحص.

7. الأن ستنبثق قائمة بالأكواد ، قم بالنقر على الأكواد التي بالأعلى واحدة بواحدة حتى يصبح الشريط باللون الأصفر. بهاته الطريقة ( شاهد الصورة الثالثة ) .

في حالتنا الكود الذي يجب نسخه هو id='sidepar-wid'  وهو الكود الخاص بقالب سيو بلس. أنت إذا كنت تستخدم قالب أخر عليك إتباع الخطوة 7.

8. بعد نسخ الكود المستخرج ابحث عنه داخل أكواد HTML لقالبك، ثم قم بلصق الكود التالي تحته مباشرة.

<div id='sticky-sidebar' style='position: static; top: 20px;width: 315px;'>

9. أضف وسم الغلق </div> للكود السابق بعد <b:section id='sidepar'></b:section>  لتجنب الأخطاء ستصبح النتيجة بهذا الشكل.