من خلال هذه التدوينة البسيطة سنتعلم منها طريقة ترقيم المشاركات الشائعة بتقنية الــ css بشكل رائع وبسيط وملفت الأنتباه هذه الطريقة رايتها بأحدى المدونات الأجنبية واحببت ان اضعها لكم لمن يريد ان يضعها بالمدونة .
صورة توضح لشكل الترقيم بالمشاركات الشائعة:
كما تلاحظون بالصورة السابقة للشكل الذى اقصدة ظهور الترقيم بجانب عناوين المشاركات الشائعة .
طريقة التركيب بالمدونة :
يجب ان يضاف اولا خاصية المشاركات الشائعة بالمدونة ولكن يفضل مقتطف وليس صورة واعتقد المبتداء يعرف ان يضع خاصية المشاركات الشائعة بالمدونة .
بعد اضافة المشاركات الشائعة بالمدونة سنقوم بأضافة كود بسيط بتقنية الــ CSS قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML
الأن قم بالبحث عن هذا الكود :
]]></b:skin>
الأن ضع قبلة هذا الكود :
/*--- MBT Popular Posts --- */.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #FF3300;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #000000; }.popular-posts ul li {border-bottom: 1px dashed #dddddd;}.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}.popular-posts ul li a {text-decoration:none; color:#FF3300;}.popular-posts ul li a:hover {text-decoration:none;}
بالأخير اضغط على حفظ التغيرات وانتهى التركيب
الأن اذهب الى الصفحة الرئيسية للمدونة لتشاهد النتيجة
ملحوظة هامة :
لمن يرغب بالتعديل على الكود فعلية بعمل هذه التغييرات :
1- الكود المحدد باللون الاحمر خاص بتغيير لون المربع
2- الكود المحدد باللون الأصفر خاص بتغيير ظل المربع
3- الكود المحدد باللون الأخضر خاص بتغيير لون العناويين
شكرا لك اخي الله ينورك
ردحذف