طريقة اضافة زر عداد التعليقات لمدونات بلوقر

قراءة للموضوع

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

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

اضغط الصورة للتكبير

اذاً دعونا نبدا على مرحلة مرحلة كيف تظيف زر عداد للتعليقات على شكل فقاعة او اي شكل آخر ؟  :

1 - من لوحة تحكم مدونتك ادخل على تبويب ( قالب ) ومن ثم ( تحرير HTML ) وبعدها انقر على ( متابعة ) ثم اعمل علامة صح على توسيع قوالب عناصر واجهة المستخدم . 

2 - ابحث علة الكود التالي باستخدام مفتاح ( CTRL+F )  : -

]]></b:skin>

3 - قم بنسخ الكود التالي ثم الصقة فوق الكود نمره 2 مباشرة  :

.comments-button {
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5j6UCC5kFGuVDCDJtFGh_OwYAgdH0wyKgWhyphenhyphenUsoQGpXTnvaD35fReYClHxopn-jAx39CPzS7idMNtIKJUniqtfULLLR0kDa8MsNEkP1LfUl7BEY4EZ_u5leaNXY9rQT_z-1n7elfIKsXj/s200/comment-counter-bubble.png) no-repeat;
float : left;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;

ملاحظة :

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

اللون الاحمر : هو اتجاة زر التعليقات الى اليسار امام عنوان الموضوع مباشرة كما هو موضح في الصورة الاولى في مقدمة الدرس بامكانك تختار اتجاه ( right ) اذا رغبت . انظر الصورة التالي :

اضغط الصورة للتكبير

4 - ابحث عن الكود التالي في مدونتك بواسطة مفتاح البحث ( CTRL+F ) :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

يمكن البحث عن هذا الكود باستخدام السطر الاول من الكود الذي باللون الاحمر ومن ثم التاكد ان الكود اعلاه موجود في مدونتك كما هو. انظر الصورة التالية : 

اضغط الصورة للتكبير

5 - قم بنسخ الكود التالي وضعه كما هو مبين في الصورة التالي :

<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

الصورة توضع كيفية وضع الكود خطوة 5 في كود خطوة 4 :

يعني بحيث يصبح الكود على الشكل  التالي :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

* اللون الاخضر هو الكود الذي قمنا بالبحث عنة في خطوة رقم 4 ثم وضعنا الكود خطوة رقم 5 بداخلة الذي يرمز له باللون الاحمر .

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

اضغط الصورة للتكبير

6 - واخيرا قم بعملية حفظ للقالب وافتح صفحة مدونتك الرئيسية لتشاهد زر التعليقات على شكل فقاعة امام العناوين الريسية .

ومبروووك عليكم الاضافة ،،، وماعليكم سوى الدعاء الصالح بظهر الغيب لأخيكم العبد الفقير لله صاحب المدونة 

واي سؤال او استفسار نرحب بها في التعليقات ،،،