طريقة عمل تصنيفات المدونة فى قائمة منسدلة

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

تابع معنا الشرح :-

معاينة الإضافة

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

/* Dropdown Label */
.dropmedown select {
    outline: none;
    cursor: pointer
}
.dropmedown {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    height: 36px;
    line-height: 36px;
    color: #444
}
.dropmedown:before,
.dropmedown:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 13px;
    right: 12px;
    width: 0;
    height: 0;
    line-height: 36px;
    border: 4px dashed;
    border-color: #888 transparent;
    pointer-events: none
}
.dropmedown:before {
    border-bottom-style: solid;
    border-top: none
}
.dropmedown:after {
    margin-top: 8px;
    border-top-style: solid;
    border-bottom: none
}
.dropdown-select {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 6px 8px 6px 10px;
    height: 36px;
    line-height: 18px;
    font-size: 12px;
    color: #62717a;
    text-shadow: 0 1px #fff;
    background: #f2f2f2;
    background: rgba(0, 0, 0, 0)!important;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none
}
.dropdown-select>option {
    margin: 3px;
    padding: 6px 8px;
    text-shadow: none;
    background: #f8f8f8;
    outline: none;
    border: 0;
    border-radius: 3px;
    cursor: pointer
}

* سنفوم بالبحث عن هذا الكود او إبحث عن جزء منه حتي تجده سيكون يهذا الشكل 

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

شاهد الصورة التالية :-

* عندما تجد الكود المشار عليه سابقاً والمحدد ايضا فى الصورة السابقة ستقوم بإستبداله بهذا الكود 

<div class="dropmedown">
<select  class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
  <option> إبحث بالأقسام </option>
  <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'>
      <data:label.name/> (
      <data:label.count/>)
    </option>
  </b:loop>
</select>
</div>

"ستقوم بحفظ القالب"    أي إستفسار ضعه فى التعليقات