للبحـث بداخـل المدونــة . . .

شرح طريقة تثبيت القائمة الرئيسية لقوالب البلوجر

شرح طريقة تثبيت القائمة الرئيسية لقوالب البلوجر



شرح  تثبيت القائمة الرئيسية 

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


شرح التركيب





شرح تركيب الأكواد



نذهب الى المظهر و نضغط على Ctrl + F و نضع في مستطيل البحث ]]></b:skin> و نضغط على Enter
نضع الكود التالي فوقه



xxxxxxxxxx {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}


التعديلات


نقوم بتغير   xxxxxxxx   ب الايدي الخاص بشريط القائمة الرئيسية




نضع في مستطيل البحث  </body>  و نضغط على Enter
نضع الكود التالي فوقه



<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  //fixed secondary nav
  var secondaryHead = $('#menu'),
 secondaryHeadTopPosition = secondaryHead.offset().top;
  $(window).on('scroll', function(){
  if($(window).scrollTop() > secondaryHeadTopPosition ) {
   secondaryHead.addClass('f-nav').css({
         'position':'fixed',
         'width':'100%',
         'right':'0',
         'top':'0',
         'margin':'0',
         'padding':'5px 0',
         'z-index':'10'
          });
  }
    else {
   secondaryHead.removeClass('f-nav').removeAttr( 'style' );
  }
 });

  //header img
  var introSection = $('#header img'),
 introSectionHeight = introSection.height(),
  //change scaleSpeed if you want to change the speed of the scale effect
 scaleSpeed = 0.4;
  //change opacitySpeed if you want to change the speed of opacity reduction effect
 opacitySpeed = 1;

 $(window).on('scroll', function(){
  window.requestAnimationFrame(animateIntro);
 });
 //assign a scale transformation to the introSection element and reduce its opacity
 function animateIntro () {
  var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),
   scaleValue = 1 - scrollPercentage*scaleSpeed;
  //check if the introSection is still visible
  if( $(window).scrollTop() < introSectionHeight) {
   introSection.css({
    'transform': 'scale(' + scaleValue + ') translateZ(0)',
    'opacity': 1 - scrollPercentage*opacitySpeed
   });
  }
 }

});//end
//]]>
</script> 


التعديلات 


نقوم بتغير   #menu   ب الايدي الخاص بشريط القائمة الرئيسية


و ثم نقوم بالحفظ

و مبروك عليك الاضافة

صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

إرسال تعليق

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

أهم الموضوعات المميزة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.