قائمة منسدلة أفقية لمدونات بلوجر

عدد مشاهدات الموضوع:
العديد من التساؤلات حول كيفية عمل قائمة منسدلة أفقية لمدونات بلوجر تتضمن روابط تشعبية لاختصار الروابط الكثيرة داخل المدونة وسهولة وصول الزائر لمراده بسهولة. هنا سنشرح لكم الطريقة فى ثلاث خطوات بثلاثة أكواد. ولكن عاين الإضافة من هنا (مدونة تجريبية) واذا أعجبتك يمكنك اتباع الشرح داخل الفيديو التالى بالصوت والصورة باللغة العربية :)

الخطوة الأولى:
التوجه الى قالب ثم تحرير HTML ونقوم بالبحث (Ctrl+F) عن
]]></b:skin>
ونضع فوقه أو قبله الكود الأول التالى
لاحظ: القائمة تظهر على اليسار ولتحويلها الى اليمين قم باستبدال كلمتين Left باللون الأحمر الى right
 /* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
تحويل القائمة من اليسار الى اليمين

الخطوة الثانية:
نبحث عن الكود االتالى
  /* Tabs
ونقوم بتحديد الكود أسفله حتى نصل الى الكود
 /* Columns
ونقوم باستبدال الكود المحدد بالكود التالى
 #crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;} 

بعد الانتهاء من الاضافة والاستبدال للأكواد السابقة نقوم بحفظ القالب وننتقل الى الخطوة الأخيرة 

الخطوة الثالثة:
اذهب الى تخطيط وإضافة أداة ثم اختار أداة HTML وضع داخلها الكود التالي بعد التعديل علي أماكن الروابط وعناويينها بما يناسب مدونتك
  <div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://abu-iyad.com'>عنوان رابط 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط 2</a></li>
<li><a class='submenucol' href='#'>عنوان رابط 3</a>
<ul>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 2</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 3</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 4</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 5</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>عنوان رابط 4</a>
<ul>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 2</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 3</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 4</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 5</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>عنوان رابط 5</a>
<ul>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 2</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 3</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 4</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 5</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 6</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 7</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 8</a></li>
</ul>
</li>
<li><a href='http://abu-iyad.com'>عنوان رابط 6</a></li>
</ul>
<br class='clearit'/>
</div>
</div>

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

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

  1. اشكرك ابو اياد لكن القائمة ضهرت من اليسار الى اليمين اريدها ان تضهر من اليمين الى اليسار و شكري لك

    ردحذف
    الردود
    1. بس غير ال قيمة خاصية ال float من left إلى right

      حذف
    2. وغير قيمة خاصية ال text-align اللي هي محاذاة النص إلى right حتى النصوص تكون من اليمين إلى يسار

      حذف
  2. @aflatonia sabine

    تم تحديث الموضوع واضافة رد على سؤالك .. بالتوفيق عزيزى :)

    ردحذف
  3. لم أجد الكود
    /* Tabs
    ما العمل

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

    ردحذف
    الردود
    1. رديت انا على اول شخص علق غير قيم خاصيتي ال float, text-align من left إلى right

      حذف
  5. @amjd surrati
    أهلا بك أمجد .. تأكد عدم وجود فراغ قبل الكود فى خانة البحث :)

    ردحذف
  6. أزال المؤلف هذا التعليق.

    ردحذف
  7. شكرا على الشرح الرائع
    بس انا مش لاقى الكود ده
    /* Tabs
    اعمل ايه

    ردحذف
  8. شكرا على الشرح الرائع
    لك نلم أجد الكود
    /* Tabs
    ما العمل أخي
    وشكرا

    ردحذف
  9. انا مش لاقى كود Tabs

    ردحذف
  10. لكي تجد الكود tabs يجب عليك أن لا تترك مسافات في خانة البحث من جهة اليسار وشكرا للأخ أبو إياد

    ردحذف
  11. ابو اياد اشكرك جدا على هذه القوائم الجميلة
    مع متصفح الكرووم بتشتغل تمام
    بس الله يخليك مع متصفح الانترنت اكسبلورر الاصدارة العاشرة بتطلع خلفية القائمة الافقية باللون الابيض ولايمكن رؤية اي شيء وفقط عندما اضع المؤشر عليها حينها تظهر الخلفية باللون الاسود والنص باللون الابيض
    ارجو المساعدة

    ردحذف
  12. ابو اياد اشكرك جدا على هذه القوائم الجميلة
    مع متصفح الكرووم بتشتغل تمام
    بس الله يخليك مع متصفح الانترنت اكسبلورر الاصدارة العاشرة بتطلع خلفية القائمة الافقية باللون الابيض ولايمكن رؤية اي شيء وفقط عندما اضع المؤشر عليها حينها تظهر الخلفية باللون الاسود والنص باللون الابيض
    ارجو المساعدة

    ردحذف
  13. لم تنجح معي اخي
    http://zone-url.blogspot.com/

    ردحذف
  14. غير معرف3:22 م

    انا مش لاقة
    /* Tabs خالص و حذفت الفراغ برضو مش لقيها

    ردحذف
  15. انت مفيد فعلاً .. أشكرك على العرض بهذه التفاصيل الدقيقة

    ردحذف
  16. غير معرف2:44 ص

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

    ردحذف
  17. شكرا لك ولكن عندما استخدمت الاكوادك ظهرت كذالك
    http://gfhmlkmjhg.blogspot.com.eg
    اتمنى ان ترد عليا و ترد عليا بالحل
    وشكرا لك

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية