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

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

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

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



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

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



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

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


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


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


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

:

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

اختار تخطيط 

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


HTML/JavaScript

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






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

كود PHP:

<style> /*Start Css Menu*/ .menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}
 
.menu ul {
    background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUokNeDj_MLGg3GSLASsUbvd7Z0QLVTHjQxdXH_Y-bJvfE-M_zMNiQKufpgFhDE9IU-Zxq4qrhQj5AUhAupOJtlghY8T87HYc34dGY0ZG_gnDeO8EGBWpVDTXt7oxgYdWCOOnawYdXRlo/s1600/helperblogger.com-menu-bg.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.menu li {
    float: left;
    padding: 0px 8px 0px 8px;
}
 
.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-left: 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;
/*left: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: left;
}
 
.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
 
.menu p {
    clear: left;
}
 
.menu #current {
    background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ3xVkLnqHw7hmGGZ41yYFsH9wMn3RPbBbBIMsaTausjJ8e3ekgVy-pghFl01FEZni5vTNWhG-E70OInqfBquVViyC2zpL2gdBiD57H92V3TIT_pZ8xNe_LN0UjfQJemRkEUeANwRip2Y/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>  

واحفظه في المكان الذي توضحه الصورة التاليه :




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

اعلان