info@blog.com
تابعنا:

اختر لون القالب

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

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

تابع معنا الشرح :-
  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>

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

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات