اعلان مدفوع

اخر الأخبار

الخميس، 29 أغسطس 2019

شرح كيفية اضافة قائمة منسدلة في بلوجر

شرح كيفية اضافة قائمة منسدلة في بلوجر

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

شرح كيفية اضافة قائمة منسدلة في بلوجر


تركيب الاضافة :
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdhTKEcYeUkmCJzwYXYTyZ6E71EwQDHatHKcH5_nHVkKqSVAKBMHqJTkp2w80WoujKjiG1NgZZbz3Z1Ll4j2FrBrWlQOSDt7nGlO7wlNVKvCm7uYjrHbSJQ_jfF7pex2G2apZLzckrPc/) /* 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/AVvXsEgYkMtdjCjKoQJm87jLXJGZH_eAyH60JvNA1PQOZPw90Nia4bcSDI6STgHhUN3cgAt_jRcnzsyXZ0V4F_44YRP8Ly9yc3TYvKY7LzsPDk0ZakKK22lOZRhH4wUYdH1cH2U-kKav7weTxKc/) 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="https://sham4oo.blogspot.com/"><b>Blogger Tricks</b></a></li>
</ul>


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




ليست هناك تعليقات:

إرسال تعليق

اعلان اول الموضوع

اعلان وسط الموضوع

إعلان اخر الموضوع