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

إضافة خاصية إظهار وإخفاء تعليقات مدونات بلوجر بستعمال حدث ما بعد النقر - بعدما تطرقنا في موضوعنا السابق عن كيفية جعل صندوق تعليقات الفيسبوك متجاوب مع جميع الشاشات داخل مدونات بلوجر. شرحنا اليوم حول مدونات البلوجر سيكون حول كيفية إضافة خاصية لإظهار وإخفاء التعليقات بستخدام حدث ما بعد النقر أو ما يسمى OnClick Event.

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

أنقر مرتين على الأكواد لتتمكن من نسخها

دعونا ننتقل مباشرة لشرح الطريقة:

إظهار وإخفاء تعليقات مدونات بلوجر بستعمال حدث ما بعد النقر

1. الذهاب إلى المدونة > محرر قالب > البحث عن رسائل هذا التعليقات :

إبحث عن الكود التالي:

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

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

HTML<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

2. قم بإضافة كود CSS قم بوضع الكود التالي قبل </style>

CSS/* 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;}

3. قم بإضافة كود الجافا سكريبت قبل </body>

JS<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>

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

لا نتسى مشاهدة كيفية جعل صندوق تعليقات الفيسبوك متجاوب مع جميع الشاشات داخل مدونات بلوجر