بسم الله الرحمان الرحيم
السلام عليكم ورحمة الله وبركاته
مرحبا بالجميع في درس جديد اليوم سوف نشرح كيفية اضافة : ترقيم التعلقيات جانب عناوين المقالات
لنبدا على بركة الله اولا نقوم بالخطوات التالية :
نحمل نسخة احتياطية للقالب وهذا ضروري
ثم نتجه Layout > Edit HTML ونوسع القالب كما هو مببين في الصورة :
ثم نبحث عن
]]></b:skin>
قبلها مباشرة نضيف
.comment-bubble {
float : right;
width : 48px; height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJmpxHL2X6ok9F7Njb50BiHzo3OlXsHV5LPf5s5TR6rT4B7EIh9E4XOGYl6A9cuXSqrrY0XMFonhK12uHlFqD5e06vNEz1z-HTzypqsqSOYjNLsd6CUCBF_pzxWck9R5PfbnHwqqk2RJm/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/AVvXsEgCJmpxHL2X6ok9F7Njb50BiHzo3OlXsHV5LPf5s5TR6rT4B7EIh9E4XOGYl6A9cuXSqrrY0XMFonhK12uHlFqD5e06vNEz1z-HTzypqsqSOYjNLsd6CUCBF_pzxWck9R5PfbnHwqqk2RJm/s1600/Comment+Bubble+%2815%29.png) no-repeat;
الخلفية الافتراضية هي
وهذه خلفيات جاهزة لمن ارد التغيير
0 التعليقات:
إرسال تعليق