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

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

تطوير بلوجركل

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

محمد عبد الوهاب منذ 12 سنة تقريبا 0

A+ A-

facebook twitter

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

والصلاة و السلام على المبعوث رحمة للعالمين سيدنا محمد النبى الأمى وعلى آله وصحبه أجمعين

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

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

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

1234567891011121314151617181920

<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*/ }.ddsubmenustborder-bottom: 1px solid black; }* html .ddsubmenustyle li{ /*IE6 CSS hack*/ display: inline-block; width: 170px; /*width of menu (include side payle 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{ positio 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; displborder: 1px solid #9A9A9A; }.markermenu ul li a{ background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTkGEGQZNc8_79bbCOHKnohFsICkqlbcPH83uiKaBq_nxrkyxyOhg1pCIF8FR5BJB_ZnH5-8D3_1rjSwDRNPBZg3lJCiwz9h3QRwh_O0GVlelORRc5i3YbHXjaTxowrvg8Un41wu0wSg/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 hr"#">خانة 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>

'>خانة 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><ali><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- قم بوضع روابط الصفحات أو الرسائل مكان الرمز # لكل خانة على حدى.

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

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

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

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

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

الوسوم: تطوير بلوجر كل