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

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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/AVvXsEg2w4U0cd8UTnXqVzZwoArAXQjJv7jaAEk4WDXH_dMxpD8hLVPWZyBnZsby_8yb1OsWEdvLzX0mJzeogoQmE9lcFN1GECPzKas5EYQqH1Olih0CIObhuiw53BkKabTyjOX3Ky42zneSgXE/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/AVvXsEioPLmposijqqmUx-N_4395KCqN3smWVl0pxp_6ZfAtjcfoIYHf2ukCuprYvayU1MBvlyOdLqAgLYsXSC0Th4pM0ak3SvnD7FsAAv5TN9U5Rr2fT_6NNReCQq2mVXKt4Z1bHOPZ-zYHp6Q/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/AVvXsEgIdoYEcjuAyGd_BEIVPfl48qnUqqgwTqGpvcgw38gzypjmt5euABbfyHuPXLNweZw9tiWmPpmkaODrjfzd_dc7t8Li8ihfxupmckf6RV-aDbIntZwdlK2fcslQ_eGzCimd2YqqJ8-yx48/s1600/cooltext470930250.png' title='إظهار التعليقات'/></a>

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

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

<b:include data='comment' name='commentDeleteIcon'/>

 </span>

</dd>

</b:loop>

</dl>

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

</div>