شرح تركيب قائمة علوية لمدونتك
بسم الله الرحمن الرحيم - السلام عليكم ورحمة الله وبركاتة
كيكفم إخوانى / أخواتى الأعزاء شرح بسيط جداً لكيفية تركيب كود قائمة علوية بشكل إحترافى وجزاب العديد يريد أن يكون لدية أكثر من قائمة فى هذة التدونية سنشرح لك طريقة التركيب + قائمة تم تصميمها من مدونة هادى ستور قائمة بسيطة وانيقة أتمنى أن تنال إعجابكم .
- ستتوجة إلى لوحة التحكم الرئيسية ثم تحرير القالب وستبحث عن هذا الوسم ]]></b:skin> وستضع الكود التالى اعلاة
مثل ما هو موضح بالصورة أعلاة وستقوم بلصق هذا الكود
/* Wrap */
#wrap {
margin: 0px auto;
width: 900px;
}
/* Head */
#head {
background-color: #E1EDB9;
margin: 0px auto;
padding: 10px;
color: #FFF;
font: bold 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#head span {color: #FFF; font: normal 12px tahoma;}
#head span a, #head span a:link, #head span a:visited {color: #D54E21;}
#head span a:active, #head span a:hover {color: #FFF;}
/* Dropdowns Menu */
#pop {
background: #E1EDB9;
height:24px;
margin: 0;
padding: 0;
list-style: none;
}
#pop li ul {
margin: 0;
background: #E1EDB9;
padding: 0;
list-style: none;
}
#pop li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#pop li li {
float: right;
width: 175px;
margin: 0;
padding: 0;
}
#pop li a, #pop li a:link, #pop li a:visited {
font: normal 12px Tahoma;
color: #414A52;
text-decoration: none;
background: #E1EDB9;
display: block;
padding: 5px 12px;
}
#pop li a:hover, #pop li a:active {
color: #FFF;
display: block;
background: #FF4242;
padding: 5px 12px;
}
#pop li li a, #pop li li a:link, #pop li li a:visited {
background: #E1EDB9;
color:#414A52;
width: 175px;
margin: 0px;
padding: 5px 12px;
border-top: 1px solid #F5F9FB;
}
#pop li li a:hover, #pop li li a:active {
color: #FFF;
background: #FF4242;
}
#pop li ul {
position: absolute;
width: 199px;
display: none;
right: 0;
}
#pop li:hover ul {
display: block;
}
* والخطوة الثانية والأخيرة ستقوم بالبحث عن هذا الكود أو ما شابة ليه
قم بلصق هذا الكود
<div id="wrap">
<!-- Header -->
<!-- NavBar - hadystore -->
<ul id="pop">
<li><a href="http://hadystore.blogspot.com/">الرئيسية</a></li>
<li><a href="#">قائمة دروس CSS</a>
<ul>
<li><a href="#">هل تريد أن تتعلم تقنية CSS ؟</a></li>
<li><a href="#">تطبيقات ودروس متنوعة</a></li>
<li><a href="#">خدع CSS وطرق تطبيقها</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
</ul>
</li>
<li><a href="#">وصلة!</a>
<ul>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
<li><a href="#">وصلة فرعية رأسية</a></li>
</ul>
</li>
</ul>
</div>
والآن قم بحفظ القالب تم بحمد الله
