قائمة عليا كالتي بمدونتنا الحالية بشكل مميز وجذاب بأقسام فرعية على شكل عمودين

السلام عليكم ورحمة الله تعالى

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

إنها قائمة مميزة ومايميزها ظهور أقسام فرعية على شكل عمودين

هاته القائمة إهداء لكل زواري بشكل عام وإلى أخي الكريم Ðř Ăệrǿ بشكل خاص

صورة القائمة

كما تلاحظون إنها مميزة وجميلة جدا

وستنال إعجايكم إن شاء الله واحب أن أقول أنني قد أمدكم بكل ماهو في قالبي الحالي مع مرور الوقت

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

فأنا لماذا أقول مدونتنا وليس مدونتي لأن كل مافيها هو لكم ولي
 
لكن بالنسبة لطلب القالب اكمله فهذا ليس الآن فهو حصري وخاص بنا

كفى كلاما وهيا إلى الشرح

شرح الإضافة

 اكواد html القائمة- والآن الصق داخل المستطيل الكود التالي 

<div class='topNav'>
   <div class='topMenu'>
 <ul id='dropmenu'>
  
 <li><a href='/'>الصفحة الرئيسية</a></li>
  
 <li><a href='#'>المنتدى</a></li>
  
   <li><a href='#'>البلوجر</a>
 <ul>
 <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='#'>إنشاء منتدى vb</a></li>
 <li><a href='#'>دروس الفوتوشوب</a></li>
 <li><a href='#'>إحترف لغة البرمجة</a></li>
 </ul>
 </li>

 <li><a href='#'>برامج كاملة</a></li>

</ul>
</div>
</div>
<div style='clear:both;'/>

تخصيص الإضافة حسب الألوان

الأقسام الرئيسية بالقائمة

الأقسام الفرعية بالقائمة

 روابط الأقسام

كود الـ CSS الخاص بالإضافة

.topNav {
    width:100%;
    height:40px;
    overflow:visible;
    margin:0 auto;
    background: -webkit-linear-gradient(top, #41434f, #272931);
    background: -moz-linear-gradient(top, #41434f, #272931);
    background: -ms-linear-gradient(top, #41434f, #272931);
    background: -o-linear-gradient(top, #41434f, #272931);
    border-bottom:1px solid #444;
}
.topMenu {
    height:40px;
    width:100%;
    float:right;
    overflow:visible;
    margin:0px 0 0 0;
}
.topMenu ul {
    margin: 0px 10px 0 0;
    text-align:right;
}
.topMenu ul li {
   
}
.topMenu ul li a {
}
.topMenu ul li a:hover {
    color:#fff;
}
#dropmenu, #dropmenu ul {
    margin: 0px 10px 0 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
    z-index: 999;
    width: 100%;
    font-weight: bold;
}
#dropmenu a {
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ;
    -webkit-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    display:block;
    font: normal 11px/42px Tahoma, Geneva, sans-serif;
    color:#1599ae;
    height:40px;
    display:block;
    text-shadow:0 1px #1a1b20;
    padding: 0 20px;
}
#dropmenu a:hover {
}
#dropmenu .current a, #dropmenu li:hover &gt; a {
    color:#fff;
    text-shadow:0 1px #000;
    background:#14161c;
}
#dropmenu li {
    float:right;
    height:40px;
    border-left:1px solid #262831;
    position: relative;
}
#dropmenu li:last-child {
    background: none;
}
#dropmenu ul {
    padding: 10px 5px 2px 0;
    position: absolute;
    display: none;
    width: 293px;
    top: 40px;
    right: -15px;
    background:#14161c;
}
#dropmenu ul a {
}
#dropmenu li ul li {
    float: right;
    background: none !important;
    height: 29px;
    width: 130px;
    padding:0 !important;
    margin: 0px 9px 10px 4px !important;
}
#dropmenu li ul li:hover {
    background: none !important;
    height: 29px !important;
    width: 130px !important;
}
#dropmenu li ul a {
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    padding:0 !important;
    float: right;
    height: 29px;
    width: 130px;
    color: #000;
    text-shadow:0 1px #ffffff;
    background:#ffffff;
    text-align:right;
    text-indent:8px;
}
#dropmenu li ul a:hover {
    background: #18acbd;
    color: #000 !important;
    height: 29px;
    text-shadow:0 1px #1dbecb;
    width: 130px;
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    border-top:none !important;
}
#dropmenu ul ul {
    top: auto;
}
#dropmenu li ul ul {
    left: 12em;
    margin: 0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
    display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
    display: block;
}

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

لمن أراد إضافتها إلى بلوجر بقالبه فقط فل يبحث عن هذا الكود

    <div id='header-wrapper'>

أو هذا

    <div id='header'>

وليضع اكواد html القائمة قبله

وأكواد الـ CSS قبل الكود التالي

]]></b:skin>

أرجوا أن تعمل معكم واكون قد وفقت في الشرح

إلى هنا نصل لختام المقالة

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