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

تركيب الاضافة :

1- من لوحة التحكم   >>>   قالب   >>>   تحرير html  (احفظ نسخة من القالب من باب الاحتياط)
2- ابحث بواسطة   ctrl+f   عن :
]]</b:skin> 
3- انسخ الكود التالي فوقه مباشرة :
#hmenu {padding:0; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}#hmenu li {float:left; margin-right:1px;}#hmenu li a {display:block; float:left; height:30px; line-height:30px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold;padding:0 25px 0 10px;}#hmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}/* Default link styling *//* Style the list OR link hover. Depends on which browser is used */#hmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}#hmenu li:hover {position:relative; z-index:200;}#hmenu li:hover > a {color:#fff;/* Menu Font Color */background:#840; /* Menu mouse over Color */}#hmenu li:hover > a.sub {color:#fff; /* Drop down item mouse over font Color */background-color:#840; /* Drop down item mouse over background Color */}*/#hmenu li.current a {color:#fff; background:#840;}#hmenu li a.sub {background: #333 url(http://lh3.ggpht.com/_-A4vw5BwqxA/SpjMFOl-E5I/AAAAAAAADoQ/UUbKYNRyOuM/down-arrow.gif) /* Down arrow image */no-repeat right center;}#hmenu :hover ul {left:0; top:30px; width:120px; background:#444;}/* keep the 'next' level invisible by placing it off screen. */#hmenu ul,#hmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#hmenu :hover ul :hover ul{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}#hmenu :hover ul li {margin:0; border-top:1px solid #666;}#hmenu :hover ul li a {width:120px; /* Width of sub menu item */padding:0; text-indent:10px;background:#333; /* Drop down sub item background color */color:#ccc; /* Drop down sub menu item font Color */height:30px; line-height:30px;}#hmenu :hover ul li a.fly {background:#333 url(http://lh3.ggpht.com/_-A4vw5BwqxA/SpjMFZwRqII/AAAAAAAADoU/BBH3Fw1x8nA/right-arrow.gif) no-repeat rightcenter;}#hmenu :hover ul :hover {background-color:#c60; color:#fff;}#hmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;}#hmenu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#333; /* Dropdown Sub Menu background color */color:#ccc; /* Dropdown Sub Menu font color */}#hmenu :hover ul :hover ul :hover {background-color:#c60; /* Dropdown Sub Menu mouse over color */color:#fff;/* Dropdown Sub Menu mouse over font color */}
4- احفظ القالب .
5- الخطوة الموالية من :
 لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة   html/javascript .
6- انسخ الكود التالي داخل الاداة ثم احفظ الاداة :
<ul id="hmenu">
<li class="current"><a href="#url"><b>home</b></a></li>
<li><a href="#url"><b>About Us</b></a></li>
<li><a class="sub" href="#url"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub"><a class="fly" href="#url">Dropdown two<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="#url"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown one</a></li>
<li><a href="#url">Dropdown two</a></li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a href="#url">Dropdown five</a></li>
<li><a href="#url">Dropdown six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="support"><a href="http://rydnet.blogspot.com"><b>Blogger Tricks</b></a></li>
</ul>

تعديل الكود :

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

==> قائمة منسدلة باللون و الشكل الذي تريد  <===


هذه بعض النماذج من القائمة المنسدلة :


اضافة قائمة منسدلة رائعة جدا         قائمة منسدلة-1   جديد !


اضافة قائمة منسدلة رائعة جدا         قائمة منسدلة-2   جديد !

اضافة قائمة منسدلة رائعة جدا         قائمة منسدلة-3   جديد !  

اضافة قائمة منسدلة رائعة جدا           قائمة منسدلة-4   جديد !

اضافة قائمة منسدلة رائعة جدا

      قائمة منسدلة-5    جديد !

اضافة قائمة منسدلة رائعة جدا       قائمة منسدلة-6    جديد !

rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:



Paste This HTML Code On Your Page:


التعليقات : 14

فجر مصر

يا باشا ممكن تساعدنى انا ركبت الكود بس وركب تمام بس القاوائم المنسدلة لا تظهر

حمزة رمزي

انا قمت بتجريب الكود في مدونة تجريبية وركب تمام وظهرت القوائم بشكل طبيعي ..ربما اخطات في تركيب الاضافة
...اعطني رابط مدونتك لارى النتيجة وبعدين نشوف اين الخلل.

Unknown

but how we can extend the Menu bar ( black bar contains the menu and subMenu)
where is the code who is responsible to edit bar dimension

حمزة رمزي

(search this cod( #hmenu
: and add this cod
;width:500px
you can change the number 500

باديس عبده

قائمة جميلة قيد التجربة
شكرا لك
http://kitabilakom.blogspot.com/

admen m-s-m

طب أنا ملقتش الكود عندي ايه العمل

حمزة رمزي

لا بد من وجود الكود اعد البحث مرة اخرى

mr.aladdin

السلام عليكم هذا الكود ]] مش موجود بالرغم انى عملت مدونه جديده ولم اجده ايضا فى الجديده رجاء من حضرتك ان تشوف لى حل وجزاك الله خيرا

حمزة رمزي

هذا الكود لابد من وجوده في اي مدونة
لهذا ابحث عنه جيدا

Moneer Al-Ajhar

السلام عليكم
مشكور على مجهودك اخي
لكن انت لم تشرح لنا لو كان عندي اكثر من موضوع للمدونة -- القصد انت شارح على خمس مواضيع عندك لكن مدونتي اريد فيها تسعة مواضيع اين اضع بااقي الاكواد
وايظا الموضوع الاول اريد له قائمة منسدلة والثاني لا والثالث اريد لة الرابع لا اريد لو وهكذا
اين اضع الاكواد ؟
اذا كان هناك من لا يريد الروابط ذات اللون الاخضر - ماذا يفعل
ولم افهم اين اضع اضف اداة من التخطيط - فوق او تحت او تحت الشعار ؟ اين بالضبط
واخير - هل الاصفر رابط المدونة

يا ريت تكمل معروفك معنا - انت الوحيد اللي شفتك شارح عن القائمة النسدلة
وجزاك الله الف خير

Moneer Al-Ajhar

اعذرني اخي - انا اسأل لافيد الاخرين
انا عندي مدونة ووضعت لها قالب - و ال skin موجود
والقوائم معرفة من القالب - ماذا اعمل
هل امسح التعريفات الاكواد القديمة واضع هذة محلها
هل امسح ال skin القديم

حمزة رمزي

السلام عليكم
اعطني شكل القائمة وروابطها وانا اعطيك كود هذه القائمة هدية مني اليك
ارسم القائمة واكتب الروابط وارسلها الي .

حمزة رمزي

اما skin فلا تمسحه
فقط امسح كود القائمة الموجودة مع القالب وكذلك كود css الخاص بها
واضف كود القائمة الجديدة.
تحياتي......

midooo000ooo

شكررررررررررا

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