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

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 بالزر الأيمن للفأرة ونختار فحص.

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

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

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

في حالتنا الكود الذي يجب نسخه هو 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>  لتجنب الأخطاء ستصبح النتيجة بهذا الشكل.

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


ملاحظة 
يمكنك التعديل على أكواد CSS الخاصة بالكود ، فمثلا يجب التعديل على width: 315px في الكود التالي :

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

width: 315px هو عرض sidebar الخاص بقالب سيو بلس، أنت زد أو أنقص في القيمة حسب عرض قسم sidebar الخاص بقالبك.

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

هناك العديد من الفوائد لجعل الشريط الجانبي المنزلق في قوالب Blogger. فيما يلي بعض أهمها:

  1. تحسين تجربة المستخدم: يسمح الشريط الجانبي المنزلق للمستخدمين برؤية المحتوى الرئيسي للصفحة دون عوائق. هذا يجعل من السهل قراءة المقالات أو مشاهدة مقاطع الفيديو أو الاستماع إلى الموسيقى.
  2. زيادة التفاعل: يمكن أن يساعد الشريط الجانبي المنزلق في زيادة التفاعل مع موقعك أو مدونتك. على سبيل المثال، يمكنك استخدام الشريط الجانبي لتضمين أزرار المشاركة الاجتماعية أو الدعوات إلى اتخاذ إجراء.
  3. تحسين SEO: يمكن أن يساعد الشريط الجانبي المنزلق في تحسين محركات البحث لمدونتك. على سبيل المثال، يمكنك استخدام الشريط الجانبي لتضمين كلمات رئيسية وعلامات وصفية ذات صلة.
  4. يزيد من وضوح الإعلانات: يجعل الإعلانات أكثر وضوحًا في الأفق، مما قد يؤدي إلى زيادة معدلات النقر.

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

تعليقات