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

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

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

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

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

انتقل إلى لوح تحكم مدونتك

إختر "تصميم" ، ثم "تحرير html , ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

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

</head>

ثم قم بوضع الكود التالي قبله :

<script language='javascript'>

function toggle() {

var ele = document.getElementById(&quot;toggleText&quot;);

var text = document.getElementById(&quot;displayText&quot;);

if(ele.style.display == &quot;block&quot;) {

ele.style.display = &quot;none&quot;;

text.innerHTML = &quot;<img alt='إظهار التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOULoGWyGWlHm7KJnzcP9jIEpIeTK1sb2VWB_lLRY1wC0YgTAPc7XbjTp3WbBeNNM7ZXuAj4T2B6mDgjHwA43fG2a9lCyZzb54LUH1x95PqV9omMg2kanuzL3GXdRcfECsgPNotdzcp8/s1600/cooltext470930301.png' title='إظهار التعليقات'/>&quot;;

}

else {

ele.style.display = &quot;block&quot;;

text.innerHTML = &quot;<img alt='إخفاء التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaS47vqXlBKfkgReOAE34oYfuHs2pw1IE1QagX9WSGkfrLJL0QlOHTgGEJbn3kxReRQos31omaQEJV_ibE9z0-jMUgOhgxlWHcWqtBTSDZ38UNltZe5nS8to-YOgIxPqJV4f1UruuH9wA/s1600/cooltext470930319.png' title='إخفاء التعليقات'/>&quot;;

}

}

</script>

حيث يمثل الرابط ذا اللون الأزرق صورة الزر "إظهار التعليقات" 

و الرابط ذا اللون الأحمر صورة الزر" إخفاء التعليقات "

والآن نقوم بالبحث عن هذا الكود :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

ثم قم بوضع الكود التالي قبله :
<a href='javascript:toggle();' id='displayText'><img alt='إظهار التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsusmMyuUiY0nsfpUbMkWGd8k-2a0uCu1pM8vKRtl9EMJPL6V0nAxyw1McvGUCVBiPeNo8Ipdo_oZ_3vTpSN-vYSs9OmVB2Sawdhn4eNsXOeDdTrXRlbdb4clWEw0czDSX9Bs7ih1xz9k/s1600/cooltext470930250.png' title='إظهار التعليقات'/></a>

<div id='toggleText' style='display: none;'>

ثم نقوم بالبحث عن الكود التالي :
<b:include data='comment' name='commentDeleteIcon'/>

 </span>

</dd>

</b:loop>

</dl>

ثم قم بوضع الكود التالي تحته :
</div>

وأخيرا قم بحفظ القالب، وتوجه للمعاينة ومبروك عليك الاضافة