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

عدد مشاهدات الموضوع:
السلام عليكم ورحمة الله تعالى وبركاته،إخواني أخواتي الكرام ، هذا اليوم سوف نقوم بمعرفة كيفية إضافة زر يقوم بإخفاء وإظهارجميع التعليقات من على صفحة التدوينة ،حيث يكون هذا الزر في أسفل الصفحة وبالضبط فوق صندوق التعليقات ،فمثلا إذا كانت مدونتك تتوفر على عدد كبير من التعليقات في موضوع معين ،تظهر الصفحة طويلة جدا مما يسبب بطئ في ظهور الصفحة كاملة وكذلك تشوه تنسيقها ،وهذه الخاصية تساعد على تنسيق المدونة وكذلك تساهم في سرعة تحميل الصفحة ،وللمعاينة قبل تطبيقها على مدونتك توجه لأي موضوع من مدونتي يضم عددا من التعليقات ثم توجه لأسفل الصفحة ثم إضغط على الزر لتظهر لك جميع التعليقات ومرة أخرى لإخفائها.
image alt
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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='http://2.bp.blogspot.com/_gToJ30Luauw/TKA7G_2qx_I/AAAAAAAABs4/5fSYSHvGlIA/s1600/cooltext470930301.png' title='إظهار التعليقات'/>&quot;;
}
else {
ele.style.display = &quot;block&quot;;
text.innerHTML = &quot;<img alt='إخفاء التعليقات' src='http://3.bp.blogspot.com/_gToJ30Luauw/TKA7LihKnQI/AAAAAAAABs8/TNvjknNFd20/s1600/cooltext470930319.png' title='إخفاء التعليقات'/>&quot;;
}
}
</script>
حيث يمثل الرابط ذا اللون الأزرق صورة الزر "إظهار التعليقات" و الرابط ذا اللون  الأحمر صورة الزر" إخفاء التعليقات "

والآن نقوم بالبحث عن هذا الكود :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
ثم قم بوضع الكود التالي قبله :
<a href='javascript:toggle();' id='displayText'><img alt='إظهار التعليقات' src='http://1.bp.blogspot.com/_gToJ30Luauw/TKA7Bw59q6I/AAAAAAAABs0/Mk7g4Gk1vzk/s1600/cooltext470930250.png' title='إظهار التعليقات'/></a>
<div id='toggleText' style='display: none;'>
ثم نقوم بالبحث عن الكود التالي :
<b:include data='comment' name='commentDeleteIcon'/>
 </span>
</dd>
</b:loop>
</dl>
ثم قم بوضع الكود التالي تحته :
</div>

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

ولأي إستفسار ،الموجوا وضع تعليقاتكم للإجابة عليها في أقرب وقت ممكن.

