اضافة ترقيم التعليقات بجانب العناوين

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

السلام عليكم ورحمة الله وبركاته 

مرحبا بالجميع في درس جديد اليوم سوف نشرح كيفية اضافة : ترقيم التعلقيات جانب عناوين المقالات كما في مدونة علمني :

 لنبدا على بركة الله اولا نقوم بالخطوات التالية :

نحمل نسخة احتياطية للقالب وهذا ضروري

ثم نتجه Layout > Edit HTML ونوسع القالب كما هو مببين في الصورة :

ثم نبحث عن 

]]></b:skin>  

قبلها مباشرة نضيف 

.comment-bubble {

float : right;

width : 48px;
 height : 48px;

background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtezfaNtl6VW_x8Cy_6aZbrbVkSJLwnQvUWp6jQ3QqK233_WEjGs8nCd1eKV8Ix7hyphenhyphen1MpIuFnekdUUYaUeugGwaYJjb2kSdBzaFMtM9Z-BpaYqgNBWFOQSn9UoyCt-OVay_yy-RofEDJg/s1600/Comment+Bubble+%2815%29.png) no-repeat;

font-size : 18px;

margin-top : -15px;

margin-right : 2px;

text-align : center;

position:absolute;

}

 ثم ابحث عن هذه الاسطر 

<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'>

بعد ذلك نتجه الى السطر 

<h3 class='post-title entry-title'> 

مباشرة امامه نضيف الاسطر التالية 

<b:if cond='data:post.allowComments'>

<a
 class='comment-bubble' expr:href='data:post.addCommentUrl' 
expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if>

لتصبح النتيجة في الاخير

<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='comment-bubble' 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>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if> 

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

background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtezfaNtl6VW_x8Cy_6aZbrbVkSJLwnQvUWp6jQ3QqK233_WEjGs8nCd1eKV8Ix7hyphenhyphen1MpIuFnekdUUYaUeugGwaYJjb2kSdBzaFMtM9Z-BpaYqgNBWFOQSn9UoyCt-OVay_yy-RofEDJg/s1600/Comment+Bubble+%2815%29.png) no-repeat;

الخلفية الافتراضية هي

وهذه خلفيات جاهزة لمن ارد التغيير