تغيير شكل المشاركات الشائعة بشكل جميل مميز

اذا كنت ترغب بتغير شكل المشاركات الشائعة بمدونتك واضافة بعض الألوان والتأثيرات الجميلة عليها لكي تظهر لك بشكل رائع وجذاب

عماً بأن المشاركات الشائعة المقدمة من بلوجر لها نمط محدد شكل واحد عادي ثابت لا يتغير، طبعا يمكن تغيير شكلها حسب تصاميم تخص مصمم القالب. هنا سوف نقدم شكل جديد لهذه الأداة أو بالأحرى شكلين 

  نقدم لك اليوم من خلال هذا الدرس شكلين مختلفين لتغير شكل المشاركات الشائعة فاختر منها ما تفضله وقم باضافة الكود الخاص بالتأثير .

طريقة الاضافة :

1- اذهب للوحة التحكم ثم  القالب ثم  تحرير HTML ابحث عن هذا الكود التالي :

]]></b:skin>  

2-  ثم ضع فوقه كود الاضافة التى تناسبك من الشكلين التاليين 

 كود الشكل الأول :

 #PopularPosts1 ul li a:hover{color:#fff; text-decoration: none !important; margin-bottom:0 !important;}
















#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }







#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;height:51px}







#PopularPosts1 ul li:first-child:after,



#PopularPosts1 ul li:first-child + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li:after,







#PopularPosts1 ul li:first-child + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:2px;border:1px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}







#PopularPosts1 ul li:first-child + li + li + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

border-radius:0px;
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:0px 0px 0px 0px;border:1px solid #f7f7f7;-webkit-box-shadow:2px 2px 2px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {


max-width:60px;

max-height:60px;
margin-left:4px;

}

 كود الشكل الثاني :

 #PopularPosts1 ul li a:hover{color:#000; text-decoration: none !important; margin-bottom:0 !important;}
















#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }







#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;height:51px}







#PopularPosts1 ul li:first-child:after,



#PopularPosts1 ul li:first-child + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li:after,







#PopularPosts1 ul li:first-child + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}







#PopularPosts1 ul li:first-child + li + li + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}



#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}







#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li +li{width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li{width:90%}



#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{width:90%}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li {

  background:#FFFFFF;

  border: 2px solid #777777;

  border-radius: 25px 0;

margin: 6px 0;
padding: 10px;

position: relative;
}

#PopularPosts1 ul li:hover{background:#F1FBFE; border: 2px solid #06BBFD;}
#PopularPosts1 img {
border-radius:200px;
max-width:60px;
max-height:60px;

}

margin-left:4px;