تمييز تعليق كاتب التدوينه عن تعليقات القراء باللون والصوره في مدونة بلوجر

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

مااعجبني في تلك الاضافه هو ماتتمتع به من الوان هادئه تتناسب مع جميع القوالب فقد قمت بوضع بعض اكواد الالوان التي تجعلك لست بحاجه الي تعديلها بما يتناسب مع قالبك ,, واكثر شئ يميز تلك الضافه والتعديل هو سهولته في التطبيق فهو عباره عن خطوتين فقط

والشئ الثاني والاهم هو انه يمكنك من وضع ايكونه او صوره صغيره مثل ما ترى اسفل الموضوع حيث يتم وضع ايكونه صغيره داخل تعليق صاحب المدونه تدل على ان التعليق كاتب التدوينه هو صاحبه بالاضافه طبعا الي لون مغاير لصنودق تعليقه ومختلف عن باقي الوان صناديق االتعليقات الاخرى المكتوبه من قبل القراء,,,جميعا نعلم اهمية تلك الاضافه فبجانب انها تضفي على المدونه جوا من الاناقة والاحترافيه فهي ايضا تميز تعليق كاتب التدوينه كى يتمكن من يريد مساعدته من تتبع تعليقاته ومايقوله.. بالتاكيد قد اعجبتك تلك الاضافه والتعديل بعد ان رائيتها في مدونتي المتواضعه تقارب..هيا بنا معا نطبقها سويا مرة اخرى ولكن على مدونتك انت:
الخطوه الاولى: اذهب الي لوحة تحكم بلوجر > تصميم > تحرير 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;

}

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

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