السلام عليكم ورحمه الله و بركاته اهلاً ومرحباً بكم فى تدوينة جديدة فى قسم إضافات بلوجر او مايعرف بقسم تطوير منصة بلوجر نقدم لكم اليوم شكل حصرية لقائمة التسميات ويمتاز بانه منظم و جميل مع تاثير حركى جميل عند التمرير عليه و اكواد خفيفة نظيفة خالية من الأخطاء كما انه يبتعد تماماً عن الشكل التقليدى للتسميات فى بلوجر ويمتاز بشكل جذاب يلفته إنتباه الزائر الذى نحن كمدونين نسعى لإرضائه بكل الطرق اقدم لكم اليوم الكود الذى برمجته بمعرفتى وقد حلاولت جعل الشرح مبسط ومفهوم حتى يستطبع العديد من المدونين فهمه والتعامل معه
قبل كل شىء يجب عليك عمل نسخة إحتياطية لقالبك حتى تتجنب الخطر الذى يقع عليك إن وقع خطأ اثناء التؤكيب وتستعيد إستعادة موقعك بالشكل الطبيعى
- نذهب إلى قالب >> تحرير Html >> ونبحث عن الوسم
]]></b:skin> - ثم نضع الكود التالى فوقه
/* 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 */
ليست هناك تعليقات:
إرسال تعليق