تركيب أزرار التمرير السلس أعلى أو أسفل الصفحة إلى بلوجر Go Up and Down

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

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

• المعاينة

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

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

الخطوة الأولى: لوحة التحكم

• قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
• إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
• إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
• بإستعمال  الزر  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:#fbbc05;}
  /*--style defaul--*/
  .flickering.defaul 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;}
  

  التعديل على كود css

  النمط المحدد بهذا اللون خاص بسعة التقدم نحوى اليمين قم بتغيير القيمة 20px بمايناسبك.

  النمط المحدد بهذا اللون خاص بلون أيقونة التعليق قم بتغيير القيمة #fbbc05 بمايناسب لون قالبك.
• قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود jquery التالي..

  
  <script type='text/javascript'>
  /*<![CDATA[*/
  $(function() {
      //script Go Up and Down
      var  scrollToTopSpeed = 300 ,
           scrollToTopthems = "defaul" , / / defaul 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'><li class='Animat-slideInRight'><a class='GoToComments' herf='javascript:;'><i class='fa fa-comment'/></a></li></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>
  

  التعديل على كود jquery

  المتغير المحدد بهذا اللون خاص بسرعة النزول والهبوط قم بتغيير القيمة 300 بمايناسبك مع العلم كلما زاد العدد كان التمرير أبطأ.

  المتغير المحدد بهذا اللون خاص بشكل الإضافة قم بتغيير القيمة defaul بـالقيمة radius للحصول على الشكل الدائري بدلا من الشكل المربع.
  report

  يمكنك إضافة الأكواد داخل أداة HTMLjavascript بدلا من وضعها في محرر القالب.