تغيير شكل المشاركات الشائعة V1 -->
مرحبا بكم متابعينا الاوفياء. مدير ومشرف المدونة غائب هذه الفترة, نعتذر عن عدم نشر مواضيع جديدة لكم والاجابة عن تعليقاتكم
نشكركم على تفهمكم

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

الثلاثاء، 18 أبريل 2017

3:27:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
اهلا بكم أحبابي الكرام وزوار ومتتبعي مدوزنة نكهة الأوفياء 🙌 عدنا لكم بدرس جديد خاص ببلوجر وهو حول تغيير شكل المشاركات الشائعة الى شكل جديد واحترافي يحتوي على ترتيب المشاركات من 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. ومبروك عليك الشكل الجديد للمشاركات الشائعة
اذا واجهتك اي مشكلة في تركيب الاضافة فباب التعليقات مفتوح اليكم وسنجيبك فور رؤية تعليقك لنحل مشكلتك
  1. الردود
    1. اخي لا يمكن لان هذا كود css وادا وضعته فوق الكود المطلوب في التدوينة قسيحفظ القالب فولاا

      حذف

مقالات