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

معاينة حية

مرحباً متابعيين مينت ويب الأعزاء - اليوم قمت بتحديث أداة التسميات عي شكل قائمة منزلقة  التي قمت بطرحها في موضوع سابق تحت عنوان  شرح تغير شكل أداة التسميات الى قائمة منزلقة الأن سنتطرح لكم تحديث لهذه الأداة تابع معنا.

التثبيت

سنذهب إلى لوحة تحكم بلوجر المظهر تخصيص متقدم أضف CSS. في هذا القسم سوف نقوم بلصق الكود التالي:


 .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}

اضغط على زر "تطبيق" لحفظ التغييرات. ننتقل الآن إلى المظهر تحرير html ونبحث عن <b:section id='sidebar'> أو أي أداة في قسم السايدبار أو أي مكان أخر تريد أن تضع فيه الأداة ، أسفله مباشرةً قم بلصق الكود التالي:


<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>

نقوم بالحفظ، الأن لدينا الأداة مثبتة بالفعل بالأعدادات الأفتراضيه.


التخصيص

في شفرة css ،يمكنك استخدامها كدليل لتحرير المظهر الخارجي من مصمم قوالب بلوجر. من الممكن أيضًا تعديل بعض الخيارات الإضافية.


الأيقونات

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

<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:case> مع الأسم الدقيق للتسمية، وتحته مباشؤة أيقونة Font Awesome , كمثال


<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'/>

العدد

إذا كنت ترغب في تمكين أو تعطيل الرقم الذي يُظهر عدد المواضيع لكل تسمية ، فما عليك سوى تعديل الأداة من التصميم وإلغاء الخيار المعني.


لا تنسَ مشاركة المقال إذا كان مفيدًا لك. أي أسئلة أتركها في التعليقات ، سأجب على الجميع. شكرا جزيلا لمرورك.