كيفية تثبيت اداة فى سايدبار المدونة

كيفية تثبيت اداة فى سايدبار المدونة - اشارك معكم فى هذه التدوينة الانسب والاحدث عن كل المحتويات التى تتحدث عن تثبيت الادوات فى السايدبار، يرجى اتباع الخطوات التالية اذا كنت تريد تثبيت اداة فى الشريط الجانبى.

كيفية تثبيت اداة فى سايدبار المدونة

1. تسجل الدخول الى بلوجر > اذهب الى تحرير القالب > يرجى اضافة الكود التالى فوق </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // التغييرات"#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // التوقف قبل "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // المسافة او الهامش من فوق
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

استبدل المعرفات التالية بالمعرفات التى سيتم استخدامها فى عملية تثبيت الادوات فى السايدبار

#sticky-sidebar : معرف الاداة التى سيتم تثبيتها فى السايدبار
#footer-wrapper : معرف اداة التوقف عند مقابلة الفوتر

وبعدها قم بتخصيص عرض الاداة، لنفترض ان يكون العرض 300px، على ثبيل المثال :

#sticky-sidebar{width:100%;max-width:300px}

او

#HTML1{width:100%;max-width:300px}

بعد تحديد عرض وفقا لعرض القالب لا تنسى اكواد التجاوب

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

• معاينة الاضافة