المشاركات الشائعة بشكل مميز مع الترقيم
أداة المشاركات الشائعة من أهم الأدوات التى تقدمها منصة بلوجر ، فهى تعرض للزائر أشهر المواضيع فى المدونة مما يسهل على الزائر الوصول إلى أفضل ما لديك فى المدونة لأنه يحقق أكبر نسبة مشاهدات فى المدونة ولكن شكل المشاركات الشائعة قد تكون تقليدية للغاية فى بعض القوالب ، فاليوم أقدم لكم شكل احترافى للغاية للمشاركات الشائعة مع الترقيم والأن مع شرح التركيب
شرح التركيـــب
اذهب للوحة تحكم مدونتك >> القالب >> تحرير HTML
ابحث عن ]]></b:skin>
ثم ضع قبلها الكود التالى
.popular-posts ul li a {background: none repeat scroll 0 0 #222222;color: #FFFFFF;display: block;padding: 25px 15px 25px;position: relative;text-decoration: none;transition: all 0.3s ease-out 0s;width: 90%;}.popular-posts ul li a:before {background: none repeat scroll 0 0 #2DB3E9;color: #FFFFFF;font-weight: 700;height: 2em;line-height: 2em;margin-right: 88%;padding: 4px;position: absolute;text-align: center;width: 2em;transition: all 0.2s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;}.popular-posts ul li a:hover {opacity: 0.8;}.popular-posts ul li a:hover:before {border-left-color: #CCCCCC;left: -1px;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {content: "10";}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {content: "9";}.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {content: "8";}.popular-posts ul li:first-child + li + li + li + li + li + li a:before {content: "7";}.popular-posts ul li:first-child + li + li + li + li + li a:before {content: "6";}.popular-posts ul li:first-child + li + li + li + li a:before {content: "5";}.popular-posts ul li:first-child + li + li + li a:before {content: "4";}.popular-posts ul li:first-child + li + li a:before {content: "3";}.popular-posts ul li:first-child + li a:before {content: "2";}.popular-posts ul li:first-child a:before {content: "1";}.item-snippet {display: none;}.PopularPosts .item-thumbnail {display: none;}
ملاحظات على الكود السابق
♦ الكود المسئول عن لون الخلفية >>
background: none repeat scroll 0 0 #222222
background: none repeat scroll 0 0 #222222
♦ الكود المسئول عن لون الخط >>
color: #FFFFFF
color: #FFFFFF
♦ الكود المسئول عن عرض الموضوع فى الأداة >>
width: 90%
width: 90%
اذا واجهتك أى مشكلة فلا تتردد فى ترك تعليق بها
من فضلك اضغظ لايك لمشاهدة لينك التحميل
مجهود رائع حقيقتا
ردحذفتسلم اخ نزار على هذا المرور العطر
حذفموضوع رائع يستحق التقدير.
ردحذفشكرا لمرورك المشرف اخ ياسين
حذفشكراً على المجهود المبذول أخـ محمود
ردحذفشكرا لمرورك اخى
حذف