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

 السلام عليكم ورحمة الله وبركاته اليوم اقدم لكم قائمة من القوائم الجميلة لبلوجر بتقنية ال css

فائدة هذه الاضافة :

• - تسهيل التصفح فى مدونتك
• - اضافة روابط مختلفة لداخل وخارج مدونتك
• - اضافة لمسة من الجمال الدى مدونتك

أضافة القائمة الافقية المنسدلة :
1- انسخ الكود ال css

كود css

 @charset "utf-8";

/* CSS Document */ body{ padding: 25px; } /*^'^ Navigation Structure ^'^*/ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_CE_sN8ur4IDAgn_M1H5SwMgv98PsgBmLsTLk-NSd0wGweeFCfy6VZXu8KQWf8RIVmhM5NiScpROmGR87YEP-PVcpLDhPcPGiUPIbL3lgScJq1I2ZVtJktJ_Iq7pei7XTkK1Oyfwlruv/s1600/nav-bg.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:right; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:right; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ right:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ right:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; right:100%; } /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: #FFFFFF; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-1PeaWymbAu_uNpSX0Pv2mBj23wcziISPy17jt48I-NM8OMlGbs8xYEtJa0HUBoqXghGF-9GgpPdyoAGl9GTwGPh24YFG4nYqVCY9tJHpywAeWD6kfDjtJHTIyqGLISLopwMKZl6z5Q0/s1600/item-primary-bg.gif); background-repeat: no-repeat; background-position: top; } #nav-container a:hover{ color: #6C3600; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-1PeaWymbAu_uNpSX0Pv2mBj23wcziISPy17jt48I-NM8OMlGbs8xYEtJa0HUBoqXghGF-9GgpPdyoAGl9GTwGPh24YFG4nYqVCY9tJHpywAeWD6kfDjtJHTIyqGLISLopwMKZl6z5Q0/s1600/item-primary-bg.gif); background-repeat: no-repeat; background-position: center; } /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2fPNu15H9crVbCltS-8b6TUBzmsHPWsJJDkeF1Zlfr0I_iFq1NTfMkyZne0u_FuDCrq1umdeZ8DzUE0R8hf4ry1krPQn0UYtRDzQmavOZ93auxFhEkM53gPvXRgWRgwmUviBvQym7bi-m/s1600/item-secondary-container-bg.jpg); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500; } /*^'^ Secondary Items ^'^*/ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5iu0XVeQE-cHNYrFkUmpW9gnYYWLtgS0dHOB67eMshZOD8exFe7Y0rX_ZFeGKecQnZ9mUeV3A_ASBV7G7yclSysdNLOcNqXcRtt9ZTruWZk3cWqb3NAOEHQ1ws-ERusu5e0lTXhnBkyR/s1600/item-secondary-bg.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; } /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5iu0XVeQE-cHNYrFkUmpW9gnYYWLtgS0dHOB67eMshZOD8exFe7Y0rX_ZFeGKecQnZ9mUeV3A_ASBV7G7yclSysdNLOcNqXcRtt9ZTruWZk3cWqb3NAOEHQ1ws-ERusu5e0lTXhnBkyR/s1600/item-secondary-bg.jpg); background-repeat: no-repeat; color:#CC0000; } /*^'^ Secondary Item Titles ^'^*/ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9L764un0TyCjAyrkBABC_fPSb-Bmach2Mi6hBhMCoBT-IjCM6GWfiz-0_8lD63uIziR7NVLz1B2ZnHJ2ic7O6sbLcVtjSkeN5z34aQHDvC0t-hweVpOZxSRfCgKmcjQjxgKnL_2-gKRh/s1600/item-secondary-title-bg.jpg); */ background-repeat: no-repeat; font-weight:bold; } /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-right-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }

كود html

<div class="nav-container-outer"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ2drw3aw5iOHAlMKRYtWWOpU_NHOiMFsJuhpTwx0mGdEFde2JHqTewTdmBwWm0AN6hiN2bk29PFATfy4JCRfTKGVSQ-6Y7C_c9XmDSwgpgDQ_ZlbekwIDuK2FEmDub5s96esjEz5SgXnO/s1600/nav-bg-l.jpg" alt="" class="float-left" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRAMiyLJK3bjd-jbxwtE_eToyG8QQRZ6ejaziJOpgyc8erxMTa6BBvS2ZWLzD2lIB3Rlu4v5lADJcL-pp6staLW1mM0iDkIZFf26vUqTkE_2Qb6XeyC6RP0XG9o5FclbsP3SS0ki9Ad_bh/s1600/nav-bg-r.jpg" alt="" class="float-right" /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#">الصفحة الرئيسية</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">عدل الى قسم</a> <ul style="width:150px;"> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">عدل الى قسم</a> <ul style="width:150px;"> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">عدل الى قسم</a> <ul style="width:150px;"> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">عدل الى قسم</a> <ul style="width:150px;"> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">عدل الى قسم</a> <ul style="width:150px;"> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#">عدل الى فرع </a></li> <li><a href="#">عدل الى فرع </a></li> </ul></li> <li class="clear">&nbsp;</li></ul> </div>

2- افتح تصميم >>تحرير html -توسيع قوالب عناصر واجهة المستخدم

3- ابحث عن الكود التالى ب ctrl +f

]]></b:skin>

4- الصق فوقه كود ال css الذى نسخته

5- اضغط حفظ
  
6- انسخ كود ال html واذهب الى تصميم >> عناصر الصفحة
 

7- اختر اضافة اداة
 

8-اختر اداة html / java script 10- الصق كود الhtml فى الاداة واضغط حفظ اذهب الان للمعاينة

تعديل الروابط واضافة الاقسام :

افتح الاداة التى اضفتها فى عناصر الصفحة ستجد امامك كود ال html الذى نقلته كل ما عليك فعله هو ان تضيف اسماء الاقسام بتغير كلمة عدل الى اسم القسم سوف تجد ( عدل الى قسم ) ضع مكانها اسم القسم الذى سوف تنسدل منه الروابط الاخرى وستجد ( عدل الى فرع ) ضع مكانها اسم الاقسام التفرعية و الان قم بتغير علامة ال # بالرابط المطلوب التوصيل اليه.

ازالة او اضافة رابط رئيسى أو فرعى :

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

<li><a class="item-primary" href="#">اسم القسم</a> </li>

لاضافة قسم بفروع الى القائمة قم بأضافة الكود التالى 

<li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">اسم القسم</a>

<ul style="width:150px;"> <li><a href="#">اسم الفرع</a></li> </ul></li>

لاضافة فرع الى القسم قم بأضافة الكود التالى 

<li><a href="#">اسم الفرع</a></li>

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

الان اقول مبروك الاضافة واى مشكلة يرجى ابلاغى بها .
 

تحياتى احمد عادل.