المشاركات الشائعة بشكل مميز مع الترقيم

أداة المشاركات الشائعة من أهم الأدوات التى تقدمها منصة بلوجر ، فهى تعرض للزائر أشهر المواضيع فى المدونة مما يسهل على الزائر الوصول إلى أفضل ما لديك فى المدونة لأنه يحقق أكبر نسبة مشاهدات فى المدونة ولكن شكل المشاركات الشائعة قد تكون تقليدية للغاية فى بعض القوالب ، فاليوم أقدم لكم شكل احترافى للغاية للمشاركات الشائعة مع الترقيم والأن مع شرح التركيب 

♦ معاينــــــــــــــــة ♦

شرح التركيـــب 

اذهب للوحة تحكم مدونتك >> القالب >> تحرير 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

♦  الكود المسئول عن لون الخط >>
color: #FFFFFF

♦  الكود المسئول عن عرض الموضوع فى الأداة >>
 width: 90%

اذا واجهتك أى مشكلة فلا تتردد فى ترك تعليق بها