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

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

الطريقة

نقوم بفتح Blogger
ثم نختار "قالب" من القائمة الموجودة على اليسار

ثم نضغط على "تحرير HTML"

ثم قم بالبحث عن " ]]</b:skin> " بالضغط على Ctrl + F وقبلها مباشرة قم باضافة الكود التالي

#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/AVvXsEiQNXsAURG1xPb4l0cuRMIRwHKpRDpNyEmYLA2vAz4EQ1jhxB6Y8EoREAU5tGIzYaHA-mv9GvRzlF194ERkKULpSgMTIF9hGijFFv3i4KdHWpC6OU6K44UEn8BBFgtrFPO8jnpY9ac70ro/) /* 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/AVvXsEiMaruK_aWkAGw4WSi1fImYRxyHiFBqdrs0NAnCc48naTqn8R25GqBj4doRIFhiDVQ09fmRzfT_SRn9e2g1_avAz1RZOekdmqO6Eu-nf73VluBEQf-99By1JiMlxbnF0Ef4Z5t00sd4F9A/) 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 */}

ثم قم بالحفظ
وتوجه إلى التخطيط
ثم إضافة أداة ثم اداة HTML / Javascript
ثم قم بلصق هذا الكود

<li><a href="#url"><b>About Us</b></a></li>

<li><a class="sub" href="#url"><b>Dropdown</b></a>

<ul>

<li><a class="fly" href="#url">Dropdown one</a>

<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>

</li>

<li class="sub"><a class="fly" href="#url">Dropdown two<!--[if gte IE

7]>

<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>

</li>

<li><a class="fly" href="#url">Dropdown five</a>

<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>

</li>

</ul>

</li>

<li><a class="sub" href="#url"><b>Dropdown</b></a>

<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>

</li>

</ul>

اللون الازرق = الاقسام الرئيسية .
اللون الاحمر = الاقسام الفرعية للاقسام الرئيسية .
اللون الاخضر = الاقسام الثانوية للاقسام الفرعية .
* تغيير الروابط : اللون الاصفر و يقابل كل قسم او فرع.

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

مواقع صديقة

المشاركات الشائعة

تابعنا جديد موقعنا

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

شارك هذا الموضوع

اشترك فى المدونة

مواضيع ذات صلة

مواقع صديقة

المشاركات الشائعة

تابعنا جديد موقعنا