comment تمييز تعليق الكاتب عن بقية التعليقات بشكل جديد ومطور

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

قبل الشروع هذه صورة أولية تجسد الفكرة.

تمييز تعليق الكاتب عن تعليقات مدونات blogger

نأتي إلى الشرح :

وكما تعلمنا من لوحة التحكم انتقل إلى صفحة التخطيط ثم " تحرير HTML "

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

ضع علامة في خانة توسيع القوالب >> ثم ابحث عن هذا الكود :

]]></b:skin>

و فوقه مباشرة ضع ما يلي:

.blog-author-comment {
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
width: 490px;
background: #e4f3f8;
border-right: 2px solid #759dc0;
border-left: 2px solid #759dc0;
border-bottom: 2px solid #759dc0;
border-top:0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}

شرح الكود :

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

لـ اضافة تمييز تعليق بهذا الشكل اختار الكود التالي بدل الكود السابق :

الكود >>

.blog-author-comment {
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
width: 490px;
background: #e4f3f8;
border-right: 2px solid #759dc0;
border-left: 2px solid #759dc0;
border-bottom: 2px solid #759dc0;
border-top:0px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}

ثم تبحث عن هذا الكود (Ctrl+F) >> ابحث فقط عن جزء منه لتتمكن من تحديده كاملا .

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</dd>

قم بتحديده كاملآ ثم استبدله بهذا الكود :

<b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
<data:comment.body/>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</dd>
</b:if>