4/16/2019

settings_overscan print announcement

مقدمة الموضوع

 تركيب أزرار التمرير السلس في الصفحات هي ميزة غنية عن التعريف و مفيدة إذا كانت صفحاتك سواء الرئيسية او المنشورات طويلة جدا .. وعليه نعرض لكم أفضل سكريبت 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> فوقه أي قبله قم بوضع   كود.js

  • 
    <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>
    

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