شرح تنسيق قائمة و سحابة التسميات

طريقة تنسيق قائمة و سحابة التسميات بتقنية css و شكل احترافي

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

تستطيع ايضا رؤية الاداة بالضغط على زر معاينة ستجد

التسميات على شكل قائمة
التسميات على شكل سحابة
التسميات على شكل سحابة مع الترقيم

معاينة

تنسيق قائمة التسميات

هذا هو الشكل بعد التنسيق

ابحث عن الوسم ]]>و اضف فوقه الكود التالي

.list-label-widget-content {
margin-bottom: 20px;
color: #99a1a9;
}
.list-label-widget-content a {
color: #99a1a9;
}
.list-label-widget-content ul {
margin: 0;
}
.list-label-widget-content ul li {
padding: 0;
margin: 0;
}
.list-label-widget-content ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.list-label-widget-content ul li {
margin-top: 10px;
font-size: 14px;
background-color: #ffffff;
display: block;
clear: both;
height: 40px;
}
.list-label-widget-content ul li a {
color: #99a1a9;
text-decoration: none;
width: auto;
display: block;
line-height: 40px;
float: right;
}
.list-label-widget-content ul li a:before {
content:"\f105";
font-family: fontawesome;
font-size: 18px;
color: #ffffff;
margin-left: 20px;
margin-right: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
transition: all .5s linear;
-webkit-transition: all .5s linear;
-mox-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
background-color: #99a1a9;
display: block;
float: right;
}
.list-label-widget-content ul li:hover a {
text-decoration: none;
}
.list-label-widget-content ul li:hover a:before {
width: 200px !important;
background-color: #eb005d;
}
.list-label-widget-content ul li span {
float: left;
background-color: #99a1a9;
min-width: 30px;
line-height: 40px;
height: 40px;
text-align: center;
color: #ffffff;
float: left;
transition: all .5s linear;
-webkit-transition: all .5s linear;
-mox-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
padding: 0 5px;
}
.list-label-widget-content ul li:hover > span {
background-color: #eb005d;
}
.list-label-widget-content ul li span:first-child {
float: right;
width: 85%;
}

لتنسيق الشكل غير التالي

هذا اللون هو لون الأزرار و لون الخط و لون الإطار #99a1a9

وهذا لون الزر عند تمرير الماوس eb005d

لتغيير حجم الخط قم بتغيير الرقم font-size: 18px

تنسيق سحابة التسميات

ونفس الطريقة ستضيف الكود التالي كما أضفت الأول او أضفه تحته إن كنت تريد استخدامهما مع بعض

هذا معاينة للنتيجة اولا

و هذا هو الكود

.cloud-label-widget-content .label-size {
font-size: 100%;
float: right;
}
.cloud-label-widget-content .label-size a {
color: #99A1A9;
float: right;
font-size: 14px;
margin: 0px 0px 5px 5px;
padding: 7px;
background-color: #fff;
border: 1px solid #99A1A9;
text-decoration: none;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #EB005D;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
border: 1px solid #eb005d;
}
.cloud-label-widget-content .label-size span {
color: #fff;
float: right;
font-size: 14px;
margin: 0px -5px 5px 5px;
padding: 7px;
text-decoration: none;
background-color: #99a1a9;
border: 1px solid #99a1a9;
}
.cloud-label-widget-content .label-size span:first-child, .cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background-color: #99a1a9;
color: #FFF;
}
.cloud-label-widget-content .label-size span:first-child {
margin: 0px 0px 5px 5px;
}

طريقة تنسيق سحابة التسميات

هذا اللون هو لون الأزرار و لون الخط و لون الإطار #99a1a9
وهذا لون الزر عند تمرير الماوس eb005d
لتغيير حجم الخط font-size: 14px

يمكنك ايضا مشاهدة : اضافة سحابة التسميات الملونة

في امان الله

مدونة مدون محترف

Unknown

اضف تعليق

اضافات بلوجر

الأربعاء، 23 يوليو 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000