الأحد، 13 يوليو 2014

كيفية تنسيق قائمة و سحابة التسميات

بقلم: BR MED يوم الأحد، 13 يوليو 2014 القسم : | 1 التعليقات
السلام عليكم،
تعتبر التسميات من بين الإضافات الأساسية في المدونة حيث من خلالها يتمكن الزائر من التنقل بين أقسام المدونة بكل سهولة و تسهل عليه معرفة تخصوصها ، إلا أن أغلب الأحيان تكون هذه الإضافة مشوهة ولا تتماشى مع القالب و غير منسقة في هذه التدوينة أحبابي في الله سوف نرى كيف يمكننا تنسيقها لتأتي ملائمة مع القالب أولا سنقوم بعرض الشكلين التي تأتي بها التسميات وهي القائمة و السحابة ، وسنشرح التنسيق على الشكلين كل واحد على حدى.
أشكال التسميات:
1- بالنسبة للقائمة
هذا هو الشكل بعد التنسيق
كل ما عليك فعله هو الذهاب للقالب و البحث عن هذا الوسم : ]]></b:skin>
وثم ضع هذا الكود فوقه مباشرة
#Label1 li {
float: right;
background:#fafafa url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/16/blue-tag-icon.png)no-repeat scroll 121px 2px;
padding: 4px 26px 5px 0px;
font-size: 12px;
display: inline-block;
border: 1px solid #d7d7d7;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
color:#aeaeae;
width:144px;
}
#Label1 li a{color:#000;}
#Label1 li:hover { background:#C9EDF9 url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/16/blue-tag-icon.png)no-repeat scroll 121px 2px;}
الرابطين باللون الأحمر هما الأيقونة
#fafafa لون الأزرار
#C9EDF9 لون الأزرار عند تمرير الماوس
#aeaeae لون الخط
 #000 لون الخط عند تمرير الماوس  
144px عرض الزر
121px  مكرر مرتين و يعني إزاحة الأيقونة  
ملاحظة هامة في حالة  تغير عرض الزر أي 144px يجب أن تغير الإزاحة الخاصة بالأيقونة و ذلك بنفس النسبة مثلا أضفت 10 لعرض الأزرار أضفها إلى إزاحة الأيقونة,
2- بالنسبة للسحابة
كما في الصورة
كل ما عليك فعله هو وضع هذا الكود مكان الكود السابق و إختيار شكل السحابة في تهيئة التسميات كما شرحنا أعلاه
.label-size{ background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); margin:0 4px 7px 0; padding: 2px 7px 2px 7px; text-transform: uppercase; border: solid 1px #777; float:right; text-decoration:none; font-size:14px; font-weight:bold; box-shadow: 0 1px 2px #999; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; text-align:center; } .label-size:hover { background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5); background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5); }

#F0F0F0 , #DAD8D9 لون تدرج الأزرار
#777  لون إطار الزر  
20px درجة دوران زوايا الأزرار
 #999 لون الظل
#EEF3F6,#D1E0E5 لون تدرج الأزرار عند مرور الماوس.
وصلنا إلى نهاية شرحنا اليوم بالتوفيق للجميع,
 

هناك تعليق واحد:

  1. غير معرف1 فبراير 2016 في 10:35 ص

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

    ردحذف

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الاشتراك في: تعليقات الرسالة (Atom)