سنتعلم اليوم تغير شكل أداة التسميات الى قائمة منزلقة الأصدار الثاني ،التي تم تصميمه إستناداً إلي أداة التسميات واستخدام 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}