الخميس، 8 يونيو، 2017

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

فى التدوينة السابقة وضعت لكم شكل بسيط لأضافة المشاركات الشائعة من خلال هذا الرابط : اضافة المشاركات الشائعة بشكل بسيط وانيق الى مدونة بلوجر 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 -->
بالأخير اضغط على حفظ 
توجهة الى الصفحة الرئيسية لتشاهد النتيجة 
اتمنى بأن اضافة المشاركات الشائعة بشكل احترافى مع تاثيرات الصور والوان مختلفة مميزة اعجبتكم وانتظرونى فى تدوينة واضافة جديدة ان شاء الله .
(( لا خير فى كاتم العلم ))

ليست هناك تعليقات :

إرسال تعليق

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الموافقة على نشر التعليقات

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