شرح تغير شكل أداة التسميات الى قائمة منزلقة [الأصدار الثالث]

 .tlist{position:relative;width:100%;z-index:5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tlist-content{overflow-y:auto}.tlist-content::-webkit-scrollbar{width:4px}.tlist-content::-webkit-scrollbar-track{background-color:transparent}.tlist-content::-webkit-scrollbar-thumb{background-color:#cfd8dc;border-radius:10px}.tlist-btn{cursor:pointer}.tlist>input{display:none}.tlist>input:checked ~ .tlist-dropdown{display:block}@-webkit-keyframes tlist-dropdown{from{-webkit-transform:translateY(-1rem);transform:translateY(-1rem);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes tlist-dropdown{from{-webkit-transform:translateY(-1rem);transform:translateY(-1rem);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.tlist-dropdown{position:absolute;width:100%;right:0;top:calc(100%+4px);display:none;background:var(--tlist-bg);-webkit-animation:tlist-dropdown .3s ease-in-out;animation:tlist-dropdown .3s ease-in-out;-webkit-filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1)) drop-shadow(0 3px 5px rgba(0,0,0,0.15));filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1)) drop-shadow(0 3px 5px rgba(0,0,0,0.15))}.tlist-dropdown::before{content:"";border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid var(--tlist-bg);position:absolute;top:-10px;right:calc(50% - 5px)}.tlist-btn,.tlist-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.tlist-num{margin-right:auto}.tlist-link:not(:last-child){margin-bottom:4px}.tlist-link>i{text-align:center;width:1.25em}/*! Personalizaci?n */.tlist{--tlist-bg:#fff}.tlist-content{max-height:390px}.tlist-dropdown{padding:10px;border-radius:5px}.tlist-link{padding:12px 14px;color:#5a6370;font-size:14px;font-weight:500}.tlist-link:hover,.tlist-link.is-here{background:#f4f5f7;border-radius:5px;color:#1c2333}.tlist-link>i{font-size:20px;margin-left:12px;color:#9fa6b2}.tlist-num{background:rgba(38,50,56,0.05);padding:2px 12px;font-size:12px;border-radius:10px}.tlist-btn{padding:14px 18px;background:#f4f5f7;font-weight:500;color:#5a6370;border-radius:5px}.tlist-btn:hover{color:#1c2333}

<b:widget id='Label50' locked='false' title='أقسام المدونة' type='Label' version='2' visible='true'>
<b:widget-settings>
  <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
  <b:widget-setting name='display'>LIST</b:widget-setting>
  <b:widget-setting name='selectedLabelsList'/>
  <b:widget-setting name='showType'>ALL</b:widget-setting>
  <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include expr:name='data:widgets ? &quot;widget-title&quot; : &quot;title&quot;'/>
<b:include name='content'/>
</b:includable>
<b:includable id='btn'>
<input expr:id='&quot;tlist-&quot; + data:id' type='checkbox'/>
<label class='tlist-btn' expr:for='&quot;tlist-&quot; + data:id'>أختار القسم</label>
</b:includable>
<b:includable id='cloud'>
<b:class name='cloud'/>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name'>
  <data:label.name/>
  <b:if cond='data:this.showFreqNumbers'>
    <span class='label-count'><data:label.count/></span>
  </b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:with value='data:widget.instanceId' var='id'>
<div class='tlist'>
<b:include name='btn'/>
<div class='tlist-dropdown'>
<b:include name='list'/>
</div>
</div>
<b:include cond='!data:widgets' name='layout2fix'/>
</b:with>
</div><!-- .widget-content -->
</b:includable>
<b:includable id='icons'>
<b:switch var='data:i.name'>
<b:case value='قسم 1' />
<i class='fas fa-meteor' />
<b:case value='قسم 2' />
<i class="fas fa-theater-masks" />
<b:case value='قسم 3' />
<i class="fas fa-award" />
<b:case value='قسم 4' />
<i class="fas fa-book-reader" />
<b:case value='قسم 5' />
<i class="fas fa-atom" />
<b:default/>
<i class='fas fa-tag' />
</b:switch>
</b:includable>
<b:includable id='layout2fix'>
<style>#<data:id/>{z-index: 2}</style>
</b:includable>
<b:includable id='list'>
<div class='tlist-content'>
<b:loop values='data:labels' var='i'>
<a class='tlist-link' expr:href='data:i.url'>
<b:class cond='data:view.url == data:i.url' name='is-here'/>
<b:include name='icons'/><data:i.name/>
<b:include cond='data:showFreqNumbers' name='numbers'/>
</a>
</b:loop>
</div>
</b:includable>
<b:includable id='numbers'>
<span class='tlist-num'><data:i.count/></span>
</b:includable>
<b:includable id='title'>
<b:tag class='widget-title' name='h2'>
<span class='widget-name'><data:title/></span>
</b:tag>
</b:includable>
</b:widget>

<b:switch var='data:i.name'>
    <b:case value='ذرة'/>
    <i class="fas fa-atom"></i>
    <b:default/>
    <i class="fas fa-tag"></i>
    </b:switch>

<b:switch var='data:i.name'>
    
    <!-- أيقونة تسمية علم الفلك -->
    <b:case value='علم الفلك'/>
    <i class="fas fa-meteor"></i>
    
    <!-- أيقونة تسمية الصحية-->
    <b:case value='الصحة'/>
    <i class="far fa-heart"></i>
    
    <b:default/>
    <i class="fas fa-tag"></i>
    </b:switch>

<b:include name='icons'/>