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 بدلا من وضعها في محرر القالب.

add_commentإرسال تعليق

  1. اضافه ينتظرها الأغلبيه بوركت أخي عبد القادر متابعين لجديدك . :)

    ردحذف
  2. السلام عليكم اخي الكريم اخي عندي قالب كل ما اعمل hover على أي شيء في القالب يظهر تحته خط الرجاء تحل لي المشكلة الرجاء

    ردحذف
    الردود
    1. اين رابط المعاينة؟ :surprised:

      حذف
    2. هل تقصد الخط الموجود أسفل الروابط؟
      إذا اردت حذفه أضف فوق الوسم ]]></b:skin> الكود التالي

      a {
      background: transparent;
      text-decoration: none !important;
      }

      حذف
    3. لا أخي الكريم ليس فقط الروابط عندما أضيف ايقونات التواصل الاجتماعي يظهر تحتها خط

      حذف
  3. شكراً لك اخي الكريم جزاك الله كل خير تم ازالة الخط من تحت الكلام

    ردحذف
  4. اخي الكريم هل تقوم بتركيب لي التعليقات الثلاثية بإضافة لقائمة mag

    ردحذف
    الردود
    1. أرسل لي دعوة الآن
      benziane.abdelkader88@gmail.com

      حذف
    2. أضفني كمشرف لكي استطيع الدخول للمحرر

      حذف
    3. لقد قمت بتركيب الإضافات وأصلحت بعض المشاكل في قالبك
      كما اني وضعت لمستي على شكل القالب أسف ان تدخلت في اختيارتك :laughing: انت تعلم هوس المصمم

      حذف
    4. أسف لم انتبه لوجوده .. لامشكل ارسل لي دعوة اخرى

      حذف
    5. ولكن السلايدر لم يعمل ارجوك اخي ارجوك اصلحه

      حذف
    6. ركز معي ...لقد خرجت من مدونتك .. قم بارسل لي دعوة اخرى كمشرف

      حذف
    7. الأن هل كل شيء تمام؟

      حذف
    8. شكراً لك من القلب اخي العزيز جزاك الله كل خير استمر يا مبدع فنحن معك

      حذف
  5. استاذ عبد القادر احتاجك ان تصمم لي قالب خاص بي بدون تشفير وبدون حقوق وبدون اعادة بيع كيف اتواصل معك واخبرك بالتفاصيل؟

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

      حذف
    2. السلام عليكم صديقي كل التحية لك ولكن سبق وان استعملت الاداة اكثر من مرة ولكن لم اتلقي رد؟

      حذف
    3. اجل أخي الخدمة كانت متوقفة
      على العموم لقد وصلت بياناتك سيتم التواصل معك على البريد

      حذف
    4. شكرا لك بوركت.

      حذف
  6. السلام عليكم مشرفي منصة بلوجر كود ...
    أحتاج إلي سكريبت عندما أصعد بالماوس لأعلي من أي مكان في الصفحة يحدث شئ وعندما أنزل من أي مكان في الصفحة يحدث شيئ وشكراً.

    ردحذف
  7. السلام عليكم مشرفي موقع بلوجر كود اريد ان اسئل عن كيفية وضع معاينة مع موقع كود بن في مدونتي

    ردحذف
    الردود
    1. 1- توجه الى المشروع سواء كان خاص بك او بغيرك
      2- ثم قم بالضغط على الزر Embed الموجود في الاسفل
      3- ستنبثق لك نافذة للمعاينة تحتوي على كود الاطر المتداخلة قم بالضغط على iframe ثم قم بنسخه
      4- توجه لمدونتك وضع الكود في تبويب html
      https://3.bp.blogspot.com/-ffGsj2Vt75c/XLxx_tls5jI/AAAAAAAAD4Q/FRynO5wfD5chx30uOm00wIMvvIkNue3qwCLcBGAs/s1600/%25D8%25A7%25D9%2584%25D8%25AA%25D9%2582%25D8%25A7%25D8%25B7.PNG

      حذف
    2. اخي انا لا املك حاسوب هل تنجح على الجوال وان لم تنجح فما هو الحل

      حذف