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

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

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

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

معاينة

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

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

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

.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

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

في امان الله 

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

7/23/2014

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 7/23/2014 2 تعليقات