الأقسام

banner here

اضافه قائمه افقيه في مدونة بلوجر شرح بالتفصيل مصور

- 5:27 PM
advertise here
اضافه قائمه افقيه في مدونة بلوجر

مدونة بلوجر,قائمه افقيه,اضافة,BLOGGER,بلوج 

سبوت,اضافات لبلوجر,تعلم التدوين,ادوات بلوجر



احيانا نريد اضافه قائمه افقيه في مدونة بلوجر الطريقه 

التاليه توضح لك ذلك 



انظر لشكل القائمه الافقيه التالي :


إضافة قائمه افقية لمدونة بلوجر,ادوات

طريقه الاضافه بالدخول علي 


لوحه تحكم المدونه 


منها اضغط علي تصميم ومن تصميم عناصر الصفحة ... 
وعناصر التي تكون الافتراضيه


اضغط علي اضافه اداه انظر للصورة التاليه توضح ما سبق 

:



إضافة قائمه افقية لمدونة بلوجر,ادوات


ملحوظه في الواجهه الجديد في بلوجر بدلا من تصميم 

اختار تخطيط 

ثم بعد ذلك اختار الاداه 


HTML/JavaScript

كما توضح الصورة التاليه :


إضافة قائمه افقية لمدونة بلوجر,ادوات



ثم قم باضافه الكود التالي 

كود PHP:
<style/*Start Css Menu*/ .menu {
    
bordernone;
    
border0px;
    
margin0px;
    
padding0px;
    
font-familyverdana,geneva,arial,helvetica,sans-serif;
    
font-size14px;
    
font-weightbold;
    
color8e8e8e;
}
 
.
menu ul {
    
backgroundurl(http://2.bp.blogspot.com/-W64HRGKssSo/T7zWbXCBBQI/AAAAAAAABzM/J3Ou605AS_U/s1600/helperblogger.com-menu-bg.gif) top left repeat-x;
    
height43px;
    list-
stylenone;
    
margin0;
    
padding0;
}
 
.
menu li {
    
floatleft;
    
padding0px 8px 0px 8px;
}
 
.
menu li a {
    
color#666666;
    
displayblock;
    
font-weightbold;
    
line-height43px;
    
padding0px 25px;
    
text-aligncenter;
    
text-decorationnone;
}
 
.
menu li a:hover {
    
color#000000;
    
text-decorationnone;
}
 
.
menu li ul {
    
background#e0e0e0;
    
border-left2px solid #a80329;
    
border-right2px solid #a80329;
    
border-bottom2px solid #a80329;
    
displaynone;
    
heightauto;
    
filteralpha(opacity=95);
    
opacity0.95;
    
positionabsolute;
    
width225px;
    
z-index200/*top:1em;
/*left:0;*/ 
}
 
.
menu li:hover ul {
    
displayblock;
}
 
.
menu li li {
    
displayblock;
    
floatnone;
    
padding0px;
    
width225px;
}
 
.
menu li ul a {
    
displayblock;
    
font-size12px;
    
font-stylenormal;
    
padding0px 10px 0px 15px;
    
text-alignleft;
}
 
.
menu li ul a:hover {
    
background#949494;
    
color#000000;
    
opacity1.0;
    
filteralpha(opacity=100);
}
 
.
menu p {
    
clearleft;
}
 
.
menu #current {
    
backgroundurl(http://1.bp.blogspot.com/-Z9bi1D4dtH8/T7zWalpDEWI/AAAAAAAABzI/iXhXlizOKO8/s1600/helperblogger.com-current-bg.gif) top left repeat-x;
    
color#ffffff; }
  
/*End Css Menu from http://www.vitchawee.com/*/ </style
 
 
<
div class="menu">
 <
ul>
  <
li><a href="http://www.vitchawee.com/" id="current">الرئيسية</a></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>
  </
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>
  </
ul>
  </
li>
  <
li><a href="#">صحتك بالدنيا</a></li>
  <
li><a href="#">قصص وعبر</a></li>
 </
ul>
</
div>  
واحفظه في المكان الذي توضحه الصورة التاليه :


إضافة قائمه افقية لمدونة بلوجر,ادوات

مكان علامه # تضع رابط القسم الذي تريده ...

اعلان advertise here
 

ابدأ الكتابة ثم اضغط انتر للبحث