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

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

1:01 ص اضافات بلوجر , المبدع

السلام عليكم 

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

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

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

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

2/ نبحث عن  

]]></b:skin>

 ونضع فوقها هذا الكود

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvdTc22idSeZ258qdNtqZZe7y9-Td9rsfE2lA13SHxOXieO6bYZ7CGO9r3bUUD-CzbkG5nw5EAbEb35NhX0nCQfAcxmJHSFtjBgOeY_MiCzqC5blPuPz3Iz8Pu1-KqLlVv1PBFqexLybN/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; }

3/ نبحث عن 

<div id='header-wrapper'>

ونضيف تحته هذا الكود

<div id='topnavbar'> <div class='topnavbar'> <a class='topnavbarhome' href='##'>الرئيسيه</a> <div id='tnmenu'> <div class='1' id='tnmenu'> <ul class='sfmenu' id='2'> <li class='3' id='menu-item-575'><a href='##'>تبادل اعلاني</a></li> <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-576' id='menu-item-576'><a href='##'>اتصل بنا</a></li> </ul> </div> </div> </div> </div> <div id='navbar'> <a class='home' href='#'/> <div id='botmenu'> <div class='menu-%d8%a7%d9%84%d9%82%d8%a7%d8%a6%d9%85%d8%a9-%d8%a7%d9%84%d8%b1%d8%a6%d9%8a%d8%b3%d9%8a%d8%a9-container' id='submenu'> <ul class='sfmenu' id='menu-%d8%a7%d9%84%d9%82%d8%a7%d8%a6%d9%85%d8%a9-%d8%a7%d9%84%d8%b1%d8%a6%d9%8a%d8%b3%d9%8a%d8%a9'> <li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-577' id='menu-item-577'><a href='####'>قائمة فارغة</a></li> <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-713' id='menu-item-713'><a href='###'>قائمة</a> <ul class='sub-menu'> <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-714' id='menu-item-714'><a href='###'>قائمة منسدلة</a></li> </ul> </li> </ul> </div> </div> </div> </div>

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

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

ملاحظة 

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

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

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

مقالات ذات صلة