السلام عليكم

اليوم سوف نعرف طريقة تركيب قائمة عليا مدهشة لمدونات بلوجر

لمعاينة القائمة

ناتي الى طريقة التركيب

1/ نذهب الى الادارة / قالب / تحرير القالب

2/ نبحث عن
]]>
ونضع فوقها هذا الكود
#topnavbar{
height:28px;
width:100%;
background:#333;
border-bottom:1px solid #2790B0
}
.topnavbar{
width:980px;
height:28px;
margin: 0 auto;
font:10px 'Droid Arabic Kufi','lucida grande',tahoma,verdana,arial,sans-serif;
line-height:28px;
}
.topnavbarhome{
float:right;
padding:0 0 0 15px;
text-decoration: none;
margin-right: 10px
}
.topnavbar a{
color:#f0f0f0
}
#tnmenu { width:600px;float:right;text-align: right; font-size: 10px; color: #787878; }
#tnmenu li { float:right;text-align: justify; padding:0 0 0 15px; font-size: 10px;display: inline; text-decoration: none; font-style: 400;border:0 }
#tnmenu li li{ display:none}
#tnmenu ul { list-style: none; margin:0; padding: 0; }
#tnmenu a{ text-decoration: none; color: #ccc; }
#tnmenu a:hover { text-decoration: none; color: #ccc; }



#tnmenu#submenu ul{height:28px}

#navbar{
background:#0097bd ;
height:46px;
width:980px;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
margin-bottom:10px;
}
#navbar a.home{
width:50px;
height:46px;
background:#222 url(http://4.bp.blogspot.com/-dwhsZWJm8K...s1600/home.png) center center no-repeat;
display:block;
float:right;
}
#botmenu{
background:#0097bd;
font:12px 'Droid Arabic Kufi','lucida grande',tahoma,verdana,arial,sans-serif;
text-align: right;
text-decoration: none;
margin:0;
height:46px;
float:right;
position: relative;
line-height:46px;
}
#botmenu ul{margin:0;list-style: none;}
#submenu {
margin:0 auto;
max-width:908px;
padding-left:2px;
position: relative;
}
#submenu .home{
width:50px;
height:46px;
background:#555
}
#submenu ul {
height:46px;
list-style: none;
margin: 0 auto;
padding: 0;
line-height:46px;
float: right;
}
#submenu li {
display: block;
float: right;
list-style: none;
margin: 0;
padding: 0;
color: #f0f0f0;
border-right:1px dotted rgba(0, 0, 0, 0.2);
border-left:1px dotted rgba(255, 255, 255, 0.15);
}
#submenu li.current a, #submenu li.current-cat a, #submenu li.current-cat-parent a, #submenu li.current-category-parent a, #submenu li.current-category-ancestor a, #submenu li.current-post-ancestor a, #submenu li.current_page_item a, #submenu li.current-menu-item a, #submenu li li.current-post-parent a{
color: #fff;
background:rgba(0, 0, 0, 0.1);
}
#submenu li a {
color: #f0f0f0;
display: block;
margin: 0;
padding: 0 20px;
text-decoration: none;
height:46px;
text-align:right;
text-align:center;
}
#submenu li a:hover{
text-align:center;
color: #FFF;
background:rgba(0, 0, 0, 0.1);
height:46px;
line-height:46px;
}
#submenu li a.sf-with-ul {
padding-right: 10px;
}
#submenu li li a, #submenu li li a:link, #submenu li li a:visited {
font-size: 12px;
color: #FFF;
margin: 0;
width:240px;
height:20px;
padding: 7px 10px;
line-height:20px;
text-align:center;
}
#submenu ul ul li{
border:none;
}
#submenu ul ul li:first-child{
border:none;
}
#submenu ul ul li:last-child{
border-bottom:none;
}

#submenu li li:last-child{
border-bottom:none;
}
#submenu li li a:hover, #submenu li li a:active {
background:#0097bd;
color: #FFF;
}
#submenu li ul {
background:#444;
border:0;
z-index: 9999;
position: absolute;
right: -999em;
height: auto;
width: 260px;
font:11px 'lucida grande',tahoma,verdana,arial,sans-serif;
margin:0;
list-style:none outside none;
padding:5px 0;
border-right:3px solid #2790B0
}
#submenu li ul a { }
#submenu li ul a:hover, #submenu li ul a:active {
background:#0097bd;

color: #FFF;
}
#submenu li ul ul {
margin: -43px 0 0 -100px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
right: -999em;
list-style:none outside none;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul, #submenu li ul:hover {
right: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}


ثم نبحث عن


ونضيف اسفله


الرئيسيه

• تبادل اعلاني
• اتصل بنا

<a class='home' href='#'/>

• قائمة فارغة
• قائمة
  • قائمة منسدلة

ثم نقوم بالحفظ

وستكون النتيجة مدهشة

ملاحظة

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



جميع الحقق محفوظة لمدونة المبدع





- See more at: تركيب قائمة عليا لمدونات بلوجر