اعلن هنا
أعلن هنا الخميس، 28 أغسطس 2014
طريقة عمل قائمة منسدلة للتسميات في مدونة بلوجر 2014
السلام عليكم اليوم سوف اتحدث لكم عن اضافة جميلة يطمح اليها كل مدون ,هذه الاضافة عبارة عن قائمة منسدلة للتسميات و أقسام المدونة...
طريقة عمل قائمة منسدلة للتسميات في مدونة بلوجر
1- من لوحة التحكم >>> قالب >>> تحرير html ( احفظ نسخة من قالب المدونة من باب الاحتياط ) ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQuXTd2oxoa_866H1Uz_U5udGW_t9UeFWKvM5lHSdKWt4oeGTzSHuV9S1uvYqEh_wsVGuuyaGNAIXO2COTxsT6nJqCdwEPlL-5G8H4e49S0PLEx12U0LXgYAG8MtuFAxB7vKpIC40KZdo/) /* 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/AVvXsEj2yFaTLJEiCvUZWVmqpavJ2pd9uwxiAjtF13FqdFsIo4fajZ3jl3ZN3xZhwKjKgGpWnrjMmCcYlyBIezWutjJqu2Vmq2GU5lkqalrfoSodsCoyBBfgYqa7W33qtwsKOiEsYqEfIFfo78M/) 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>
*ملاحظة يجب ان تقوم بتغيير الروابط و التسميات بما يتناسب مع روابط و اقسام مدونتك الخاصة .
طريقة تعديل القائمة المنسدلة حتى تتلاءم مع مدونتك
- اللون الاخضر :عناوين الاقسام الافقية
- اللون الازرق :عناوين الاقسام العمودية المنسدلة عن الاقسام الافقية
- اللون الاحمر :عناوين الاقسام العمودية المنسدلة عن الاقسام العمودية
- اللون البرتقالي :روابط الاقسام (كل قسم يقابله رابطه الخاص)
مع تحيات حمزة رمزي.........
|
|
|
|
 قائمة منسدلة-5 - جديد ! |
|
[اذا اعجبك الموضوع هذه روابط النشر]
URL Of Post:
Paste This HTML Code On Your Page:
0 التعليقات
اعلن هنا
