إجعل المشاركات الشائعة تظهر بحلة جديدة و بألوان رائعة

إجعل المشاركات الشائعة تظهر بحلة جديدة و بألوان رائعة

في درسنا اليوم سنتعلم مع بعض كيف نغير او نضيف خاصية تغير المشاركات الشائة من حلتها القديمة الى الوان تزين مدونتك لكي تعجب الزوار حتى لا أطيل عليكم نبدأ درسنا 

1.لوحة التحكم

2.إضغط على قالب

3. ثم تحريرhtml

4.إبحث بالضغط على   CTRL+F عن الكود التالي :   ]]></b:skin>  

كما في الصورة 

ثم ننسخ الكود التالي  ونضعه اسفل b:skin مباشرة

/* Popular Post keren warna-warni */ .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;} .PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px} .PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}

ثم نحفض القالب ونذهب للتحقق في المدونة 

والف مبروك : لاتنسى إضافة تعليق حتى تشجعنا للأحسن

تابع أيضًا: مكتبة إضافات بلوجر

الصفحة الئيسية