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

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

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

الان مع شرح لكيفية اضافة الاداة

كل ما هو عليك فقط ان تذهب الي لوحة تحكم المدونة / القالب / تحرير html

 وبعد ذالك نبحث عن </b:skin>

 ونضع فوقها هذا الكود ونضغط علي حفظ النموذج

_____________________________________________

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

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

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

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

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

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

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

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

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

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

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

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

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

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#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{background:#f59095;width:69%}

#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 +li{background:#c7f25f;width:66%}

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

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + 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:after,

#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

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

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts3 img{-moz-border-radius: 130px;-webkit-border-radius: 130px;border-radius: 130px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;padding:4px;border:1px solid #fff !important;background: #F2F2F2;}#PopularPosts1 img:hover {-moz-transform: scale(1.2) rotate(-560deg) ;-webkit-transform: scale(1.2) rotate(-560deg) ;-o-transform: scale(1.2) rotate(-560deg) ;-ms-transform: scale(1.2) rotate(-560deg) ;transform: scale(1.2) rotate(-560deg) ;}

_____________________________________________

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