كن مهووس: تغير شكل المشاركات الشائعة لشكل بسيط
اهلا بكم زوار ومتابعى مدونة كن مهووس. اضافة بسيطة معنا اليوم وهى المشاركات الشائعة مثل مدونتنا وهى بسيطة فى التصميم وبالوان وتاثيرات جميلة وبسيطة تعطى جمالية على معظم القوالب
اتيت لكم بتنسيق متطور لآداة المشاركات الشائعة وهى واحدة متعددة الألوان وبسيطة لمحبي الأنماط الكلاسيكية وايضا سيتم شرح طريقة تعديل الوانها لتتناسب مع مدونتك اضافة الى انهما يحتويان ترقيم وايضا هما منسجمة مع اوضاع المشاركات الشائعة , كما نعرف اضافة المشاركات الشائعة بها خيارات منها ما يتيح عرض صورة مصغرة , منها ما يتيح عرض مقتطف , او عرض العنوان فقط وفي الغالب عند محاولة التعديل على اى منها قد يسبب تشوه في الإضافة لكن هذه منسجمة مع جميع الأوضاع
الخطوة الاولى
- خذ نسخة احتياطية من القالب لتجنب حدوث اى مشاكل او اخطاء (لوحة التحكم => قالب => نسخ احتياطى / استعادة => تنزيل النموذج الكامل)
- افتح القالب من تحرير html
- ابحث عن </head> ثم اضف الكود التالى فوقه
<style>
/* CSS Popular Posts */
.PopularPosts .widget-content ul{list-style-type:none;overflow:hidden;} #PopularPosts1 ul li .item-thumbnail{overflow:hidden;float :left;margin-right:10px;} #PopularPosts1 img {overflow:hidden;width : 72px;height:72px;-ms-transform: scale(1.0);-webkit-transform: scale(1.0);-moz-transform: scale(1.0);transform: scale(1.0);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;} #PopularPosts1 img:hover{-ms-transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;} .PopularPosts .widget-content ul li{position :relative;padding:0;margin:10px auto;width: 97%!important;right: -9px;} .PopularPosts .widget-content ul li:first-child {margin-top:0;} .PopularPosts .widget-content ul li:last-child {margin-bottom:0;} .PopularPosts .widget-content ul li:nth-child(1){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(202,220,85,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(2){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(243,93,92,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(3){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(10,151,181,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(4){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(15,203,205,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(5){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(16,170,206,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(6){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(202,220,85,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(7){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(243,93,92,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(8){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(10,151,181,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(9){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(15,203,205,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(10){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(16,170,206,0.8);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li a{color:#525f6a;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li a:hover{color: #4188D2;} .PopularPosts .widget-content ul li:hover:nth-child(1),.PopularPosts .widget-content ul li:hover:nth-child(2),.PopularPosts .widget-content ul li:hover:nth-child(3),.PopularPosts .widget-content ul li:hover:nth-child(4),.PopularPosts .widget-content ul li:hover:nth-child(5),.PopularPosts .widget-content ul li:hover:nth-child(6),.PopularPosts .widget-content ul li:hover:nth-child(7),.PopularPosts .widget-content ul li:hover:nth-child(8),.PopularPosts .widget-content ul li:hover:nth-child(9),.PopularPosts .widget-content ul li:hover:nth-child(10){background:#fff;} .PopularPosts .item-thumbnail{padding:0;margin:0;} .PopularPosts .item-title {color:#b2b5be;font-weight:400;font-size:12px;padding:5px;} .PopularPosts .item-snippet {display :none;font-size:12px;color:#b2b5be;overflow:hidden;text-align:justify;}
.PopularPosts .widget-content ul li:last-child{margin-bottom:10px}
</style>
الخطوة الاخيرة
- احفظ القالب
اذا واجهتك مشكلة او للاستفسار فباب التعليقات مفتوح وكذلك ركن الاسئلة للطلبات والشات
تصفح المواضيع
مواضيع ذات صلة
الافضل خلال الاسبوع
-
السلام عليكم اصدقائى. اليوم درس مهم باضافة اهم وهذة الاضافة يتم تطويرها على مدى الايام. وقمنا بانشاء تعريف الكاتب بشكل منزلق وحازت اعجاب...Read More
-
السلام عليكم احبائى الكرام. اليوم قالب جميل ورائع جدا يعرض على متجر بيكاليكا وهو اليوم مجانا لكم حيث قام بتكويده جهاد خزاعى الذى كان من...Read More
-
السلام عليكم ورحمة الله وبركاته. عاملين ايه يا شباب ان شاء الله تكونوا بخير, الحمدالله رجعنا مرة تانية بعد غياب طويل جدا طبعا بسبب فترة ...Read More

اخبار الهواتف الذكيه
فريق العمل
عن المدونة
تكويد وتطوير
1 التعليقات:
اين الرابط
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا
محول الاكواد الابتسامات