السلام عليكم ورحمة الله وبركاته اهلا بكم متابعينا على مدونة تى جو من التعديلات المهمه التى يبحث عنها اكثر المدونين وهى تثبيت القائمه العلويه الخاصه باقسام المدونه لما لها من تاثير ملحوظ على معدل الارتداد فى المدونه حيث انها تلفت نظر الزائر للاقسام الخاصه بالمدونه مما يجعله يبقى لفتره اكبر داخل مدونتك مما يقلل من معدل الارتداد.
سنتطرق سويا على كيفية التعديل على قالب بلوجر لتثبيت قائمة الاقسام بشرح عملى سوف ارفق لكم فيديو شرح عملى كامل بكيفية التعديل حتى يتثنى لكم فهم الموضوع بشكل ميسر.
لكن كما تعودنا قبل البدء فى اى تعديل على اكواد ال html يجب اخذ نسخه احتياطيه من القالب الخاص بك وذلك للرجوع اليه فى حالة حدوث اى مشكله عند التعديل بدون خسائر.
شاهد الفيديو
فيدو شرح تثبيت قائمة الاقسام العلويه عند تمرير الصفحه
يمكنك نسخ الاكواد بالشرح من الصندوق التالى
يوضع الكود الاول اعلى وسم اغلاق ال body
<script type='text/javascript'>
//<![CDATA[$(document).ready(function(){//fixed secondary navvar 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 imgvar introSection = $('#header img'),introSectionHeight = introSection.height(),//change scaleSpeed if you want to change the speed of the scale effectscaleSpeed = 0.4;//change opacitySpeed if you want to change the speed of opacity reduction effectopacitySpeed = 1;$(window).on('scroll', function(){window.requestAnimationFrame(animateIntro);});//assign a scale transformation to the introSection element and reduce its opacityfunction animateIntro () {var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),scaleValue = 1 - scrollPercentage*scaleSpeed;//check if the introSection is still visibleif( $(window).scrollTop() < introSectionHeight) {introSection.css({'transform': 'scale(' + scaleValue + ') translateZ(0)','opacity': 1 - scrollPercentage*opacitySpeed});}}});//end//]]></script>
يجب عليك تغير #menu باسم الكلاس او الديف الخاص بالقائمه
الكود الثانى يوضع اعلى وسم اغلاق b:skin
example {
-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
يجب تغيير example باسم الديف او الكلاس الخاص بالقائمه
وهكذا نكون قد انتهينا من موضوع حلقة اليوم اتنمنى ان تكونو قد استفدتم من الموضوع وان اعجبك لا تنسى مشاركته مع الاصدقاء حتى تعم الفائده ولا تنسى الاشتراك فى قناتنا على اليوتيوب حتى تكون اول المستفيدين من شروحاتنا والى اللقاء فى موضوع جديد على مدونة تى جو .
Tags:
اضافات-بلوجر
واصل
اسعدتنى زيارتك