إضافة زر إظهار و إخفاء التعليقات في بلوجر - طبعا اليوم في مدون محترف سوف نناقش احد دروس بلوجر المفيدة جداً بحيث سوف نقوم بإضافة زر يقوم بإظهار و إخفاء التعليقات الخاصة بالزوار عند الضغط عليه و الغرض من إضافة هذا الزر هو تخفيف تحميل المدونة من أجل ان تُصبح أكثر سرعة عند التحميل.
فإذا كان هُناك الكثير من التفاعل و التعليقات داخل مواضيع مدونتك فننصحك بإتباع الخطوات التالية لإنها مُهمة جداً بالنسبة لك بحيث عند الدخول إلى الموضوع لن تكون التعليقات ظاهرة و هذا قد يزيد من سرعة تحميل المدونة و عند الضغط على الزر سوف تظهر جميع التعليقات الخاصة بمتابعين و زوار المدونة دعونا نرى كيفية تركيب الإضافة الزر في المثال بالأجنبي ولكنه
تم تعريب الإضافة و عند إضافتها في مدونتك ستكون بالعربي.
معاينة
مُلاحظة: سوف تجد الكود في الأعلى مُكرر مرتين نحن سوف نستخدم الكود الثاني منه
الان بعد أن وجدنا الكود الثاني سوف نقوم بمسحه و إستبداله بالكود التالي
إضافة زر إظهار و إخفاء التعليقات في بلوجر
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 هو خاص بلون خلفية الزر
- رقم 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>
الان قُم بحفظ القالب
اي سؤال او استفسار لا تترد بوضعه في تعليق
إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر
4
/
5
بواسطة
مدون محترف
أعجبتني الإضافة تساعد تحميل صفحه بسرعه =e
ردحذفصراحة الإضافة جميلة و انا اود إستخدامها ولكن للأسف
حذفمع نظام التعليقات الخاص بي لن تظهر مُنسقة الإضافة بحيث زر الإخفاء سوف يظهر بداخلها
ولكن شكراً على تعليقك
شفتها لما ركبتيها =a
حذفقلت الكود مكرر مرتين أنا أستبدلت مع الكود الأول وأشتغل ولم يشتغل لما أستبدلتو بالكود الثاني
حذفههههههههههه كيف شفتها انا ركبتها دقيقة فقط =z
حذفاصلاً انا هغير قالب مدونتي واصمم قالب جديد =s
بالنسبة للأكواد كل شخص يجرب الكودين و الكود الي تشتغل عليه الإضافة هو الصحيح =a
الله يوفقك ننتضر التصميم الجديد
حذف=e =r
حذفأخي موضوع في القمة بارك الله فيك أخي الكريم
ردحذفالأهم من هذا , ان تكون راضي عن ما تكتب وليس الأهم من يتابع ومن يعلق .. والأهم ان يكون من قرأ لك قد استفاد منك .. لتكون كتابتك بفائدة ..
وأنا قد أستفدت والحمد الله
نتمني ان تزور مدونتي وشكرا
كلام سليم اخي مدون
حذفشكراً لك و لتعليقك
تم زيارة مدونتك وضع تعليق فيها ا
احترامي و تقديري لشخصك الكريم
دائما متألق مدون محترف موضوع جميل وتقريبا اول موضوع يشرح اضافة هذي الخاصية في تعليقات بلوجر , لك جزيل الشكر =r
ردحذفشكراً لك صديقي
حذفتعليقك زاد الموضوع تألق =e
السلام عليكم
ردحذفسؤال لو سمحت...لماذا عند استخدامي لاحد قوالب بلوجر العادية ( اول ما ننشئ المدونة بتكون موجودة)
وقت احط فيها اعلان ما بيظهر
ممكن حل ؟
قد تكون وضعت الإعلان في مكان خاطي
حذفاو هناك اكواد تمنع ظهور الإعلانات
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفشكراً لك يا غالي
حذفولكن لا ننشر روابط إشهار
رووووووووعه ياغالى بالتوفيق
ردحذفشكراً لك
حذفالسلام عليكم اخ منير ☺
ردحذفالموضوع جميل والاضافة اجمل ❤
لكن ماعندي مكان للتعليقات بمدومني 😅
انا مدونتي مدونة شخصية
سأضع الرابط في تعليق منفرد لانه ممنوع الروابط...
لكن اخي لو سمحت عندي مشكلة
المشكلة هي القالب الخاص بالموقع ما اقدر اضيف اداة جديدة في التخطيط...وضعت السؤال بقسم الأسئلة الشائعة + وضعت صورة لمعاينة التخطيط... من فضلك هل من حل؟ وشكرا
اعتذر على التأخير بالرد
حذفالسبب إن الإضافات موجود في القالب و اكواد الخاصة بادوات التخطيط غير صحيحة في القالب
لذلك يجب مسح الإضافات من اكواد القالب بشكل يدوي و إضافة اكواد تخطيط جديدة حتى يعمل معك كل شيء بشكل صحيح
المعنى انه لا يوجد للمشكلة .. =v
حذفعلى كل حال اخ منير هل استطيع اضافة اداة عدد الزوار من القالب؟ بالتعديل على HTML
دون الحاجة للتخطيط؟
تحياتي
القوالب التي مثل هذه يكون لا يوجد بها مشاكل
حذفولكن ما قام بإعادة تصميم القالب قام بنسخ الاكواد نسخ و لصق
مما أدى إلى نسخ الادوات و الإضافات هكذا
انت تستطيع إضافة عداد الزوار
ولكن صراحة لا اعرف كيف سوف اشرحها
ولكن الافضل ان تقوم بإضافة اداة للتخطيط من القالب بعدها الدخول إلى التخطيط و إضافة الاداة بشكل طبيعي
شكرا ياغالي
حذفولكن الافضل ان تقوم بإضافة اداة للتخطيط
ما طريقة اضافتها ؟
قم بإضافة هذا الكود
حذف<div style='clear: both;'/>
<b:section class='cnsec' id='cnsec' maxwidgets='1' showaddelement='yes'/>
<div style='clear: both;'/>
في المكان الذي تريد ان تقوم بجعل الإضافة به
مع تغيير cnsec بمعرف الادوات في قالبك
تعبتك معي اخي =x
حذفاريد الاضافة اسفل القالب ... اين اضع الكود ؟
تغيير cnsec بمعرف الادوات في قالبك...لم افهم =d ماهو معرف ادوات قالبي
الله يعينك +x
اخي طبقت ما قلته لي.. تم اضافة قسم بالتخطيط صحيح ولكن عندما اضغط اضافة اداة لا استطيع :(
حذفلا عادي ولا يهمك يا غالي
حذفاضف الكود التالي فوق ]]>
#cnsec {width:100%; display:block; margin:10px 5px;}
#cnsec h2 {display:none;}
و اضف الكود الذي اعطيتك إياه في المكان الذي تريده
بعدها ادخل التخطيط و انظر إلى المكان الخاص بالإضافة اي يوجد
المشكلة لا استطيع إفادتك بالمكان ولكن
جرب إضافة الكود فوق <div id='copyright'>
جربت كله ... مافي فائدة
حذفشكرا على كل حال ماقصرت ياغالي
المشكلة انت لم تعرف كيفية تركيب الادوات
حذفلهذا لا يوجد فائدة
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفاعتذر لمسح التعليق
حذفتم الرد هنا و الرد في قسم الاسئلة
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفصديقي هنا لا يتم نشر هاشتاغ الحملة
حذفموضوع جميل تسمح لي ان اكون من الزائرين الدائمين للمدونة
ردحذفاهلاً صديقي
حذفأنت من أول يوم لك في المدونة وأنت من أصحاب المدونة وليس من الزائرين
احترامي وتقديري لشخصك الكريم =r
يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r