تغيير وتنسيق شكل التسميات أو أقسام مدونتك بشكل رائع وجميل بأفضل الاشكال

SAMY ELSAGHlR

اخر تحديث :

تغيير وتنسيق شكل التسميات أو أقسام مدونتك بشكل رائع وجميل بأفضل الاشكال

أهلا بكم مرة أخرة فى موقعنا المتوضع فى هذا التدوينة سوف أقدم لكم أجمل الاشكال التى سوف تظهر شكل تسميات أو أقسام مدونتك بشكل جميل دأخل العديد من الاطارات الملونة بأشكال مختلفة سوف أقدم لكم العديد من الاشكال التى سوف تظهر بها تسميات موقعك بشكل متناسق وجميل وهى من أهم الاضافات التى توجد فى مدونتك والتى يظهر ظهورها بشكل جميل سوف أقدم لك الاكواد الان
1-لظهور تسميات مدونتك بهذا الشكل انسخ الكود الموجود بأسفل الشكل

.sidebar .label-size { position:relative; text-transform: uppercase; text-decoration:none; font-size:13px; font-family:Open Sans; color:#fff!important; } .sidebar .label-size a { color:#fff!important; font-weight:bold; padding:8px 10px; margin:0 6px 6px 0; float:left; display:block; -moz-transition: all 0.4s ; -o-transition: all 0.4s; -webkit-transition: all 0.4s ; -ms-transition: all 0.4s ; transition: all 0.4s ; } .sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;} .sidebar .label-size-1 a:hover {background:#16a085;} .sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;} .sidebar .label-size-2 a:hover {background:#2980b9;} .sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;} .sidebar .label-size-3 a:hover {background:#27ae60} .sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;} .sidebar .label-size-4 a:hover {background:#8e44ad} .sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;} .sidebar .label-size-5 a:hover {background:#c0392b}

2-لظهور تسميات مدونتك بهذا الشكل انسخ الكود الموجود بأسفل الشكل

3-لظهور تسميات مدونتك بهذا الشكل انسخ الكود الموجود بأسفل الشكل

4-لظهور تسميات مدونتك بهذا الشكل انسخ الكود الموجود بأسفل الشكل

.label-size{
    margin:0;
    padding:0;
    position:relative;
    }
    .label-size a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:12px;
    margin-bottom: 9px;
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
    border-top-right-radius:4px;
    }
    .label-size a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;
    }
    .label-size a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }
    .label-size a:hover{background:#555;}
    .label-size a:hover:before{border-color:transparent #555
    transparent transparent;}

5-وهذا الاخير لظهور التسميات بهذا الشكل انسخ الكود الذى يوجد أسفل الشكل

بعد أختيار الشكل المناسب لموقعك أنسخ الكود الموجود بأسفلها ثم أذهب الى قلب المدونة وأبحث عن هذا الكود ]]></b:skin> ثم ضع كود شكل التسميات الذى قمة بنسخة فوقه مباشر