كونكر

30 ديسمبر، 2016

12:08

تكبير النص تصغير النص أعادة للحجم الطبيعي


تغيير شكل المشاركات الشائعة الى شكل جديد واحترافي يحتوي على ترتيب المشاركات من 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;
}

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

إرسال تعليق