كلمة الفريق

في عصرنا يوجد مئات الآلاف من المدونين والمدونات، البعض يعمل بشغف وحب...، والآخر يعمل بشكل إنتاجي للكسب فقط !، أما نحن .. نحب ونعشق التدوين ونؤمن أننا سنقوم بإضافة كبيرة للمحتوى العربي ولو بشيئ بسيط، نتعلم بشكل مستمر ونشارككم بكل جديد...، نحاول المساعدة، نحب أصدقاءنا، نهتم بإستفساراتهم كما لو كانت ملكنا، فريقنا فريق واحد رغم أنه متكون من شخص واحد :) لكنه يعمل بجنون

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


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

مراحل تركيب الإضافة
  1. ادخل إلى لوحة تحكم المدونة في بلوجر.
  2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
  3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
  4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
  5. .sticky { position: fixed; top: 10px; z-index: 100; }
  6. ابحث عن الوسم </body> و اضف الكود التالي قبله مباشرة:
  7. <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> و اضف الكود التالي فوقه :
  2. <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) الخاص بقائمة مدونتك، لتسهيل عليك الامر ابحث عن (الرئيسية) او أي قسم من اقسام القائمة وستجد الأيدي فوقها، مثــال توضيحي :

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

هناك تعليق واحد:

يمكنك وضع تعليقك هنا

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