اضافة قائمة مسندلة (عمودية ) الى مدونات بلوجر

adel    أبريل 18, 2012    دروس بلوجر , قوائم مسندلة    تعليق   

قد يهمك ايضًا

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

كيفية اضافة القائمة المسندلة ؟

1. نقوم بتسجيل الدخول الى لوحة تحكم المدونة بلوجر
2. من لوحة التحكم نختار -التخطيط- ثم نختار -اضافة أداة- نقوم بلصق الكود التالي.ثم نقوم بحفظ الأداة.

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script> 
<style> 
/* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/ 
font: normal 13px Verdana; 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
background: white; 
border: 1px solid black; 
border-bottom-width: 0; 
visibility: hidden; 
z-index: 100; 
}
.ddsubmenustyle ul{ 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
border: 0px none; 
}
.ddsubmenustyle li a{ 
display: block; 
width: 170px; /*width of menu (not including side paddings)*/ 
color: #000000; 
background-color: #FFFFE0; 
text-decoration: none; 
padding: 4px 5px; 
border-bottom: 1px solid black; 
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/ 
display: inline-block; 
width: 170px; /*width of menu (include side paddings of LI A*/ 
}
.ddsubmenustyle li a:hover{ 
background-color: #000000; 
color: #ffffff; 
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/ 
padding-left: 4px; 
border: 0; 
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/ 
position: absolute; 
padding-top: 3px; 
left: 100px; 
border: 0; 
}
.ddiframeshim{ 
position: absolute; 
z-index: 500; 
background: transparent; 
border-width: 0; 
width: 0; 
height: 0; 
display: block; 
}
 
/* ######### Vertical Menu ######### */
.markermenu{ 
width: 175px; /*width of side bar menu*/ 
clear: left; 
position: relative;
}
.markermenu ul{ 
list-style-type: none; 
margin: 5px 0; 
padding: 0; 
border: 1px solid #9A9A9A; 
}
.markermenu ul li a{ 
background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcEcK1LF1BN9p5hAycX915vwNlVmn9H7OVwsNl_fmWAB1BuFU1socQgmh3IiOhSAx4IfyGSx8Bon5taVfgpIoqduY1i-H9jb05w6dki0h6GSREYNRk_h3JC5aVlaiquwOwnf2aNQd0qF4/s400/bulletlist.gif) no-repeat 3px center; 
font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e; 
display: block; 
width: auto; 
padding: 3px 0; 
padding-left: 20px; 
text-decoration: none; 
border-bottom: 1px solid #B5B5B5; 
}
* html .markermenu ul li a{ /*IE6 hack*/ 
width: 155px; 
}
.markermenu ul li a:visited, .markermenu ul li a:active{ 
color: #00014e; 
}
.markermenu ul li a:hover, .markermenu ul li a.selected{ 
color: #ffffff; 
background-color: #000000; 
}
 
</style>
<div id="ddsidemenubar" class="markermenu">
<ul> 
<li><a href="#">خانة 1</a></li> 
<li><a href="#" rel="ddsubmenuside1">خانة 2</a></li> 
<li><a href="#" rel="ddsubmenuside2">خانة 3</a></li> 
<li><a href="#">خانة 4</a></li> 
<li><a href="#" rel="ddsubmenuside3">خانة 5</a></li> 
</ul> 
</div>

<script type="text/javascript"> 
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") 
</script>
<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">
<li><a href='#'>خانة 2 فرع 1</a></li> 
<li><a href='#'>خانة 2 فرع 2</a> 
<ul> 
<li><a href='#'>خانة 2 فرع 2.1</a></li> 
<li><a href='#'>خانة2 فرع 2.2</a></li> 
</ul>
</li> 
<li><a href='#'>خانة 2 فرع 3</a> 
<ul> 
<li><a href='#'>خانة 2 فرع3.1</a></li> 

</ul>
</li> 

<li><a href='#'>خانة 2 فرع4</a></li>
</ul>
 
<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
<li><a href='#'>خانة 3 فرع 1</a></li> 
<li><a href='#'>خانة 3فرع  2</a></li> 
<li><a href='#'>خانة 3فرع 3</a> 
<ul> 
<li><a href='#'>خانة3فرع3.1</a></li>
<li><a href='#'>خانة 3فرع 3.2</a></li> 
<li><a href='#'>خانة 3فرع  3.3</a></li> 
<li><a href='#'>خانة3فرع3.4</a></li> 
</ul> 
</li> 
<li><a href='#'>خانة 3فرع  4</a></li> 
<li><a href='#'>خانة 3فرع 5</a> 
<ul>
<li><a href='#'>خانة 3فرع  5.1</a></li> 
<li><a href='#'>خانة3 فرع 5.2</a> 
<ul> 
<li><a href='#'>خانة 3فرع 5.2 1</a></li> 
<li><a href='#'>خانة 3فرع 5.2 2</a></li> 
<li><a href='#'>خانة 3فرع  5.2 3</a></li>
</ul> 
</li> 
</ul> 
</li> 
<li><a href='#'>خانة 3فرع  6</a></li> 
</ul>
<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
<li><a href='#'>خانة 5فرع 1</a></li> 
<li><a href='#'>خانة 5فرع 2</a></li>
<li><a href='#'>خانة 5فرع  3</a></li> 
<li><a href='#'>خانة5فرع4</a></li> 
<li><a href='#'>خانة 5فرع 5</a></li> 
</ul>

اجراء التعديلات اللازمة على الأداة

1- قم بوضع روابط الصفحات أو الرسائل مكان الرمز # لكل خانة على حدى.

2- قم بتغيير كلمتي "خانة" و "فرع" بالعناوين المناسبة.

3- قم بتغيير اللون " #ffffff"وكذا اللون"#000000" اذا أردت تغيير لون "مرور زر الماوس" فوق عناوين القائمة المسندلة.

4- قم بتغيير اللون"#F2F2F2" اذا أردت تغيير لون القسم الأساسي من القائمة المسندلة.

5- قم بتغيير الألوان "#FFFFE0  " و "#000000 " اذا أردت تغيير لون الأقسام الفرعية من القائمة المسندلة.

6- احفظ التغييرات وانتقل لمعاينة القائمة المسندلة الجديدة بمدونتك.