تغيير شكل ومظهر التسميات(العلامات الدليلية) لمدونة البلوجر

بسم الله الرحمن الرحيم

والصلآة والسلأم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم السلآم عليكم ورحمة الله وبركاته . في هذا درس انشالله سوف نتطرق إلى كيفية تغير شكل تسميات في بلوجر

طريقة التركيب سهلة جدا ولاتستغرق أكثر من عدة دقائق

توحه للوحة التحكم >>تصميم>>أضافة أداة>>تهيئة HTML/JavaScript

بعد ذلك أضف الكود التالي داخل الخانة المخصصة لذلك

.label-size a {
        display: inline-block;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        padding: 4px 7px;
        font-family: 'Helvetica Neue', helvetica, sans-serif;
        font-size: 12px;
        line-height: 14px;
        height: 14px;
        vertical-align: middle;
        margin-bottom: 6px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
       
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    }

.label-size a {
        color: #996633;
        border: 1px solid #DDA13C;
       
        background: rgb(238,177,75);
        background: url(data:image/svg+xml;base64,PD94bWwgdmV
    yc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG
    5zPSJodHRwOi8vd3d3LnczLm9yZy'
    8yMDAwL3N2ZyIgd2lkdGg9IjEwM
    CUiIGhlaWdodD0iMTAwJSIgdmlld0
    JveD0iMCAwIDEgMSIgcHJlc2VydmV
    Bc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGl
    kPSJncmFkLXVjZ2ctZ2VuZXJhdGV
    kIiBncmFkaWVudFVuaXRzPSJ1c2V
    yU3BhY2VPblVzZSIgeDE9IjAlIiB5M
    T0iMCUiIHgyPSIwJSIgeTI9IjEwMCUi
    PgogICAgPHN0b3Agb2Zmc2V0PSIw
    JSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc
    3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c
    3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3A
    tY29sb3I9IiNjYzkxMmQiIHN0b3Atb3Bh
    Y2l0eT0iMSIvPgogIDw
    vbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lk
    dGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id
    XJsKCNncmFkLXVjZ2ctZ2VuZ
    XJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
        background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
        background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
    }

.label-size a:before  {
        content: '\2022';
        color: #FFFFFF;
        margin-left: 4px;
        font-size: 15px;
        line-height: 13px;
        height: 13px;
        vertical-align: text-top;
       
        text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
    }

.label-size a:hover {
        text-decoration: none;
       
        background: rgb(240,183,86);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHR
    wOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwM
    CUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2Vy
    dmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW5
    0IGlkPSJncmFkLXVjZ2ctZ2VuZX
    JhdGVkIiBncmFkaWVudFVuaXRz
    PSJ1c2VyU3BhY2VPblVzZSIgeD
    E9IjAlIiB5MT0iMCUiIHgyPSIwJSI
    geTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1
    jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFj
    aXR5PSIxIi8+CiAgICA8c3RvcCBvZ
    mZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3A
    tb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbn
    Q+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIg
    ZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
        background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
        background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
    }
    /*]]>*/
    </style>

أعمل حفظ للأداة

ثم بعد ذلك أختار أضافة أداة >>التسميات

وعدل الخيارات كما هو موضح في الصورة