السلام عليكم ورحمة الله وبركاتة .... موعدنا اليوم مع اضافة جميله جدا ومفيده لكل صاحب مدونه يبحث عن قائمة للتسميات تحت هيدر المدونه ..الصوره المرفقه توضح شكل القائمه في مدونتك وشكلها حين الضغط علي احد اقاسامها المنسدله
]]</b:skin> قم بالبحث عن هذا الكود الصغير
وضع قبله الكود الموجود بالاسفل
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2saKQFtwz0j3MstMlAq5zEE7f8a3einROXKqZ4239U863hwnmtY1IrUISCOpEDz5LzV303teMNbU18LI1RkT8NL6XWi8EGFwZdjr8hzVGfVglEyNNt-c_IlvmOauGMUrLh5P_Ph6FwE/) /* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXhr0MlsZHMY66-yORHQOHE5Eq-Gih3hrGuRR_keShhyphenhyphen2elL5tU-Jz0_pz1xuNqNmAg5giQv5YG1CxgAxC6ASYy1A8AulomfaOtN__H4oYEy44WXPz-z06d4Dt2YVVnAhMxuYAeGARbE/) 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 */}
*الان قم بحفظ قالب مدونتك.
* الان قم بالذهاب مجددا الى عناصر تصميم الصفحه.
* قم بانشاء اداه جديده من نوع جافا سكربت.
* وقم بوضع الكود الموجود بالاسفل بداخل الاداه وقم بحفظ الاداه.
<ul id="hmenu">
<li class="current"><a href="Home"><b>Home</b></a></li>
<li><a href="About Us"><b>About Us</b></a></li>
<li><a class="sub" href="#"><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="#"><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="www.Blogger9.com"><b>Blogger Tricks</b></a></li>
</ul>
ملحوظه هامه:- قم بتغيير التسميات والروابط داخل الكود بما يلائم مدونتك. ok.
أصدقاء(تطوير ويب)
2تعليقات Blogger
2 عدد التعليقات على موضوع طريقة عمل قائمه منسدله للتسميات في مدونة بلوجر
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .
