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


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

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


  1. - قم بتسجيل الدخول الى مدونتك على موقع blogger 
  2. - من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم اختر تحرير html .
  3. - قم بحفظ نسخة من قالب مدونتك .
  4. - اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :



</b:skin>


5- ثم مباشرة قبل الكود السابق قم بنسخ الكود التالي :

-------------------------------------------------------------------
/*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;
}

---------------------------------------------------------------------

6- ثم قم بحفظ قالب مدونتك

7-ثم اذهب الى التخطيط اختر اضافة أداة ثم اختر ثم بلصق الكود التالي :


------------------------------------------------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------------------------------------------------

 8- يمكنك تغير لون خلفية القائمة من خلال البحث عن الكود التالي وتغير رمز اللون الذي تريد .

background-color: #f6ffd5; 

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

background-color: #DBFF6C;

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

color: black;

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

  1. مشكور اخي

    صراحه انا من الناس الثقل فهمهم

    يعني ما افهم بسرعه

    لكن منك فهمت

    ردحذف
  2. مشكور أخي على الإهتمام والمتابعة
    ولاشكر على واجب نتمنى أن نكون فقط في المستوى المطلوب وتقديم ما ينفع كل الإخوة العرب والمساهمة ولو بقسط ضئيل في دعم وتشجيع التدوين باللغة العربية .

    ردحذف
  3. تسلم ايدك وتم تطبيقها

    بس بتظهر صغيره جدا

    ممكن اعرف ازاي اكبر حجمها

    ردحذف
  4. جزاك الله خيرا

    الاداة جميلة يس لا تعمل على متصفح اكس بلور

    ردحذف
  5. شكرا لك اخى
    http://www.al7lam.co.cc

    ردحذف
  6. مشكور اخي, هل تتفضل علينا بقالب للمدونة به اماكن اعلانات في الاعلى يعني المقدمة والجانبين الايمن والايسر؟ اذا كا امكن اضف لي تعليق على مدونتي وأعلمني بذلك’ والله لن يضيع اجرك
    http://midelt-change.blogspot.com/

    ردحذف
  7. السلام عليكم اريد الوان النص و شكرا

    ردحذف