السلام عليكم ورحمة الله تعالى وبركاته،إخواني أخواتي الكرام ، هذا اليوم سوف نقوم بمعرفة كيفية إضافة زر يقوم بإخفاء وإظهارجميع التعليقات من على صفحة التدوينة ،حيث يكون هذا الزر في أسفل الصفحة وبالضبط فوق صندوق التعليقات ،فمثلا إذا كانت مدونتك تتوفر على عدد كبير من التعليقات في موضوع معين ،تظهر الصفحة طويلة جدا مما يسبب بطئ في ظهور الصفحة كاملة وكذلك تشوه تنسيقها ،وهذه الخاصية تساعد على تنسيق المدونة وكذلك تساهم في سرعة تحميل الصفحة ،وللمعاينة قبل تطبيقها على مدونتك توجه لأي موضوع من مدونتي يضم عددا من التعليقات ثم توجه لأسفل الصفحة ثم إضغط على الزر لتظهر لك جميع التعليقات ومرة أخرى لإخفائها.
مثال للاضافه
كيفية اضافة هذه القطعه الى مدونتك
ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي :
ثم قم بوضع الكود التالي قبله :</head>
حيث يمثل الرابط ذا اللون الأزرق صورة الزر "إظهار التعليقات" و الرابط ذا اللون الأحمر صورة الزر" إخفاء التعليقات "<script language='javascript'>
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "<img alt='إظهار التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXz-wnmpySd-HPn-MK5c6rjQkpgUNWo2s8z8-qvcWu7X3gVBOJqUwJZVd_Tt2Gw0EMbqkih2PdEfiTbGa_O7bwsr60sB3xfMp1473qWQvcmLupjsH4qcc5FXLZQPUtXxE_FyEII65542Q/s1600/cooltext470930301.png' title='إظهار التعليقات'/>";
}
else {
ele.style.display = "block";
text.innerHTML = "<img alt='إخفاء التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglc0H5FrP5G10GSu7PCGjOO3tXxk5clVy9Xzm64wg0O4d0nic8iDxPHXxPMbmXB7pYQW972xjslKZpINAYSM9sTPkXkrd-Fc-MWF3TzZSU6lAerczarITQkV4l64_55Ew6wtEhUrm1q4o/s1600/cooltext470930319.png' title='إخفاء التعليقات'/>";
}
}
</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/AVvXsEiIY2aRgn1OejO58n1oCSfeXBtZzXRdLILI3ft-jHf3p9oEMFXrCjj9p3TwC1K_oqGFWEgEZzP-1P6O7kgKm68EkmnDgG-O2Ed40SrEStPpY_RWZi4dr7xO2ipxzVh17aZ6aksU-TqnHEw/s1600/cooltext470930250.png' title='إظهار التعليقات'/></a>
<div id='toggleText' style='display: none;'>
ثم قم بوضع الكود التالي تحته :<b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl>
</div>
وأخيرا قم بحفظ القالب،وتوجه للمعاينة
المصدر / مدونة ابو اياد
ليست هناك تعليقات:
إرسال تعليق