القائمة الرئيسية

الصفحات

اخر المقالات

عرض المشاركات الشائعة في بلوجر بطريقة رائعة وجديدة 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 الخاصة بالمشاركات الشائعة.

بأمان الله 👍😍




تعليقات