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

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

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

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

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

هاته القائمة إهداء لكل زواري بشكل عام وإلى أخي الكريم Ðř Ăệ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>

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


آخر مقالات المدونة

هناك 33 تعليقًا:

  1. شكراً اخى :)) بجد مش عارف أشكرك إزاى
    بس هل ممكن أعمل Drop Menu بس علشان لو أخدت كل الأكواد شكل القائمة العلوية عندى هيتغير

    فعلى سبيل المثال أريد من يمرر الماوس على كلمة الفوتوشوب فى مدونتى يجد ظهرت أقسام فرعية مثل دورات و دروس و ملحقات تصميم

    بحيث يكون الشكل العام للمدونة يظهر بشكل جيد

    وهذا رابط المدونة http://www.3rab-tech.com

    هل هناك أى أفكار ؟ :-?

    ردحذف
  2. نعم اخي لكن كيف أشرح لك نظام التعليقات لايوافق اكواد الـ html
    ثواني أضع لك شرح في الصورة

    ردحذف
  3. ممكن أضع نسخة من القالب وتقول بتركيبة دون عناء الشرح :-?

    ردحذف
  4. تفضل اخي شرح بسيط حول إضافة أقسام فرغية داخل قسم رئيسي وأرجوا ان تكون وصلت لك الفكرة وأنا هذا ما قصدته من سؤالك
    http://im40.gulfup.com/nmYEK.png
    تحياتي ^^

    ردحذف
  5. ههههههه لقد وضعته الشرح قبل أن أرى طلبك

    ردحذف
  6. نعم أخى الشرح واضح جداً ولكن المشكلة انه لا يوجد أكواد css فى القالب لتظهر الأقسام الفرعية ;( فما أحتاجه أكواد Css فقط

    ردحذف
  7. أوك أخي إذن ساعمل درس مفصل وكامل حول الأمر وبأكواد الـ css لكن قد اتأخرعن موعد هاته التدوينة لانها تحتاج مجهود غذا قدم لي قالبك لأعمل عليه القوائم الفرعية بعدها أقدمه لك ثم طور قدراتك عبر الدرس القادم إن شاء الله :) أرسل لي القالب على الخاص لكي تحفظ حقوق قالبك

    ردحذف
  8. مشكور جدا أخى :) أعلم انى تعبتك معى ولكنى بحثت لأسابيع و يأست من عدم وجود ما أريده سواء فى المحتوى العربى أو الأنجليزى

    وسؤال أخر أين هو الخاص :p ؟

    ردحذف
  9. ههههههههه ألم ترى كلمة راسلنا :-)

    ردحذف
  10. ههههه عشان كانت راسلنا في القالب الأول نسيت أنني غيرتها لكن مع ذلك لهما نفس المعنى =))

    ردحذف
  11. دائما تأتينا بالجديد اخي انت ولا افضل

    ردحذف
  12. قائمة جميلة جدا , ما شاء الله :)

    استمر اخي الى الامام

    ردحذف
  13. ألف شكر لكم على مروركم الطيب ودوما ترقبوا الجديد والمزيد من الحصريات إن شاء الله تحياتي العطرة (f)

    ردحذف
  14. تم الأرسال ولكن ملحوظة بسيطة فى مدونتك

    ركن الصفحات فى الفوتور لا يوجد به روابط

    وكذلك القائمة العلوية لا تعمل او ان بها مشاكل وقد لفت نظرك لها فور تركيب هذا القالب و أعتقد انك لم تلاحظ هذا التعليق

    ملحوظة انا أستخدم جوجل كروم

    ردحذف
  15. شكرا لك على ملاحظتك سأعمل على هذا فأنا لم انتبه للأمر (m)

    ردحذف
  16. تسلم ايدك يا اسامه

    ردحذف
  17. منور الموضوع اخي الكريم شكرا لك

    ردحذف
  18. مممكن اخي شرح تغير اللوان القالب

    ردحذف
  19. اخي اسامه هل ممكن تعلمنا كيفية كتابة المواضيع المثبته؟ و الواجه الخاصه ب الدعم الفني و تصميم و توكيد؟

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

    ردحذف
  21. باذن الله لكن متي؟

    ردحذف
  22. بعد الإنتهاء من الدروس الأساسية وغدا إن شاء الله يكون الدرس السابع :>)

    ردحذف
  23. خويا اسامة يعزك
    انا استخدم قالبك القديم
    هل أضع الأكواد مباشرة ويصبح الهيدر هكذا ،، يعني يحدف الهيدر القديم وحده من العرض ؟؟

    ردحذف
  24. أنا استخدم القالب القديم لمدونتك أخ أسامة ،، كيف أغير الهيدر القديم وأضع مكانه هذا ؟

    ردحذف
  25. يف اجعل قوائم فرعية لمدونتي ارجوا الشرح الفصل وبالصور
    رابط مدونتي
    www.elmotamaiz.blogspot.com

    مشكور اخي

    ردحذف
  26. تسلم يا اسامة يا خالى بس ممكن يضاف اسفل الهيدر و لا مش ممكن ولوكان ممكن ممكن تلقلى ازاى وشكرا على الاضافى الجميلة

    ردحذف
  27. سهلة فقط قم بوضع كل الـ HTML الخاص بالقائمة تحت الهيدر header-wrapper وتبقى تحته :)
    وشكرا

    ردحذف
    الردود
    1. بعد التحية . نقل تحت الهيدر بنجاح شكرا جزيلا يا غالى هية غلاسة منى ممكن كمان طلب
      عاوز عند مرور الماوس يعمل خلفية بلون مختلف اويعمل انارة او اي شى من هذا القبيل اصل الشريط كدة جامد ما بينحركش
      ونبقا شا كر افضالك يا اسامة يا غالى ؟

      حذف
  28. وفية حاجة اخيرة ليش لما بنغير نوع الخط ما بتغير كان نفسى اغير الخط بالخط دة DroidKufi-bold

    ردحذف
  29. جامعة المدينة العالمية
    http://www.mediu.edu.my/ar/
    المكتبة الرقمية
    http://dlibrary.mediu.edu.my/

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن