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

بسم الله الرحمان الرحيم

مرحبا بكم في

 مدونة استفد

الكثير من المدونين يبحثون عن هذه الإضافة

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

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

إليكم صورة عن الإضافة:

أما الآن فبسم الله نبدأ التطبيق:

1. 
   
2. سجل الدخول لمدونتك
3. 
   
4. ومن لوحة تحكم المدونة نختار -تصميم -اضافة أداة html/javascript- 

ونلصق الكود التالي الموجود بالأسفل

ثم نعمل حفظ .

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script> 
<style> 
/* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */
/ 
font: normal 13px Verdana; 
margin: 0; 
padding: 0; 
position: absolute; 
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively
*left: 0; 
top: 0; 
list-style-type: none; 
background: white; 
border: 1px solid black; 
border-bottom-width: 0; 
visibility: hidden; 
z-index: 100; 
}

display: block; 
wi
.ddsubmenustyle ul{ 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
border: 0px none; 
}
.ddsubmenustyle li a{
 dth: 170px; /*width of menu (not including side paddings)*/ 
color: #000000; 
background-color: #FFFFE0; 
text-decoration: none; 
padding: 4px 5px; 
ddings of LI A*/ 
}
.ddsubmenust
border-bottom: 1px solid black; 
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/ 
display: inline-block; 
width: 170px; /*width of menu (include side p
ayle li a:hover{ 
background-color: #000000; 
color: #ffffff; 
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/ 
padding-left: 4px; 
border: 0; 
}
n: absolute; 
z-index: 500; 
background: transparent; 
border-width: 0; 
width: 0;
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/ 
position: absolute; 
padding-top: 3px; 
left: 100px; 
border: 0; 
}
.ddiframeshim{ 
positi
o 
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; 
MS" ;color: #00014e; 
displ
border: 1px solid #9A9A9A; 
}
.markermenu ul li a{ 
background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWN7pjnZIAHvIHS8BEqK0RCz1MBoIRX6NUkZtzWZyQxCz-4rlaJ5sYYtViWI21M3odN20Vq7Ceo8naWgaaeIGwQ1nKBJS1B6WzlZkbKlHGlop1uT-wWM7fKWfiSpx1osB8mgBGigsnhEc/s400/bulletlist.gif) no-repeat 3px center; 
font: bold 13px "Lucida Grande", "Trebuchet
 ay: 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; 
}
ef="#" rel="ddsubmenuside2">خانة 3</a></li> 
<li><a href=
.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 h
r"#">خانة 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">
خانة 2 فرع 1</a></li> 
<li><a href='#'
>
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> 
 href='#'>خانة 2 فرع3.1</a></li> 
<li><
a

</ul>
<li><a
</li> 

'>خانة 2 فرع4</a></li>
href='
#
</ul>
 
dsubmenuside2" class="ddsubmenustyle blackwhite">
<li><a h
<ul id="
dref='#'>خانة 3 فرع 1</a></li> 
<li><a href='#'>خانة 3فرع  2</a></li> 
<li><a href='#'>خانة 3فرع 3</a> 
<ul> 
 href='#'>خانة3فرع3.1</a></li>
<li><
a
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><a 
</li> 

<href='#'>خانة 3فرع  4</a></li> 
<li><a href='#'>خانة 3فرع 5</a> 
<ul>
a href='#'>خانة 3فرع  5.1</a></li> 
<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> 
</ul> 
</li> 
</li> 
'>خانة 3فرع  6</a></li> 
<li><a href='
#
</ul>
"ddsubmenuside3" class="ddsubmenustyle blackwhite">
<li><a
<ul id
= 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

- مكان الرمز التالي # ضع الروابط يعني مثل http://.......

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

3-غير اللون " #ffffff"وكذلك اللون"#000000" إلى اللون الذي تريده إذا أردت 

تغيير اللون "مرور زر الماوس" فوق العناوين.

4-غير اللون"#F2F2F2" وهو لون القسم الأساسي للقائمة.

5- قم بتغيير اللونين "#FFFFE0  " و "#000000 " وهي ألوان الأقسام 

الفرعية من القائمة المسندلة.

6- الآن احفظ التغييرات ومبروك عليك الإضافة الجميلة

أي استفسار لا تتردد

Tweet

Sharing Widget byestafid

يمكنك نسخ روابط هذه التدوينة
URL
HTML
BBCode

التصنيف : دروس بلوجر