تثبيت شريط الأقسام العلوى أو الإضافات على مدونة بلوجر

السلام عليكم احبابي زوار مدونة تقني ويب.

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

حيث عندما يقوم اي زائر فى مدونتك بالنزول الى اسفل مدونتك ستبقى الاضافات التى قمت بثتبيتها ظاهرة على صفحة المدونة او المتصفح.

طبعا الطريقة سهلة جدا فقط عليك باضافة كود CSS  واخر  JAVA SCRIPT  و القيام ببعض التعديلات...

مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر.
2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

.sticky { position: fixed; top: 10px; z-index: 100; }

5. ابحث عن الوسم </body> و اضف الكود التالي قبله مباشرة:

<script type='text/javascript'>
$(document).ready(function() {
  var stickyWidgetTop = $('add id or class').offset().top;
  var stickyWidget = function() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > stickyWidgetTop) {
      $('add id or class').addClass('sticky');
    } else {
      $('add id or class').removeClass('sticky');
    }
  };
  stickyWidget();
  $(window).scroll(function() {
    stickyWidget();
  });
});
</script>

ملاحظـــة:

• لاتنسى تغيير add id or class باسم ID او CLASS الخاص بالعنصر الذي تريد تثبيثه.

يمكنك تطبيق كل ما شرحناه سالفا، لكن لو أردت بعض التعديلات في الكود الخاص بــ JAVASCRIPT، بحيث تستغني عن وضع الكود CSS بعيدا عن الكود الأخير فـــإليك طريقة عمل ذلك :

1. قم بجذف كل الأكواد التي وضعنـــاها سابقا، ثم ابحث عن الوسم </body> و اضف الكود التالي فوقه :

<script type='text/javascript'>
$(document).ready(function() {
    var stickyWidgetTop = $('#nav').offset().top;
    var stickyWidget= function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > stickyWidgetTop) {
        $('#nav').css({
          'position': 'fixed',
          'top': 0,
          'z-index': 9999
        });
      } else {
        $('#nav').css({
          'position': 'relative',
          'width': '100%'
        });
      }
    };
    stickyWidget();
    $(window).scroll(function() {
      stickyWidget();
    });
  })
</script>

ملاحظـــة:

• كما تلاحض في الكود الأخير قمنا أيضا بتغيير add id or class بــ #nav
• غير مابلون الأخضر إلى الايدي (id) الخاص بقائمة مدونتك، لتسهيل عليك الامر ابحث عن (الرئيسية) او أي قسم من اقسام القائمة وستجد الأيدي فوقها، مثــال توضيحي :

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!