---- ---- - شرح كيفية اضافة قائمة أفقية بأعلى مدونة بلوجر -- موسوعة علوم الحاسب: شرح كيفية اضافة قائمة أفقية بأعلى مدونة بلوجر

Translate

أحدث المواضيع

الأحد، 26 سبتمبر 2010

شرح كيفية اضافة قائمة أفقية بأعلى مدونة بلوجر

لاضافة قائمة افقية علوية menu horizontal بمدونة blogger يمكنك من اختصار مواضيع مدونتك وعرضها بشكل بسيط وواضح أمام زوار مدونتك خاصة عندما تكون القائمة علوية تظهر لكل الزوار بدون عناء كما يمكنك تقسيم مدونتك الى عدة أقسام وتخصيص كل قسم لمواضيع معينة .



لأضافة قائمة افقية علوية أو 
menu horizontal بمدونة بلوجر اتبع الشرح المبسط التالي 


- قم بتسجيل الدخول الى مدونتك على موقع 
blogger .

- من لوحة 
التحكم الخاصة بمدونتك اختر التخطيط ثم اختر تحرير html .

- قم 
بحفظ نسخة من قالب مدونتك .

- اضغط المفتاح 
f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :

</b:skin>

 ضع الكود التالى مباشرة قبل الكود السابق الذى قمنا بالبحث عنه
/*URL: http://www.AllBlogTools.com/ */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
 ثم قم بحفظ قالب مدونتك
ثم اذهب الى التخطيط اختر اضافة أداة ( html ) ثم اختر ثم بلصق الكود التالي :
<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>
 
- يمكنك تغير لون خلفية القائمة من خلال البحث عن الكود التالي وتغير رمز اللون الذي تريد .
background-color: #f6ffd5; 



- وتغير لون القائمة عند المرور عليها بزر الماوس من خلال الكود التالي :


background-color: #DBFF6C;


- وتغير لون النص من خلال الكود التالي :


color: black;

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

  1. الف شكر يا معلم استمر فى ابعدعاتك
    اخو محمد ابو مسلم من بطن الجسر

    ردحذف
  2. أهلاً بك أخي محمد أبو مسلم
    و أتمني لك الأستفادة من مواضيع المدونة و جزاك الله كل الخير

    ردحذف
  3. لقد بحثت كتيرا على هذه الطريقة.....
    بارك الله فيك اخي شرح ممتاز

    ردحذف
  4. شكرا لك اخي و اتمني لك الاستفادة دائما

    ردحذف
  5. انا عايز اغير عناوين الصفحات من راسى الى افقى فى مدونه بلوجر

    ردحذف
  6. شكرا أنا إيجي على الزيارة و عن سؤالك إليك صفحة تحتوي على أكواد ستفيدك فى سؤالك الخاص بالقوائم الرئسية او الأفقية

    http://www.mybloggertricks.com/2010/01/25-vertical-navigation-menus-for.html

    وسأقوم قريبا بوضع موضوع عن ذلك

    ردحذف