إضافة زر إظهار وإخفاء حاوية لصندوق تعليقات بلوجر بأسهل طريقة Comment Slide Panel

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

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

• المعاينة

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

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

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

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

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

الخطوة الثانية: تركيب الأكواد

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

  
  <b:if cond='data:view.isSingleItem'>
  <script type='text/javascript'>
  //<![CDATA[
  // BLOGGER SLIDE PANEL COMMENTS
  jQuery(function() {
  var panelSelector = '#comments',
      openPanelText = "أظهر التعليقات",
      closePanelText = "أغلق التعليقات",
      slideDownPanelSpeed = 600,
      slideUpPanelSpeed = 400,
      panelColor = "#fbbc05";
  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 بما يناسب قالبك