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 بما يناسب قالبك

add_commentإرسال تعليق

  1. جميل ومتألق كالعاده :love:
    ولكن هل لي بسؤال ؟

    ردحذف
    الردود
    1. هل يمكنني تركيب اضافة ما وجعلها تظهر لمشرفي المدونة فقط؟

      حذف
    2. بصراحة لا أعلم لكن سأبحث عنها

      حذف
  2. هل تصلح لتعليقات الفيسبوك

    ردحذف
    الردود
    1. أجل قم بإستبدال المعرف #comments بالمعرف الخاص بالفيسبوك وهو .fb-comments

      حذف
  3. أخي أرجوك أرجوك تعمل لنا إضافة شريط الأخبار لبلوجر

    ردحذف
    الردود
    1. يا اخي لقد وصلني طلبك وانا احاول ان انجز الطلبات بالترتيب

      حذف
  4. ما شاء الله

    فعلا اسهل من كدة مفيش

    ردحذف
    الردود
    1. تسلم صديقي .. اتمنى انك إستفدت ..ترقب المزيد

      حذف
  5. اخي الكريم هل تساعديني في تركيب التعليقات الثلاثية لقالب بلوجر انا لا اعلم كيف اركبها هل ارسل لك القالب لكي تقوم بتركيب الاضافة لي

    ردحذف
    الردود
    1. السلام عليكم لامشكلة اخي .. ارسل لي القالب أو اضفني كمشرف مثلما تريد
      البريد / benziane.abdelkader88@gmail.com

      حذف
  6. سلام الله عليك اخي العزيز اسمي علي موسى مطور واجهات امامية عندي خبرة كبيرة بhtml5 وcss3 وjava script
    ولكن ليس عندي خبرة بموضوع التجاوب لدي عشرات الاضافات اامبرمجة مسبقا ولكن ليست متجاوبة 100% هل ساعدتني في تجاوبها

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

      حذف