2015-11-16

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

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

شرح تغير شكل أداة التسميات الى قائمة منزلقة
2015-11-16

اليوم سنقوم بشرح طريقة جعل تسميات المدونه على شكل قائمه منزلقه , فى الوضع الطبيعى يكون لنا خيارين اما على شكل سحابه او على شكل قائمه عاديه ولكننا اليوم بصدد تغير هذه الاشكال القديمه الى الشكل الجديد الاكثر عصريا :] .


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

طريقة تغير شكل تسميات المدونه الى قائمة منزلقه.

اليك الشرح:

أولاً عليك ان تتأكد بأن اداة التسميه مضافه الى مدونتك.

1.أذهب الى مدونتك > قالب > تحرير HTML , ثم أبحث عن الكود التالى.

<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>
قم بتغير النص المحدد بما يناسبك

2.قم بنسخ الكود التالى واضفه بعد ]]></b:skin> أو </style>

/* CSS 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}

3.قم بحفظ القالب وشاهد النتيجه

See the Pen How To Change Label Being Widget Display Dropdown by مطور بلوجر (@MintWeb) on CodePen.


أتمنى أن تكون  طريقة جعل تسميات المدونه على شكل قائمه منزلقه مفيده لكم :) .

شرح تغير شكل أداة التسميات الى قائمة منزلقة
4/ 5
Oleh