الأحد، 2 فبراير 2014

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

أداة المشاركات الشائعة من أهم الأدوات التى تقدمها منصة بلوجر ، فهى تعرض للزائر أشهر المواضيع فى المدونة مما يسهل على الزائر الوصول إلى أفضل ما لديك فى المدونة لأنه يحقق أكبر نسبة مشاهدات فى المدونة ولكن شكل المشاركات الشائعة قد تكون تقليدية للغاية فى بعض القوالب ، فاليوم أقدم لكم شكل احترافى للغاية للمشاركات الشائعة مع الترقيم والأن مع شرح التركيب 
شرح التركيـــب 
اذهب للوحة تحكم مدونتك >> القالب >> تحرير 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%
اذا واجهتك أى مشكلة فلا تتردد فى ترك تعليق بها 

من فضلك اضغظ لايك لمشاهدة لينك التحميل

6 التعليقات:

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار