تغيير شكل المشاركات الشائعة 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. ومبروك عليك الشكل الجديد للمشاركات الشائعة
اذا واجهتك اي مشكلة في تركيب الاضافة فباب التعليقات مفتوح اليكم وسنجيبك فور رؤية تعليقك لنحل مشكلتك
تغيير شكل المشاركات الشائعة V1

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

هناك تعليقان (2):

  1. الردود
    1. اخي لا يمكن لان هذا كود css وادا وضعته فوق الكود المطلوب في التدوينة قسيحفظ القالب فولاا

      حذف

جميع الحقوق محفوظة نكهة التقنية | تصميم : الروسافي عمر