هناك 79 تعليقًا:

  1. بارك الله فيك على الشرح الرائع و الطريقة الجميلة و المفيدة في بعض المواضيع التي تكثر بها الردود

    ردحذف
  2. @العربي للتقنية
    العفو أخي الكريم ،ومرحبا بك ،وشكرا لك على زيارتك

    ردحذف
  3. غير معرف6:10 م

    طيب ليه يا معلم انت مظبطتش الاكواد كلها مع بعضها؟

    ردحذف
  4. بارك الله فيك أخي أبواياد
    موضوع جميل ومهم

    ردحذف
  5. @غير معرف
    أخي الفاضل ،سؤالك في محله،لكنني تركت حرية الإختيار لمن يريد أن يقوم بتطبيق أي إضافة على حدى ،لأن تطبيق 3 إضافات في آن واحد لا أضنه مستحب للجميع ،فالأمر بسيط،ما عليك سوى إتباع شرح الإضافات الأخرى وتطبيقها بكل سهولة ،شكرا على وجهة نظرك .
    أخي M.Elosaily شكرا لك على متابعتك وبارك الله فيك أيضا

    ردحذف
  6. عمرو8:15 م

    باارك الله فيك ..ودايمآ فى تقدم ان شااء الله

    ردحذف
  7. @عمرو
    بارك الله فيك أخي عمرو ووفقك الله أيضا في حياتك وشكرا لك على الزيارة

    ردحذف
  8. طريقه جميله

    ان شاء الله اعملها لما المدونه تشتهر

    شكرا ابو اياد

    ردحذف
  9. جامد فحت يامعلم
    تسلم ايدك وفعلا اضافه مميزه وانا معاك فى حكاية عدم تطبيق الاضافات الثلاثه مع بعضهم البعض

    لانى بحس انهم يثقلون من المتصفح

    ولا انت ايه رئيك؟

    ردحذف
  10. @»Sasuke Uchiha«
    الله يخليك أخي الكريم ،بالنسبة لإضافة 3 إضافات ،لا أظن أنه قد يبطيء المتصفح فأنا أستعملهما في مدونتي ولم ألاحظ أي فرق ملموس ،فأنا متفق معك من ناحية كثرة إضافة سكريبتات للمدونة يقوم بتبطييء المتصفح .فإذا وجدت مدونتي بطييءة عند تصفحك لها أخبرني بذلك وسوف أكون شاكرا لك ،بالتوفيق

    ردحذف
  11. شكرا أخ أبو إياد و لكن هل ممكن سؤال ؟؟ كيف أضيف خانة بآخر التعليقات . كما في الصفحة الرئيسية , في أسفل مدونتكم ؟؟ أو كيف يمكنني أن أراقب التعليقات من دون هذه الإضافة ؟؟؟ و شكرا كثيراً على مساعداتكم لنا

    ردحذف
  12. @noujoum
    السلام عليكم أخي الكريم لقد تمت الإجابة على سؤالك وإدراجه في الموضوع الخاص بالأسئلة الشائعة ،وهو السؤال رقم 13 ما عليك سوى الضغط عليه وسوف يتم التوجه للإجابة مباشرة في الموضوع ،تفضل من هنا
    أما عن كيفية متابعة التعليقات بدون إستعمال الأداة السابقة ،ما عليك سوى إستعمال رابط خلاصات التعليقات والذي يكون على هذا الشكل ،
    http://www.abu-iyad.com/feeds/comments/default
    ما عليك سوى تغيير رابط مدونتي برابط مدونتك ،فعند الضغط عليه سوف تخرج لك صفحة بها جميع التعليقات بمدونتك ويمكنك وضع زر للمتابعة السريعة وذلك بالإشتراك ف التعليقات وذلك بالضغط على زر الإشتراك من صفحة التي ظهرت لك سابقا ،حيث سوف يتم ادراج زر أسف مكان وضع الروابط على المتصفح ولهذا الغرض ،أنصحك بإستعمال المتصفح فاير فوكس

    ردحذف
  13. ألف ألف شكر . تسلم الأيادي

    ردحذف
  14. ألف ألف شكر . تسلم الأيادي يا رب

    ردحذف
  15. اضافه رائعه ومفيده خصوصا للمدونات التطويريه والتعليميه
    تسلم ابو اياد الله يديمك

    ردحذف
  16. ماشاء الله تبارك الله أخوي أبو أياد
    الله يعطيك العافيه...

    ردحذف
  17. جزاك الله الجنه على المعلومات القيمه ~

    ردحذف
  18. السلام عليكم

    انا مش لاقى الكود دة عمندى فى المدونة

    بحثت عن بعض الكلامات من الكود موجودة بس مش بالتنسيق الى موجود هنا وانا عجبانى الفكرة وعايز اغمالها

    ولك جزيل الشكر والاحترام

    ردحذف
  19. أبا إياد ...

    شكراً لك ؛ لا تعلم كم استفدت من دروسك

    فلله درك ؛ وكتب ربنا أجرك.

    ممتن لك أي أخي.

    // شتات فكر // مر من هنا ؛ ثم مضى.

    ردحذف
  20. مميز اخي

    كما يشرفني

    زيارتك لمدونتي مدونه العالمي

    blog al3lamy

    http://al3lamy.blogspot.com

    ردحذف
  21. الف شكر ليك يا ابو اياد
    بس كان عندى شؤال انا مركب استايل اسمه WP-Showcase شبيه للمواقع بس كل ما انزل تدوينة جديده بتظهر فى الصفحة الرئسية الكلام بدل الصورة.
    ملحوظة صغيرة:-انا بكتب شوية كلمات عشان اعلى الصورة عشان البحث .وشكرا

    ردحذف
  22. بالعلم نرتقي3:25 م

    مشكووور على الموضوع الاكثر من رائع، ولكنني فعلت الطريقة ولكن عندما اضغط على اظهار جميع التعليقات لايظهر شيئ؟؟؟ ما المشكلة؟
    رابط المدونة...
    http://abu3mar.blogspot.com/2010/11/blog-post_6512.html#comments

    ردحذف
  23. @بالعلم نرتقي
    تأكد من تحديد الكود كاملا في المرحلة الثانية ،ربما قمت بتحديد الكود ناقصا من بعض الوسوم

    ردحذف
  24. شكرا لك اخى ايايد على كل الدروس والاضافات الرائعه
    جزاك اله خيرا P:

    بعد تركيب الاضافه التعليقات تشوهت بصراحه
    اتبعت الخطوات ولكن .. انظر هنا لترى ما اقصده
    http://milanarabia.blogspot.com/2010/12/ka-pa-ro-2011-ib-ba-ca.html
    ارايت كيف تبدو التعليقات !! ممكن مساعدتك فى تنسيقها
    وشكرا جزيلا لك اخى

    ردحذف
  25. @Ahmed M
    ا لسلام عليكم ،قم بإعادة تطبيق الإضافة منذ البداية ،لقد قمت بالتعديل علي الموضوع :((

    ردحذف
  26. اخى الغالى
    اولا شاكر لك جدا على ردك واهتمامك :((

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

    اسف على الاطاله وشاكر لك اخى
    بالتوفيق

    ردحذف
  27. @Ahmed M
    :( أظن أن المشكلة في طول تاريخ التعليق ،قم بوضع تاريخ أقل طولا من إعدادات ثم تعليقات ثم تنسيق الطابع الزمني للتعليقات ثم إختر أقصر تاريخ .بالتوفيق

    ردحذف
  28. ابو اياد لو سمحت مش لاقيه الكود التاني

    ردحذف
  29. خلاص يا ابو اياد لقيت الكود وطبقت الطريقه ونجحت الحمد لله

    اشكرك كثيراً لطريقتك الجميله

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

    ردحذف
  31. @NEWLY PTC
    قم بتطبيق الإضافة ،ثم قم بحذف هذا الرابط من الكود الأول
    http://3.bp.blogspot.com/_gToJ30Luauw/TKA7LihKnQI/AAAAAAAABs8/TNvjknNFd20/s1600/cooltext470930319.png

    ردحذف
  32. أزال المؤلف هذا التعليق.

    ردحذف
  33. استازى ابو اياد اشكرك كتير على الاضافات الجميلة وربنا يخليك ويزيدك من علمه لمنفة الناس

    ردحذف
  34. اخى الكريم بشكرك لمجهودك ولكنى نفذت كل الخطوات ولكن لم اجد هذا الكود
    الثانى المراد تبديله

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

    ردحذف
  35. @m.sokr
    أي كود لم تجده ،وضح سؤالك ؟؟

    ردحذف
  36. الكود الثانى الى بيبدا dl expr

    ردحذف
  37. @m.sokr
    إبحث عن هذا لكود بدلا منه
    <dl expr:class='data:post.avatarIndentClass'>

    ردحذف
  38. لم يفلح الامر اخى الكريم شكرا للمساعده وارجوا وجود حل لان مدونتى تحميل الكثير من التعليقات والمنظر مشوه ارجوا الحل

    والتواصل معى من خلال الفيسبوك من خلال الاكونت ده

    http://www.facebook.com/msokr

    ردحذف
  39. للاسف الاضافة لم تتم 8-}

    لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
    رسالة خطأ XML: The element type "div" must be terminated by the matching end-tag "

    ردحذف
  40. المشكلة فى هذا الكود اخر سطر فى الكود الثانى

    div id='toggleText' style='display: none;'
    اتمنى المساعدة

    دومت فى رعايت الله وامنه

    ردحذف
  41. غير معرف8:49 م

    السلام عليكم

    اخي بحثت عن هذا الكود في الخطوة الثانية

    لكن دون فائدة

    ردحذف
  42. اخي ابو اياد انا سويت نفس شرح بس طلع لي هذا اتمنى انك تساعدني
    عذر علينا حفظ القالب
    يرجى تصحيح الخطأ التالي، ثم إرسال القالب مرةً أخرى.
    لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
    رسالة خطأ XML: The element type "div" must be terminated by the matching end-tag "
    ".

    ردحذف
  43. غير معرف11:28 ص

    :)

    ردحذف
  44. بارك الله في جهودك الطيبة شرح رائع وبسيط للمبتدئين مثلي
    نرجو لك التوفيق في الدنيا والاخرة

    ردحذف
  45. جزاك الله خير اخوي ابو اياد وبصراحه دائماً تفاجئني بإضافات جميله

    لقد قمت باضافتها في مدونتي ولكن مدونتي استايلها ازرق خذيت نفس الصور عندك :((

    اذا سمحتلي واذا تبيني احط الصوره الاساسيه يسلم راسك اغيرها

    تحياتي لك

    رابط مدونتي
    www.blogsalem.com
    مدونتي متخصصه في برامج الايفون :(( اذا عندك ايفون اضبطه لك بجميع البرامج :((:((:((

    ردحذف
  46. @سالم المحيلبي
    لا مشكلة أخي الكريم في أخذ الأيقونات ،مبروك عليك الإضافة وإنشاء الله أحتاج لك عند شرائي ل أيفون ،تحياتي لك

    ردحذف
  47. مشكووووووور اخى وشرحك واضح ومفيد بارك الله فيكـ
    http://sfa7-ba7re.blogspot.com/

    ردحذف
  48. غير معرف7:45 م

    :))

    ردحذف
  49. للاسف الاضافة لم تتم

    لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
    رسالة خطأ XML: The element type "div" must be terminated by the matching end-tag "

    ردحذف
  50. جزاك الله خير :-t

    ردحذف
  51. شكرا تم التطبيق بنجاح

    ردحذف
  52. انا محمل قالب مدونتك مش ملاقي مشكلة ابدا :x :)) :((

    ردحذف
  53. السلام عليكم
    لم اجد الكودالثالث

    ردحذف
  54. أخي لو لم اجد بعض هذه الأوامر

    هل أقوم بوضعها بنفسي؟!

    ردحذف
  55. غير معرف7:24 م

    أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  56. و الله موضوع مفيد
    تم التطبيق هنـــا :
    http://freeinternet-ma.blogspot.com

    ردحذف
  57. بصراحة..ثاني وثالث كود لا يظهر عندي ((=

    ):

    ردحذف
  58. مشكور اخى ابو اياد لكن الاضافة ظهرت بشكل مختلف. ظهرت فى الرسائل التى بدون تعليق ولم تظهر فى الرسائل الموجودة بتعليق
    وده مثال بتعليقات
    http://www.moogasha3by.com/2012/12/2013-mp3_3782.html
    وده مثال بدون تعليقات
    http://www.moogasha3by.com/2013/06/badges-of-fury-2013-tc.html

    ردحذف
  59. أزال المؤلف هذا التعليق.

    ردحذف
  60. زي الفل بس كل اما اجي اضغط علي اظهار التعليقات ما يفتحليش حاجة ما عني في رسائل بس انا اما جيت احط الكود شلت كلمة <div علي شان مش عاوز يقبل غار اما اشله ممكن حل وشكرااااا

    ردحذف
  61. مشكوووووووووووووور

    ردحذف
  62. أشكرك أخي الكريم لك ألف الشكر لقد استفدت من هذه المدونة عدة أمور
    ومرة أخرى أجدد شكري لكم

    ردحذف
  63. هل هناك طريقة لإخفاء صندوق التعليقات في موضوع محدد ؟
    المرجو الإجابة في أسرع وقت و شكرا

    ردحذف
  64. @مهدي ٱشطينة

    نعم عن طريق خاصية "الصفحات pages"
    ادخل على لوحة التحكم ثم الصفحات
    ومنها قم بانشاء صفحة جديدة blank page وهى اول اختيار
    ومنها قم بانشاء موضوعك وتستخدم هذه الخاصية فى الصفحات الثابتة التى لا يريد صاحب المدونة تعليقات عليها

    ردحذف
  65. يا اخي في مدونتي لا تضهر تعليقات الزوار بل يضهر فقط عدد التعليقات و هدا حتى بعد إضافة هده الضافة هل من حل
    للمعاينة :
    http://ati9nia.blogspot.com/

    ردحذف
  66. أخى عند الحفظ يأتى خطأ فى أحد الأسطر

    ردحذف
  67. مشكوور اخي الكريم لكن هل من الممكن عمل نفس الشئ بالنسبة للقائمة الجانبية وشكراا

    ردحذف
  68. الموضوع رائع
    لكن الكود غير موجود

    ردحذف
  69. السلام عليكم ورحمة الله وبركاته

    لا أجد هذا الكود الرجاء الرد وشكرا أخو الكابتن عمدة
    صاحب مدونة الكابتن
    www.alk2abten.tk

    جزاكم الله كل خير
    في رعاية الله وأمنه

    ردحذف
  70. شكرا جزيلا ع الإضافة الرائعة من شخص اروع

    تم التطبيق

    http://alk2abten.blogspot.com/

    ردحذف
  71. عندي مشكل هو لا يضهر صندوق التعليقات إلى بعد الضغط على عدد التعليقات هل من حل
    geek2coffee.blogspot.com

    ردحذف
  72. غير معرف3:08 ص

    شكرا على الاضافة

    اخي اياد في هذه التدوينة لاتظهر ايقونة اظهار او اخفاء التعليقات ؟ فهل انت الغيتها ؟
    ارجوا الرد

    وشكرا لك

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية