السلام عليكم ورحمة الله وبركاتة زوار ومتابعي مدونة تقارب..تدوينتي اليوم قررت كتابتها فور انتهائي من تطبيقها على مدونتي اولا وهى كما يوضح عنوان التدوينه مجرد تعديل على قالب المدونه نستطيع من خلاله تمميز تعليق كاتب التدوينه عن باقي تعليقات القراء
والشئ الثاني والاهم هو انه يمكنك من وضع ايكونه او صوره صغيره مثل ما ترى اسفل الموضوع حيث يتم وضع ايكونه صغيره داخل تعليق صاحب المدونه تدل على ان التعليق كاتب التدوينه هو صاحبه بالاضافه طبعا الي لون مغاير لصنودق تعليقه ومختلف عن باقي الوان صناديق االتعليقات الاخرى المكتوبه من قبل القراء,,,جميعا نعلم اهمية تلك الاضافه فبجانب انها تضفي على المدونه جوا من الاناقة والاحترافيه فهي ايضا تميز تعليق كاتب التدوينه كى يتمكن من يريد مساعدته من تتبع تعليقاته ومايقوله.. بالتاكيد قد اعجبتك تلك الاضافه والتعديل بعد ان رائيتها في مدونتي المتواضعه تقارب..هيا بنا معا نطبقها سويا مرة اخرى ولكن على مدونتك انت:
الخطوه الاولى: اذهب الي لوحة تحكم بلوجر > تصميم > تحرير HTML  ولا تنسى نسخه احتياطيه من قالب مدونتك اخذ تحسبا لوقوع اخطاء اثناء التطبيق.
الخطوه الثانيه: اضغط على علامة “توسيع قوالب واجهة المستخدم”.
الخطوه الثالثه: اضغط “Ctrl+F” وقم بالبحث عن السطر الازرق فقط من الكود الذي بالاسفل :

         

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</b:loop>

ثم قم بتظليله بالكامل حتى تصل الي نهايته المعلمه باللون الازرق ايضا وهي تلك  “</b:loop>” (ثم قم باستبداله وتغييره بالكود الموجود بالاسفل كاملا) :

         

<b:loop values='data:post.comments' var='comment'>

<div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>


<dt class='comment-author' expr:id='data:comment.anchorName'>


<b:if cond='data:comment.favicon'>


<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>


</b:if>


<a expr:name='data:comment.anchorName'/>


<b:if cond='data:blog.enabledCommentProfileImages'>


<data:comment.authorAvatarImage/>


</b:if>


<b:if cond='data:comment.authorUrl'>


<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>


<b:else/>


<data:comment.author/>


</b:if>


<data:commentPostedByMsg/>


</dt>


<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>


<b:if cond='data:comment.isDeleted'>


<span class='deleted-comment'><data:comment.body/></span>


<b:else/>


<p>


<data:comment.body/>


</p>


</b:if>


</dd>


<dd class='comment-footer'>


<span class='comment-timestamp'>


<a expr:href='data:comment.url' title='comment permalink'>


<data:comment.timestamp/>


</a>


<b:include data='comment' name='commentDeleteIcon'/>


</span>


</dd>


</div>

</b:loop>

الخطوه الرابعه: ابحث عن هذا الكود ]]></b:skin> وضع الكود الموجود بالاسفل قبله مباشرة:

.comment-footer{

margin-bottom:0 !important;

}

.author-comment{

background-color:#F0FFF0;

padding:5px;

margin-bottom:1.5em;

border:1px solid #ccc;

border-radius:10px;

}

.author-comment.blog-author {

background: #FFEBCD url(https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png) no-repeat right top;

}

ارجو ان يكون درس اليوم حاز على اعجاب الجميع ,, اى استفسار يرجا ترك تعليق بالاسفل !!