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

تصميم قالب بلوجراضافة قائمة علوية نافبار

الدرس السابق قمنا بإضافة صفحة HTML الأساسية إلى القالب

الدرس السابق ⏪ تصميم قالب بلوجر Blogger من البداية تخطيط قالب بلوجر

سنعمل لان على تكويد قائمة علوية النافبار لاظهار اقسام المدونة
ستقوم باضافة كود html,css نستطيع من خلاله اضافة اداة في قسم القائمة العلوية من القالب

توجه الى لوحة تحكم بلوجر
من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ابحث عن الكود التالي <body> اسفله مباشرة اضف كود html التالي :

كود html النافبار

ابحث عن الكود التالي <b:skin><![CDATA[

اسفله مباشرة اضف كود css التالي :

كود css

body {
    color: #20292f;
    font-family: 'Droid Arabic Kufi', Oswald;
    font-size: 16px;
    background: #f8f8f8;
}
.navbar-default {
    background-color: #fff;
    border-color: #e7e7e700;
    padding: 0px 0px 27px 0px;
    transition: all 0.5s;
    z-index: 997;
    background: #fff;
}
.navbar-default .navbar-collapse{
background: #fff;
border-color: #fff;
padding-top: 24px;
}
.top-nav-collapse{
position: fixed;
box-shadow: -21.213px 21.213px 30px 0px rgba(158, 158, 158, 0.3);
background: #fff;
transition: all 0.5s;
}
.navbar-toggle {
    float: right;
    margin-right: 15px;
    margin-left: auto;
}
.navbar-brand {
    float: left !important;
}
.navbar-header {
    padding-top: 24px;
}

.navbar-default .navbar-nav>.active>a{
 transition: all 0.5s;
    color: #5e5e5e;
    background-color: #ffffff;
}
.navbar-default .navbar-nav>.active>a:hover {
    color: #ffffff;
    background-color: #5e5e5e;
}
.navbar-default .navbar-nav>li {
    list-style: none;
}
.navbar-default .navbar-nav>li>a {
    color: #242429;
    font-weight: bold;
    font-size: 18px;
    text-transform: capitalize;
    outline: none;

}
.navbar-default .navbar-nav>li>a:hover {
color: #2196F3;
}
.navbar-default .navbar-brand {
    color: #2196F3;
    font-size: 24px;
    font-weight: bold;
}
.navbar-default .navbar-nav>li>span {
    padding-top: 15px;
    padding-bottom: 10px;
    line-height: 20px;
    display: block;
    color: #ddd;
    font-weight: bold;
    font-size: 14px;
}

اضغط هنا لمعاينة المظهر

الان اضغط على حفظ المظهر من الاعلى ثم من القائمة الجانبية اضغط على علامة التبويب "التخطيط"
قم بتحديث الصفحة اعادة تحميل سيظهر في التخطيط اداة جديدة باسم (widget-nav) كما في الصورة التالة

ثم اضغط على اضافة اداة قم باختيار اداة تسميات كما في الصورة
بعد اضافة اقسام في القائمة العلوية توجه الى تحرير القالب داخل كود النافبار ابحث عن الكود التالي

<ul>

قم باستبداله بالكود التالي

لمتابعة الشرح تتمة النافبار وتكويد الهيدر تصميم متجاوب مع الجوال ومناسب لعرض اعلانات ادسنس من هنا

تصميم قالب بلوجر

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

تصميم قالب بلوجراضافة قائمة علوية نافبار

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

1 تصميم قالب بلوجر Blogger من البداية تخطيط قالب بلوجر

2 تصميم قالب بلوجراضافة قائمة علوية نافبار بشكل احترافي

3 تكويد قالب بلوجرتصميم الهيدرتصميم متوافق مع الجوال

4 تكويد وتصميم قالب بلوجر تقسيم منطقة المحتوى

5 اضافة أداة المشاركات رسائل المدونة الإلكترونية

6 تصميم قالب بلوجر اضافة اقراء المزيد

7 تصميم قالب بلوجر تصميم منطقة السايدبار

8 تصميم قالب بلوجر تصميم وتكويد منطقة الفوتر

9 الانتهاء من تصميم قالب بلوجر واجراء تحسينات لمظهر القالب

10 تحميل قالب بلوجر مجانا

نموذج الاتصال