تقنيات Pro

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

للمعاينة اضغط على زر المعاينة أسفل الصورة.

المعاينة

طريقة الإضافة

قبل البدئ قم بأخذ نسخة من قالبك

ابحث عن

قم بنسخ رمز CSS أذناه ولصقه فوق ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 25px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.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-right-color: #CCCCCC;
    right: -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;
}

ثم قم بحفظ النموذج واذهب للمعاينة

مرحبا بكم في تقنيات Pro

Med Man

أقسام الموقع

إشترك في موقعنا

المشاركات الشائعة بشكل جذاب

ليست هناك تعليقات :

إرسال تعليق

اشترك في قناتنا على اليوتوب

شائع هذا الأسبوع

تابعنا علي الفيس بوك

المشاركات الشائعة