شرح تركيب قائمة علوية لمدونتك

بسم الله الرحمن الرحيم - السلام عليكم ورحمة الله وبركاتة

كيكفم إخوانى / أخواتى الأعزاء شرح بسيط جداً لكيفية تركيب كود قائمة علوية بشكل إحترافى وجزاب العديد يريد أن يكون لدية أكثر من قائمة فى هذة التدونية سنشرح لك طريقة التركيب + قائمة تم تصميمها من مدونة هادى ستور قائمة بسيطة وانيقة أتمنى أن تنال إعجابكم .

معاينة القائمة

1. ستتوجة إلى لوحة التحكم الرئيسية ثم تحرير القالب وستبحث عن هذا الوسم ]]></b:skin> وستضع الكود التالى اعلاة
   
   

مثل ما هو موضح بالصورة أعلاة وستقوم بلصق هذا الكود 

/* Wrap */
#wrap {
    margin: 0px auto;
    width: 900px;
}
/* Head */
#head {
    background-color: #E1EDB9;
    margin: 0px auto;
    padding: 10px;
    color: #FFF;
    font: bold 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#head span {color: #FFF; font: normal 12px tahoma;}
#head span a, #head span a:link, #head span a:visited {color: #D54E21;}
#head span a:active, #head span a:hover {color: #FFF;}
/* Dropdowns Menu */
#pop {
    background: #E1EDB9;
    height:24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#pop li ul {
    margin: 0;
    background: #E1EDB9;
    padding: 0;
    list-style: none;
}
#pop li {
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
}
#pop li li {
    float: right;
    width: 175px;
    margin: 0;
    padding: 0;
}
#pop li a, #pop li a:link, #pop li a:visited {
    font: normal 12px Tahoma;
    color: #414A52;
    text-decoration: none;
    background: #E1EDB9;
    display: block;
    padding: 5px 12px;
}
#pop li a:hover, #pop li a:active {
    color: #FFF;
    display: block;
    background: #FF4242;
    padding: 5px 12px;
}
#pop li li a, #pop li li a:link, #pop li li a:visited {
    background: #E1EDB9;
    color:#414A52;
    width: 175px;
    margin: 0px;
    padding: 5px 12px;
    border-top: 1px solid #F5F9FB;
}
#pop li li a:hover, #pop li li a:active {
    color: #FFF;
    background: #FF4242;
}
#pop li ul {
    position: absolute;
    width: 199px;
    display: none;
    right: 0;
}
#pop li:hover ul {
    display: block;
}

* والخطوة الثانية والأخيرة ستقوم بالبحث عن هذا الكود أو ما شابة ليه 

قم بلصق هذا الكود

<div id="wrap">
  <!-- Header -->   
  <!-- NavBar - hadystore -->
  <ul id="pop">
    <li><a href="http://hadystore.blogspot.com/">الرئيسية</a></li>
    <li><a href="#">قائمة دروس CSS</a>
      <ul>
        <li><a href="#">هل تريد أن تتعلم تقنية CSS ؟</a></li>
        <li><a href="#">تطبيقات ودروس متنوعة</a></li>
        <li><a href="#">خدع CSS وطرق تطبيقها</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة رئيسية أفقية</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة رئيسية أفقية</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة رئيسية أفقية</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة!</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
  </ul>
</div>

والآن قم بحفظ القالب تم بحمد الله