المشاركات الشائعة بشكل احترافى مع تاثيرات الصور والوان مختلفة مميزة

فى التدوينة السابقة وضعت لكم شكل بسيط لأضافة المشاركات الشائعة من خلال هذا الرابط : اضافة المشاركات الشائعة بشكل بسيط وانيق الى مدونة بلوجر POPULAR POSTS 

اضافة اليوم عبارة عن شكل مميز يحتوى على الترقيم مع تعدد الالوان وتأثيرات على الصور اثناء وضع مؤشر الماوس .

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

صورة لشكل الاضافة بعد التركيب :

كيفية تركيب الاضافة على المدونة :

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

الأن نأتى الى المرحلة الاخيرة وهى اضافة الكود :

قم بالبحث عن هذا الكود :

]]></b:skin>

ضع قبلة مباشرة هذا الكود :

<!-- Popular posts multi colored UI theme -->

#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:97%}

#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;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:13px;color:#444;text-decoration:none}

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

#PopularPosts1 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;

}

#PopularPosts1 img:hover {

border-radius: 0 0 0 0;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

<!-- popular posts multicolored UI theme -->

بالأخير اضغط على حفظ 

توجهة الى الصفحة الرئيسية لتشاهد النتيجة 

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

(( لا خير فى كاتم العلم ))