11:39 م
Unknown
طريقة صنع قائمة منسدلة لمختلف محتويات المدونة
نعم . كثير من الناس يرون أن مدونتهم لاتصبح إحترافيية بحكم أنها تنقصها قائمة منسدلة تتضمن مختلف محتويات المدونة فيلجئ البعض إلى تحميل قالب كامل من أجلها لا كن هذا لم يبقى مشكلا منذ هذه اللحظة .... الآتى قائمة تشبه التي في الصورة مع شرح تركيبها بطريقة سهلة
أولا : نتتبع المسار التالي :
1 "لوحة التحكم" 2 "القالب" 3 "تحرير HTML" ثم " المتابعة" 4 نضغط من لوحة المفاتيح على " Ctrl + F" ونبحث فيه عن هذا الكود
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
|
وقم بتغيير القيمة 1 بـ 4 وغير كلمة No بـ Yes
ثم في نفس المربع نبحث عن هذا الكود :
]]></b:skin>
|
وعند إجاده نظع فوقه مباشرة هذا الكود:
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWicdT9EriNpZ1_1uNyMLRYBG0_X_hMfzSFpmZg33UHav6LgZbVPXj5j10NQl2xP9aa2DIQbFUinwJ7741t5HFD97lY23vpsWwRZTdU9hGLL0_lBKe16JjeBWY15bfYcQuNQR-tuwGcWc/h120/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:right;
padding:0px 8px 0px8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-right:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*right:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:right;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zon-yrbSJ42EYlz3uZbIDvm73-Hz6cTbg0q8mDz2Un4y9xvRRfFT_nhr3JQUz7AZI6FGFaf8x9cdWvHsM9g1A86RemzES1-thZ1ItLDcNUpdn3ydcW0SmZ1ZNcjY1Wr9hJ2tci-aVGM/h120/current-bg.gif) top left repeat-x;
color:#ffffff;
}
/*End Css Menu from http://loyo-blogger.blogsbot.com*/
|
وبعدما أن ثم إلصاق الكود نضغط على "حفض النمودج" ونتوجه إلى تخطيط تم نضغط على "إضافة أذات" ونختار " HTML/JavaScript" ونلصق فيها هذا الكود:
<div class="menu">
<ul>
<li><a href="#" id="current">الصفحة الرئيسية</a></li>
<li><a href="#">المنتجات</a>
<ul>
<li><a href="#">المنتج 1</a></li>
<li><a href="#">المنتج 2</a></li>
<li><a href="#">المنتج 3</a></li>
<li><a href="#">المنتج 4</a></li>
</ul>
</li>
<li><a href="/faq.php">بخصوص مدونتة</a>
<ul>
<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="/contact/contact.php">إتصل بنا</a></li>
</ul>
</div>
|
يجب بتغيير عناصر القائمة بتغير أسماء العناصر
و ضع مكان # رابط العنصر أو الصفحة التي كتبت إسمها
وضغط على " حفض" وضع الاداة في أعلى المدونة ستلاحظ
أنه أصبح لك مكان جديد لتضيف فيه أذات في اعلى المدونة وذالك
بفضل القيمتين الذي تم تغييرهما في الكود الأول .
