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

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

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:


التعليقات : 19

hamza ramzi

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

khaled abdu

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

Hisham Elsayad

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

hamza ramzi

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

mohamed helmy

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

hamza ramzi

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

mohamed helmy

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

mohamed helmy

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

mohamed helmy

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

hamza ramzi

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

karim delileche

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

تكنلوجيا العراق

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

Amjad Mohammad

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

hamza ramzi

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

Portsaid Ez

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

noon نون

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

رويال ستون - Royal Stone

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

رويال ستون - Royal Stone

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

hamza ramzi

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

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