23 يوليو، 2014

مدون محترف اضافات بلوجر شرح تنسيق قائمة و سحابة التسميات

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

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

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


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



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


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



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


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

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


      ابحث عن الوسم ]]></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


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


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


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

      و هذا هو الكود 

      .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

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


      في امان الله 
      مدونة مدون محترف

      مواضيع ذات صلة
      شرح تنسيق قائمة و سحابة التسميات
      4 / 5
      بواسطة

      هناك تعليقان (2) :

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