-->

تقنية ، إنترنت ، برامج ، دينية ، إقتصادية ، إجتماعية ، تعليمية ، رياضية

سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ... سُبْحَانَ اللَّهِ العَظَيم

الأحد، 12 يناير 2014

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

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


قبل أن نضيف أي كود  بمدونة بلوجر ، يجب أن نأخذ  نسخة إحتياطية من قالب المدونة ،  ولكي نضيف كود قائمة أفقية بمدونة بلوجر بمدونة بلوجر  نتبع الخطوات التالية :


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

 
 
بالنسبة لمستخدمي لوحة التحكم القديمة

1- توجه للوحة التحكم الرئيسية لمدونتك

2- تصميم

3-تحريرhtml

4- توسيع للقالب


أما بالنسبة لمستخدمي لوحة التحكم الجديدة

1 -لوحة التحكم الرئيسية بمدونتك

2-أختار من القائمة (قالب)

3- تحريرhtml

4- متابعة

5-

شرح تفصيلي لطريقة التركيب  بالنسبة لمحرر بلوجر  الحديث

1- ندخل الى لوحة تحكم المدونة .  

 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :

بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:





 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  






3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

       <div id='header-wrapper'>

أو  البحث عن الكود التالي :
       <div id='header'>

4- ثم نضع الكود التالي قبله مباشرة : 

   <div class='topNav'>
   <div class='topMenu'>
 <ul id='dropmenu'>

  
 
<li><a href='#'>الصفحة الرئيسية</a></li>
  
<li><a href='#'>المنتدى</a></li>
  
   
<li><a href='#'>البلوجر</a>
 <ul>
 <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>
 <li><a href='#'>
محمد رسول الله</a></li>
 <li><a href='#'>
طيبة مصرية</a></li>
 </ul>
</li>

 
<li><a href='#'>برامج كاملة</a></li>

</ul>
</div>
</div>
<div style='clear:both;'/>

مع ملاحظة : أنه يجب تغير  الأقسام الرئيسية بالقائمة ذات اللون الأحمر إلى الأسماء التي تريدها لأقسامك الرئيسية ، وتغير الأقسام الفرعية بالقائمة ذات اللون الأسود  إلى الأسماء التي تريدها لأقسامك ، وتغير هذا الرمز #  إلى الروابط الخاصة بالأقسام الرئيسية والروابط الخاصة بالأقسام الفرعية .

5- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

   ]]></b:skin>

6- ثم نضع الكود التالي قبله مباشرة : 

   .topNav {
    width:100%;
    height:40px;
    overflow:visible;
    margin:0 auto;
    background: -webkit-linear-gradient(top, #41434f, #272931);
    background: -moz-linear-gradient(top, #41434f, #272931);
    background: -ms-linear-gradient(top, #41434f, #272931);
    background: -o-linear-gradient(top, #41434f, #272931);
    border-bottom:1px solid #444;
}
.topMenu {
    height:40px;
    width:100%;
    float:right;
    overflow:visible;
    margin:0px 0 0 0;
}
.topMenu ul {
    margin: 0px 10px 0 0;
    text-align:right;
}
.topMenu ul li {
   
}
.topMenu ul li a {
}
.topMenu ul li a:hover {
    color:#fff;
}
#dropmenu, #dropmenu ul {
    margin: 0px 10px 0 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
    z-index: 999;
    width: 100%;
    font-weight: bold;
}
#dropmenu a {
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ;
    -webkit-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    display:block;
    font: normal 11px/42px Tahoma, Geneva, sans-serif;
    color:#1599ae;
    height:40px;
    display:block;
    text-shadow:0 1px #1a1b20;
    padding: 0 20px;
}
#dropmenu a:hover {
}
#dropmenu .current a, #dropmenu li:hover &gt; a {
    color:#fff;
    text-shadow:0 1px #000;
    background:#14161c;
}
#dropmenu li {
    float:right;
    height:40px;
    border-left:1px solid #262831;
    position: relative;
}
#dropmenu li:last-child {
    background: none;
}
#dropmenu ul {
    padding: 10px 5px 2px 0;
    position: absolute;
    display: none;
    width: 293px;
    top: 40px;
    right: -15px;
    background:#14161c;
}
#dropmenu ul a {
}
#dropmenu li ul li {
    float: right;
    background: none !important;
    height: 29px;
    width: 130px;
    padding:0 !important;
    margin: 0px 9px 10px 4px !important;
}
#dropmenu li ul li:hover {
    background: none !important;
    height: 29px !important;
    width: 130px !important;
}
#dropmenu li ul a {
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    padding:0 !important;
    float: right;
    height: 29px;
    width: 130px;
    color: #000;
    text-shadow:0 1px #ffffff;
    background:#ffffff;
    text-align:right;
    text-indent:8px;
}
#dropmenu li ul a:hover {
    background: #18acbd;
    color: #000 !important;
    height: 29px;
    text-shadow:0 1px #1dbecb;
    width: 130px;
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    border-top:none !important;
}
#dropmenu ul ul {
    top: auto;
}
#dropmenu li ul ul {
    left: 12em;
    margin: 0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
    display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
    display: block;
}


 
7- نضغط على زر حفظ التغيرات   لكي يتم حفظ القالب .

جزى الله خيرا كل من ساهم فيه
 

 

ليست هناك تعليقات:

إرسال تعليق