تغيير شكل المشاركات الشائعة V1

تغيير شكل المشاركات الشائعة V1

اهلا بكم أحبابي الكرام وزوار ومتتبعينا 🙌 عدنا لكم بدرس جديد خاص ببلوجر وهو حول تغيير شكل المشاركات الشائعة الى شكل جديد واحترافي يحتوي على ترتيب المشاركات من 1 الى 10 مع الوان جذابة وتصميم أنيق والكثير من المدونين يحتاجون الى تغيير شكل المشاركات ليبدو قالبهم اكثر جمالية, ستجدون المعاينة في الاسفل لن اطيل عليكم الحديث كثيرا يا اصدقاء وطريقة التركيب جد بسيطة وسهلة ← تابعو معي ↓

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

معاينة

شرح طريقة التركيب 

1. أولا عليك الذهاب الى تحرير قالب مدونتك
2. ثم ابحث عن الوسم ]]></b:skin>
3. وضع فوقه الأكواد التالية

.popular-posts {
background: none;
box-shadow: none;
}
 .popular-posts ul {
padding: 0px;
}
 .popular-posts ul li {
    padding: 0px;
    background: #fff;
    box-shadow: 0px 0px 2.5px -2px #000;
    float: left;
    width: 50%;
}
 .popular-posts ul li:last-of-type {
border-bottom: none;
}
 .popular-posts ul li .item-thumbnail {
margin: 0px;
width: 100%;
}
 .popular-posts ul li .item-thumbnail a {
    display: block;
    width: 100%;
    height: 135px;
    padding: 0px;
}
 .popular-posts ul li .item-thumbnail a:before {
    position: absolute;
    z-index: 1;
    background: #366299;
    width: 43%;
    height: 135px;
    opacity: 0.5;
    text-align: center;
    line-height: 135px;
    font-size: 50px;
    color: #FFFFFF;
    font-weight: bold;
}
 .popular-posts ul li:first-of-type .item-thumbnail a:before {
background: #f00;
content: "1";
}
 .popular-posts ul li:nth-of-type(2) .item-thumbnail a:before {
content: "2";
}
 .popular-posts ul li:nth-of-type(3) .item-thumbnail a:before {
content: "3";
}
 .popular-posts ul li:nth-of-type(4) .item-thumbnail a:before {
content: "4";
}
 .popular-posts ul li:nth-of-type(5) .item-thumbnail a:before {
content: "5";
}
 .popular-posts ul li:nth-of-type(6) .item-thumbnail a:before {
content: "6";
}
 .popular-posts ul li:nth-of-type(7) .item-thumbnail a:before {
content: "7";
}
 .popular-posts ul li:nth-of-type(8) .item-thumbnail a:before {
content: "8";
}
 .popular-posts ul li:nth-of-type(9) .item-thumbnail a:before {
content: "9";
}
 .popular-posts ul li:nth-of-type(10) .item-thumbnail a:before {
content: "10";
}
 .popular-posts ul li .item-thumbnail img {
padding: 0px;
width: 100%;
height: 100%;
}
 .popular-posts ul li .item-title {
    padding: 7px;
    float: right;
    width: 100%;
    height: 72px;
    background: #fff;
    text-align: center;
    line-height: 18px;
}
 .popular-posts ul li .item-title a {
font-size: 15px;
    color: #565353;
    font-weight: bold;
}
.PopularPosts .widget-content ul li {
    padding: 0;
}

* ملاحظة هامة : تأكد اولا من حذف ستايل المشاركات الشائعة القديمة

1. ثم احفظ القالب أخي الكريم
2. ومبروك عليك الشكل الجديد للمشاركات الشائعة