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

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


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

إضافة زر إظهار و إخفاء التعليقات في بلوجر :
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>
الان قم بحفظ القالب
582 كل المشاهدات 1 مشاهدة اليوم

مواضيع مشابهة قد تعجبك :

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *