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

بسم الله الرحمان الرحيم 


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

والان خطوات الشرح :


الخطوة الاولى : نذهب الى قائمة ( تخطيط ) ثم ( تحرير HTML ) ثم نقوم بتوسيع القالب . انظر الصورة :

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

الخطوة الثانية : نقوم بالبحث ( CTRL+F ) عن الكود التالي :

]]></b:skin>

ثم نضع فوقه مباشرة هذا الكود :

.author-comments {
background: #99C9FF;
border: 3px solid #99C9FF;
padding: 5px;

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



الخطوة الثالثة : نقوم بالبحث الكود التالي :

<dd class='comment-body'>

ثم نضع فوقه الكود التالي مباشرة :

<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>

ثم نبحث عن الكود هذا :

<dd class='comment-footer'>

ثم نضع فوقه الكود التالي :

</b:if>

خلاصة الشرح :

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

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>

</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

ثم نقوم بالضغط على زر حفظ ومبروك عليك ،،،،

تكبير حجم خط التعليقات

نقوم بالبحث عن ( COMMENTS ) وبعدها ندور ونبحث في الاكواد بتاعها حتى نلاقي الكود التالي :

#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;

ثم نضيف لها كود حجم الخط كالتالي :

font-size: 150%;

اللون الاحمر هو حجم الخط قم بتغيير اذا شئت

خلاصة الشرح :

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

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 160%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
font-size: 150%;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 100%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */

* اللون الاخضر : الكود الذي نبحث عنه علشان نقوم بتكبير الخط
* اللون الاحمر : الكود الذي قمنا باضافته ( كود حجم الخط )