تعرف على قطعة التسميات او الاقسام في بلوجر وقم بتنسيقها كما تريد

بسم الله, الحمد لله..

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

قطعة التسميات بالوضع سحابة

قطعة التسميات بالوضع قائمة

ويتم التبديل بينهم من هنا..

يكون شكل القطعة في قالب المدونة هكذا..

    <b:widget id='Label1' locked='false' title='التسميات' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>

 اذا وضعت القطعه بدون تسمية في مدونتك فسوف يتم تسميتها الكترونياً او اوتوماتيكياً بإسم التسميات باللغة العربية اذا كانت مدونتك باللغة العربية وسوف يتم تسميتها بالانجليزية Label اذا كانت مدونتك باللغة الانجليزية و السبب هذا الكود في القطعة..

<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>

 الفرق بين وضع السحابة و وضع القائمة في القالب يكون هكذا...

وضع القائمة...

<ul>  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
      <b:else/>
        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      <b:if cond='data:showFreqNumbers'>
        <span dir='ltr'>(<data:label.count/>)</span>
      </b:if>
    </li>
  </b:loop>
</ul>

وضع السحابة...

<b:loop values='data:labels' var='label'>
  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </span>
</b:loop> 

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

]]></b:skin>

 و الان ..
لتنسيق الوضع سحابة ضع هذا الكود فوق الوسم الذي بحثنا عنه..

.cloud-label-widget-content .label-size{float:right;display:block;padding:4px 5px;margin:0 0 2px 2px;background-color:#cf449c;color:#fff;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.cloud-label-widget-content .label-size a{color:#fff}
.cloud-label-widget-content .label-size:hover{background-color:#2e2e2e}
.cloud-label-widget-content .label-size:active{top:1px}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font:100% Tahoma}

ليصبح شكل القطعة هكذا...

وضع سحابة بعد التنسيق

 ولتنسيق الوضع القائمة ضع هذا الكود..

.Label li{padding:3px 5px;list-style:none;font:100% Tahoma}
.Label li:nth-child(even){background-color:#fafafa;background-color:rgba(0,0,0,0.03)}
.Label li:hover{border-right:3px solid #ca3092}
.footer .Label li:hover{background-color:#1d1d1d}
.footer .cloud-label-widget-content .label-size:hover{background-color:#1d1d1d}

ليصبح شكل القطعة هكذا

وضع قائمة بعد التنسيق

ملاحظة: يمكن الجمع بين الأكواد لتنسيق الوضعين معاً

مبروك عليكم الاضافة