جعل المشاركة الشائعة ملونة بشكل احترافي

في هذا البرنامج التعليمي حول كيفية جعل المشاركات الشائعة لمدونتك اكثر احترافية باضافة الوان باردة مثل الصورة في الاعلى .

المهم تتبيت هذه الاضافة الى مدونتك باتباع الخطوات البسيطة التالية :

1. لوحة التحكم
2. إضغط على قالب
3.  ثم تحريرhtml
4. إبحث بالضغط على CTRL+F عن الكود التالي : ]]></b:skin>
5. ثم ضع قبله الكود Css التالي مباشرةً :

/* 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}

ان اعجبكم الموضوع لا تنسى مشاركته مع اصدقائك لتعم الفائدة .