logo

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

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

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

إجعل تعليقك حافز لنا وتذكر قول الله تعالي (( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ))


سجل بريدك الإلكتروني ليصلك كل جديد

جميع الحقوق محفوظة © 2018 - 2014 | تجريب قالب هادي