كيفية إضافة ترقيم التعليقات في مدونات بلوجر بشكل جميل و احترافي + مجموعة كبيرة من الأيقونات

مرحبا بكم من جديد في مدونة أفكار برو، اليوم بإذن الله سنتعلم سوياً في الأسطر القادمة طريقة ترقيم تعليقات مدونة البلوجر بطريقة بسيطة و بتقنية CSS، و ستكون على شكل أيقونات صغيرة بجوار التعليق.

لنبدأ على بركة الله

1- توجه إلى لوحة تحكم البلوجر، و اختر تصميم

2- ثم أدخل إلى تحرير HTML  (خذ نسخة احتياطية لـلقالب قبل إجراء أية تغييرات) 

3- استعن بالضغط على CTRL+F للبحث عن :

]]></b:skin>

4- الصق الكود التالي فوقه مباشرة :

 .comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: left;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px; 
padding-top:3px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq4oDgpdcIsZP-YtbA6qJ0sSPkolEZOp64DwO5bSnNsq5rXQibuUxqI2Yw9LVg_zAi7PhFX6HILqt5HOWqrNv489St6Tw9EEQ5Vjd3jiEiomu0SxGPRopawSBACtCdJXvg3w3gpIcfFWow/s1600/afkarpro.blogspot.com_16.png) no-repeat;
margin-top:7px; 
margin-left:10px; 
width: 50px;
height: 48px; 
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: left;
font-size: 18px;
color: #666666;
}

5- الآن قم بحفظ القالب و مبروك عليك الإضافة

ملاحظات :

* لتغيير موضع الترقيم، قم بتغيير قيمتي : padding-left و padding-top

* لتغيير موضع الأيقونات، قم بتغيير قيمتي : margin-top و margin-left

* لتغيير حجم الأيقونات، قم بتغيير قيمتي : width و height

* قم بتغيير الـ float من left إلى right في كلا الموضعين في حالة المدونات الأجنبية و اتركها على حالها (left) في حالة المدونات العربية.

* إن أردت الإستغناء عن الأيقونات و الحفاظ على الترقيم لوحده، ما عليك إلا أن تمسح الكود البني و الرابط البرتقالي معا.

* لتغيير الأيقونة، ما عليك إلا أن تستبدل الرابط البرتقالي برابط الأيقونة الذي اخترته، وفي ما يلي بعض الأيقونات :



(لتغيير الأيقونة، انقر بزر الماوس الأيمن على أي أيقونة، حدد نسخ عنوان URL للصورة ثم استبدله برابط الأيقونة التي في الكود باللون البرتقالي)