السلام عليكم ورحمه الله و بركاته اهلاً ومرحباً بكم فى تدوينة جديدة فى قسم إضافات بلوجر او مايعرف بقسم تطوير منصة بلوجر نقدم لكم اليوم شكل حصرية لقائمة التسميات ويمتاز بانه منظم و جميل مع تاثير حركى جميل عند التمرير عليه و اكواد خفيفة نظيفة خالية من الأخطاء كما انه يبتعد تماماً عن الشكل التقليدى للتسميات فى بلوجر ويمتاز بشكل جذاب يلفته إنتباه الزائر الذى نحن كمدونين نسعى لإرضائه بكل الطرق اقدم لكم اليوم الكود الذى برمجته بمعرفتى وقد حاولت جعل الشرح مبسط ومفهوم حتى يستطبع العديد من المدونين فهمه والتعامل معه
معاينة
/* Start CSS Label Style BY Net-Mr.Blogspot.CoM */
.widget-content.list-label-widget-content ul {padding: 0 1.25em 0 0;margin: 0;line-height: 1.2;}
.list-label-widget-content ul li { line-height: 1.8 !important; font-size: 14px; position: relative; display: block; padding: .4em 1.75em .4em 2em; margin: 0.3em -10px; background: rgba(238, 238, 238, 0.55); color: #444; -webkit-border-radius: .3em; transition: all .5s ease-out; width: auto; } .list-label-widget-content ul li:before{ content:"\f02c";font-family:'FontAwesome';position: absolute; right: -25px; top: 50%; margin-top: -1.3em; background: #797979; height: 2.5em; color: #fff; width: 2.5em; line-height: 33px; border: .3em solid rgb(255, 255, 255); text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .list-label-widget-content ul li a{ color: #444; }.list-label-widget-content ul li a:hover{ color: #fff; } .list-label-widget-content ul li:hover:before{ -webkit-transform: rotate(720deg); -moz-box-shadow: 0 0 10px #0f3,0 0 30px #0f3,0 0 50px #0f3,0 1px 3px #000!important; color: #fff; } .list-label-widget-content ul li:hover{ background: #3d85c6; color: #fff; }
/* End CSS Label Style BY Net-Mr.Blogspot.CoM */
شرح التعامل مع الإضافة وتركيبها
قبل كل شىء يجب عليك عمل نسخة إحتياطية لقالبك حتى تتجنب الخطر الذى يقع عليك إن وقع خطأ اثناء التركيب وتستطيع إستعادة موقعك بالشكل الطبيعى
- نذهب إلى قالب >> تحرير Html >> ونبحث عن الوسم
]]></b:skin> - ثم نضع الكود التالى فوقه
.widget-content.list-label-widget-content ul {padding: 0 1.25em 0 0;margin: 0;line-height: 1.2;}
.list-label-widget-content ul li { line-height: 1.8 !important; font-size: 14px; position: relative; display: block; padding: .4em 1.75em .4em 2em; margin: 0.3em -10px; background: rgba(238, 238, 238, 0.55); color: #444; -webkit-border-radius: .3em; transition: all .5s ease-out; width: auto; } .list-label-widget-content ul li:before{ content:"\f02c";font-family:'FontAwesome';position: absolute; right: -25px; top: 50%; margin-top: -1.3em; background: #797979; height: 2.5em; color: #fff; width: 2.5em; line-height: 33px; border: .3em solid rgb(255, 255, 255); text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .list-label-widget-content ul li a{ color: #444; }.list-label-widget-content ul li a:hover{ color: #fff; } .list-label-widget-content ul li:hover:before{ -webkit-transform: rotate(720deg); -moz-box-shadow: 0 0 10px #0f3,0 0 30px #0f3,0 0 50px #0f3,0 1px 3px #000!important; color: #fff; } .list-label-widget-content ul li:hover{ background: #3d85c6; color: #fff; }
/* End CSS Label Style BY Net-Mr.Blogspot.CoM */
هذا كل شىء الان توجه للتخطيط وقم بإضافة اداة التسميات و سوف يعمل معك الشكل بكل اريحية اى إستفسار لا تترد فى طرحه فى التعليقات
ملاحظة هامة : تأكد من عدم وجود اى اشكال CSS اخرى لقائمة التسميات كى لا يحدث تداخل فى الأكواد و يضيع المظهر
فى الأخير إذا اعجبك الموضوع لا تنسى ترك تعليق تحفيزى و الإشتراك فى أعضاء المدونة
دمتم فى امان الله 😃
دمتم فى امان الله 😃
شكراً لك :) اسعدنى مرورك
ردحذف