اضافة أزرار الصعود والنزول في بلوجر بتقنية jQuery

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

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

معاينة اضغط للمعاينة

قبل كل شئ لاتنسى أخذ نسخة إحتياطية للقالب

تركيب الاضافة

الخطوة الاولى

قم بتسجيل حسابك ثم إختر المظهر

---

إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  

---

بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

الخطوة الثانية

قم بالبحث عن هذا الوسم ]]></b:skin>

فوقه أي قبله قم بوضع   كود.Css

/* widget Go Up and Down ===========================*/ #scrollToTop{display:none;list-style:none;position:fixed;bottom:40%;right:20px;z-index:9999;} #scrollToTop a{position:relative;overflow:hidden;background:#ffffff;color:#222222;cursor:pointer;font-size:15px;padding:15px;min-width:auto;display:block;text-align:center;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1);-ms-box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1);-o-box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1);} #scrollToTop a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6)";filter:alpha(opacity=0.6);opacity:0.6;-webkit-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none;} #scrollToTop a.GoToComments{color:<b>#fbbc05</b>;} /*--style defaul--*/ .flickering.default a{margin:0;} /*--style radius--*/ .flickering.radius a{margin:5px 0;} .flickering.radius a{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;} /*--Responsive--*/ @media screen and (max-width:768px){#scrollToTop{bottom:20%;}} /*--slideInRight--*/ @-webkit-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-moz-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-ms-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-o-keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} .Animat-slideInRight{animation-duration:.5s;animation-fill-mode:both;animation-name:slideInRight;} /*--slideInDown--*/ @-webkit-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-moz-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-ms-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-o-keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} .Animat-slideInDown{animation-duration:.5s;animation-fill-mode:both;animation-name:slideInDown;} /*--slideInTop--*/ @-webkit-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-moz-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-ms-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @-o-keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} @keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden;}to{transform:translate3d(0,0,0);}} .Animat-slideInTop{animation-duration:.5s;animation-fill-mode:both;animation-name:slideInTop;}

الخطوة الثالثة

قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع   كود.js

<script type='text/javascript'> /*<![CDATA[*/ $(function(){ //script Go Up and Down var scrollToTopSpeed = 300, scrollToTopthems = "default", // default or radius Tobody = $("body"), Tomain = $("#main"), html = "<!-- scrollToTop Widgets her START --><ul class='flickering' id='scrollToTop'><li class='Animat-slideInTop'><a class='BounceToTop' herf='javascript:;'><i class='fa fa-chevron-up'/></a></li><b:if cond='data:view.isSingleItem'></b:if><li class='Animat-slideInDown'><a class='GoToDown' herf='javascript:;'><i class='fa fa-chevron-down'/></a></li></ul><!-- scrollToTop Widgets her END -->"; $(html).appendTo(Tobody); var ToGo = $("#scrollToTop"), ToUp = $(".BounceToTop"), ToDown = $(".GoToDown"), ToCom = $(".GoToComments"); if(ToGo.length > 0){ ToGo.addClass(scrollToTopthems); $(window).scroll(function(){ if($(this).scrollTop() + $(window).height() > $(document).height() - 300) { ToGo.fadeOut(300); }else if ($(this).scrollTop()>10) { ToGo.fadeIn(300); }else {ToGo.fadeOut(300); } }); ToUp.click(function(){$("body,html").animate({scrollTop:0},scrollToTopSpeed) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:0},50);}); ToDown.click(function(){$("body,html").animate({scrollTop:Tobody.height()},scrollToTopSpeed);}); ToCom.click(function(){$("body,html").animate({scrollTop:Tomain.height()},scrollToTopSpeed)}); }//if });//$f /*]]>*/ </script>

• ×
  اننتهى الشرح
  اتمنى أن تكونوا قد استفدتم من هذا الموضوع وفي حال كان لديك أي استفسار أو أسئلة لا تتردد بطرحه في خانة التعليقات.