آخر الأخبار
قتاتنا على اليوتيوب

عرض المشاركات الشائعة في بلوجر بطريقة رائعة وجديدة 2018



    قم بتغيير شكل المشاركات الشائعة على مدونة بلوجر بشكل شبكة جميل جدا مناسب على الجوال والكمبيوتر 


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

    1. من لوحة التحكم في مدونتك إذا لم تكن لديك أداة المشاركات الشائعة في مدونتك قم بإضافتها في الشريط الجانبي من خلال التخطيط ثم أنقر على إضافة أداة ثم أختر أداة المشاركات الشائعة ثم قم بتحديد الإعدادات للأداة كما بالصورة التالية وانقر على حفظ:

    2. الآن إنتقل إلى المظهر أنقر على تحرير html ثم أنقر نقرة بزر الماوس على الأكواد في القالب ثم أنقر على مفتاح الإختصار في لوحة مفاتيح الكمبيوتر ctrl و F ثم أدخل في مربع البحث الرمز
    ]]>

    3. قم بإضافة الكود التالي فوق الرمز ]]> مباشرةً

    #PopularPosts1{width:300px}
    .PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;counter-reset:popcount}
    .PopularPosts .widget-content ul li{padding:0;height:90px;overflow:hidden;position:relative;width:calc(50% - 5px);float:right;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .PopularPosts .widget-content ul li:nth-child(odd){margin:0 5px 10px 0;}
    .PopularPosts .widget-content ul li:nth-child(even){margin:0 0 10px 5px;}
    .PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;font-size:12px;font-weight:500;}
    .PopularPosts .widget-content ul li:hover .item-title{bottom:0}
    .PopularPosts .widget-content ul li:hover img{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
    .PopularPosts .widget-content ul li img{width:100%;height:90px;padding-left:0;transition:all .6s ease-in-out;}
    .PopularPosts .item-thumbnail{float:none;margin:0 0 -4px}
    .PopularPosts .item-title{padding:5px;position:absolute;bottom:-200px;right:0;left:0;text-align:right;background:rgba(0,0,0,.5);transition:all .3s ease-in-out;line-height: 1;}
    .PopularPosts .item-thumbnail:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;width:30px;height:30px;line-height:30px!important;text-align:center;background:rgba(0,0,0,.5);right:0;top:0;color:#fff;font-size:20px;font-weight:900;line-height:1;z-index:2}
    .PopularPosts .item-title a:hover{color:pink}
    .PopularPosts .item-snippet{display:none}
    .PopularPosts .widget-content ul li:hover .item-title{bottom:0px}

    4. الآن حدد من الإنتقال إلى أداة أداة PopularPosts1 حددها وقم بحذفها ثم أضف الكود التالي بدلًأ منها كما بالصورة التالية:
    إستبدلها بالكود أدناه


    10
    true
    false
    ALL_TIME







    بعد ذلك يمكننا حفظ المظهر لنحصل على شكل رائع للمشاركات الشائعة
    إذا ظهرت لديك بشكل غير المعاينة تحقق بأنه لا يوجد رموز CSS أخرى قديمة غير التي اضفتها بالبحث عن السمة PopularPosts1 الخاصة بالمشاركات الشائعة.

    بأمان الله 👍😍




    شارك المقال
    mounir
    كاتب ومحرر اخبار اعمل في موقع العالم الرقمي .

    مقالات متعلقة

    إرسال تعليق