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

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

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- ثم قم بحفظ القالب .
الخطوة الموالية : من لوحة التحكم   >>>   تخطيط  >>>     اضافة اداة html/javascript 
*انسخ الكود التالي داخل الاداة ثم قم بحفظ الاداة .
 (يمكنك نقل الاداة الى المكان الذي تريد)
<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="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:


التعليقات : 21

حمزة رمزي

التعليقات تشجع على المزيد من العطاء

Unknown

اكثر من رائع ..قمة في الابداع دمت بخير

Unknown

مشكور علي الدرس يا غالي
واهداء مني هذا الدرس كيفية تكويد ناف بار و اضافة تاثيرات css3 اليه
https://www.youtube.com/watch?v=oRIU2jQyVAc

حمزة رمزي

شكرا للجميع على التفاعل

Unknown

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

حمزة رمزي

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

Unknown

مش فاهم ياريت حضرتك توضح اكتر او تقولى الخطوات

Unknown

ممكن ارفع لحضرتك القالب وحضرتك تعملى التعديل عليه انا عامل قائمه منسدله بس المشكله عندى فى الروابط

Unknown

ارجوك ممكن تساعدنى

حمزة رمزي

حاضر انا ساساعدك
هات رابط مدونتك وساساعدك ان شاء الله

karim delileche

شكرا لك اخي بالتوفيق

البعد الأخر

لم تضبط معي القائمه المنسدله ممكن ارسلك القالب وتعملي عليه القائمه واكون مشكور لك كثيرا

Unknown

ممكن تعملي القائمة انتا ؟!!

حمزة رمزي

نعم ممكن ......

Unknown

نفس المشكلة القائمةالمسندلة

Unknown

شرح جدا جميل ومفيد مشكور

رويال ستون

ممكن تساعدنى يا اخى

رويال ستون

ممكن تساعدنى يا اخى

حمزة رمزي

ما هي المشكلة ؟؟؟؟

مدون تعلم

أريد ان أضعها في الشريط العلوي من المدونة

admin

اخي الكريم اريد طريقة عرض القائمة في الجوال

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