قائمة أفقية مميزة إحترافية بإستايل 2013

السلام عليكم ورحمة الله وبركاته في هذا الدرس سوف نتعلم إضافة قائمة أفقية مميزة بإستايل 2013 تزيد من إحترافية المدونة وتعطي شكلا جذابا للزوار وهذا فيديو يوضح  من هنا ولإضافتها اتبع تلك الخطوات

1- الذهاب الي لوحة تحكم مدونتك من هنا
2- ثم نذهب الي قالب ثم تحرير html ثم نضع علامة صح لتوسيع الادوات
3- ثم نقوم بالبحث عن هذا الكود ]]></b:skin>
4- نضع هذا الكود قبله مباشرة

.ribbon span {
    background:#A81B6A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2 , Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4  */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5  */
    transition: background-color 0.2s, margin-top 0.2s;
    color:white;


}
.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
   
}
.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited { 
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}

5- نذهب إلي تخطيط ونضيف أداة html ثم نضع بها هذا الكود

<div class='ribbon'>
    <a href='ضع رابط '><span>الفهرس</span></a>
    <a href='ضع رابط'><span>إضافات</span></a>
    <a href='ضع رابط'><span>بلوجر</span></a>
    <a href='ضع رابط'><span>قوالب</span></a>
    <a href='ضع رابط'><span>تواصل معنا</span></a>
    <a href='ضع رابط'><span>سياسة الخصوصية</span></a>
    <a href='ضع رابط'><span>الرئيسية</span></a>
</div>

وبذلك نكون أضفنا قائمة أفقية مميزة واحترافية للمدونة والسلام عليكم ورحمة الله وبركاته.