4/12/2019

settings_overscan print announcement

أهلا ..في هذه التدوينة السريعة ونزولا عند من طالبوا بها سابقا .. سنشرح أبسط طريقة لإضافة زر إظهار وإخفاء حاوية - صندوق - التعليقات على الرغم من وجود عدد كافٍ من البرامج التعليمية الخاصة بهذه الميزة إلا أنني أريد فقط أن أوضح أن هناك طريقة أسهل للقيام بذلك وهي الطريقة التي سنشرحها كونها لا تحتاج إلى تفكيك بنية القالب الشاملة لإضافة هذه الميزة البسيطة !! ، ما سنقوم به السماح لـ jQuery بالبحث وإدراج العناصر التي نحتاجها (في هذه الحالة ، زر / إظهار وإخفاء الحاوية ).






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

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

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

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

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

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

  • 
    <b:if cond='data:view.isSingleItem'>
    <script type='text/javascript'>
    //<![CDATA[
    // BLOGGER SLIDE PANEL COMMENTS
    var panelSelector       = '#comments',
        openPanelText       = "أظهر التعليقات",
        closePanelText      = "أغلق التعليقات",
        slideDownPanelSpeed = 600,
        slideUpPanelSpeed   = 400,
        panelColor          = "#fbbc05";
    
    jQuery(function() {
    if(jQuery(panelSelector+" iframe").length > 0){
    var style='<style type="text/css"> a.openpanel{position:relative;font-size:15px;display:block;clear:both;width:auto;padding:12px 40px;margin:0;text-align:center;font-weight:bold;line-height:normal;background-color:'+panelColor+';color:white;text-decoration:none;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}a.openpanel em{display:block;width:0;height:0;position:absolute;top:25px;right:15px;border:6px solid transparent;border-top-color:white;}a.openpanel.active{background-color:#f8f8f8;color:'+panelColor+';}a.openpanel.active em{top:15px;border-color:transparent transparent '+panelColor+' transparent;}div.paneline{height:0;border-bottom:4px solid '+panelColor+';}div.hompiPanel{padding:10px!important;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.07);-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,0.07);-ms-box-shadow:inset 0 1px 5px rgba(0,0,0,0.07);-o-box-shadow:inset 0 1px 5px rgba(0,0,0,0.07);box-shadow:inset 0 1px 5px rgba(0,0,0,0.07);margin:0!important;}</style>';
        jQuery(style).appendTo("head");
        jQuery(panelSelector).hide()
            .addClass('hompiPanel')
                .before('<a class="openpanel from-js" href="javascript:void(0)">' + openPanelText + '<em></em></a>')
                    .after('<div class="paneline"></div>');
        jQuery('.openpanel').toggle(function() {
            jQuery(this).addClass('active').html(closePanelText + '<em></em>');
            jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
            return false;
        }, function() {
            jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
            jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
            return false;
        });
    }//if
    });
    //]]>
    </script>
    </b:if>
    


    التعديل على الكود
    المتغيرات المحددة بهذا اللون خاصة بنصوص الزر عند الفتح والإغلاق أكتب بدلا منه ما يناسبك
    المتغيرات المحددة بهذا اللون خاصة بسرعة العرض عند الفتح والإغلاق
    المتغير المحدد بهذا اللون خاص بلون الإضافة قم بتغيير كود اللون #fbbc05 بما يناسب قالبك