الخميس، 21 مارس 2019

إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر

إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر من أجل زيادة سرعة تحميل المدونة

إضافة زر إظهار و إخفاء التعليقات في بلوجر - طبعا اليوم سوف نناقش احد دروس بلوجر المفيدة جداً بحيث سوف نقوم بإضافة زر يقوم بإظهار و إخفاء التعليقات الخاصة بالزوار عند الضغط عليه و الغرض من إضافة هذا الزر هو تخفيف تحميل المدونة من أجل ان تُصبح أكثر سرعة عند التحميل.

فإذا كان هُناك الكثير من التفاعل و التعليقات داخل مواضيع مدونتك فننصحك بإتباع الخطوات التالية لإنها مُهمة جداً بالنسبة لك بحيث عند الدخول إلى الموضوع لن تكون التعليقات ظاهرة و هذا قد يزيد من سرعة تحميل المدونة و عند الضغط على الزر سوف تظهر جميع التعليقات الخاصة بمتابعين و زوار المدونة دعونا نرى كيفية تركيب الإضافة الزر في المثال بالأجنبي ولكنه
تم تعريب الإضافة و عند إضافتها في مدونتك ستكون بالعربي.


معاينة

إضافة زر إظهار و إخفاء التعليقات في بلوجر

1- ادخل إلى لوحة تحكم بلوجر
2- و انقر على قالب
3- و اضغط على تحرير HTML
4- ابحث عن الكود التالي

    <div class='comments' id='comments'>


    مُلاحظة: سوف تجد الكود في الأعلى مُكرر مرتين نحن سوف نستخدم الكود الثاني منه
    الان بعد أن وجدنا الكود الثاني سوف نقوم بمسحه و إستبداله بالكود التالي

    <a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">إظهار التعليقات</a>
    <div class='clear'/>
            <div class='comments hide-content' id='comments'>
    <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">إخفاء التعليقات</a>
    <div class='clear'/>


    الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
    /* Show and Hide Comments */
    .hide-content{display:none;margin:0;padding:0;}
    a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
    #comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
    a.showcontent:hover{background:#fff;color:#5593f0;}
    #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

    إعدادات التنسيق

    - كود اللون #fff هو خاص بلون كلمة إظهار و إخفاء
    - رقم 15px و هي خاصة بحجم الخط
    - كود اللون #5593f0 هو خاص بلون خلفية الزر


      الان مرة أخرى ابحث عن الوسم </body> و اضف الكود التالي فوقه
      <script type='text/javascript'>
      //<![CDATA[
      // Show and Hide Comments
      function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
      //]]>
      </script>

      الان قُم بحفظ القالب
      اي سؤال او استفسار لا تترد بوضعه في تعليق


      إضافة تعليق

      نموذج الاتصال

      الاسم

      بريد إلكتروني *

      رسالة *