تم تحديث المقال بتاريخ 07/10/2020 مرحباً أيها الزائر / المتابع الكريم، تم تحديث هذه الموضوع وإضافة إصدار أحدث من شرح تغير شكل أداة التسميات الى قائمة منزلقة تستطيع معاينة النسخة المحدثه من هنا شرح تغير شكل أداة التسميات الى قائمة منزلقة [الأصدار الثالث]

 سنتعلم اليوم تغير شكل أداة التسميات الى قائمة منزلقة الأصدار الثاني ،التي تم تصميمه إستناداً إلي أداة التسميات واستخدام Css صافي .

التثبيت

سوف ندخل لوحة تحكم بلوجر ، قسم "المظهر" ، واضغط على الزر "تخصيص" ، وفي‏ مصمم مظاهر Blogger ، سنذهب إلى خيار"متقدم: ، في قسم "أضافة CSS مخصص " ،  سنقوم بلصق الكود التالي:

/*! Widget: mLabels v2 | by www.imintweb.com */#MintLabel,#MintLabel .widget-content{position:relative!important;z-index:10;overflow:initial!important}.labeldrop:checked~.mLabels-button::before{position:fixed;top:0;right:0;width:100%;z-index:800;content:"";cursor:default;height:100%}.widget.Label,.widget.Label .widget-content{overflow:initial!important}.labeldrop{display:none}.mLabels{font-size:14px;position:relative}.mLabels-button{display:flex;justify-content:space-between;align-items:center;border-radius:3px;cursor:pointer;font-weight:500;transition:color .3s}.mLabels-button::after{content:"";width:8px;height:8px;display:block;border-left:3px solid;border-bottom:3px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:.3s -webkit-transform;transition:.3s transform;transition:.3s transform,.3s -webkit-transform}.mLabels-nav{height:0;position:absolute;top:100%;z-index:9999;width:100%;padding-top:1em;opacity:0;transition:visibility .3s,opacity .3s,-webkit-transform .3s;transition:transform .3s,visibility .3s,opacity .3s;transition:transform .3s,visibility .3s,opacity .3s,-webkit-transform .3s;-webkit-transform:translate(0,2em);transform:translate(0,2em);visibility:hidden}.mLabels-dropdown{overflow-y:auto}.mLabels-link{display:flex;align-items:center;justify-content:space-between;font-weight:500}.labeldrop:checked~.mLabels-button::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.labeldrop:checked~.mLabels-nav{visibility:visible;opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);height:auto}.mLabels-nav::before{content:"";display:block;top:8px;position:absolute;left:1em;width:14px;height:14px;z-index:-1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.mLabels-button{padding:1.2em;background:rgba(0,0,0,0.05);color:rgba(38,50,56,0.5)}.mLabels-button:hover{color:rgba(38,50,56,0.75)}.mLabels-dropdown,.mLabels-nav::before{background-color:#fff;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.mLabels-dropdown{border-radius:3px;max-height:450px}.mLabels-dropdown::-webkit-scrollbar{width:6px}.mLabels-dropdown::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.1)}.mLabels-dropdown::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.4)}.mLabels-link{padding:.8em 1em;color:rgba(0,0,0,0.5);border-bottom:1px solid rgba(0,0,0,0.05)}.mLabels-num{color:rgba(0,0,0,0.25);font-size:.9em;font-weight:700}