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

محتوايات المقال:

1- تعديل قسم راس الصفحة النافبار والهيدر

2- تعديل منطقة عرض المواضيع

3- تعديل منطقة السايدبار والفوتر

4- تحميل القالب الذي تم تصميمه خلال هذه الدورة  

تعديل النافبار والهيدر

الاكواد  المستخدمة في شرح الفيديو

كود html

<nav class='navbar navbar-default navbar-top' role='navigation'> <div class='container'> <div class='navbar-header page-scroll'> <div class='pull-right'> <button class='navbar-toggle' data-target='.navbar-ex1-collapse' data-toggle='collapse' type='button'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'/> <span class='icon-bar'/> <span class='icon-bar'/> </button> </div> </div> <div class='collapse navbar-collapse navbar-ex1-collapse'> <b:section id='widget-nav-top'/> </div> </div> </nav>

كود css

nav.navbar.navbar-default.navbar-top { background: #0c0b39; position: relative; line-height: 41px; margin-bottom: 0; margin-top: 0; padding: 0; border: 0; } .navbar-default.navbar-top .navbar-collapse { padding-top: 0; } nav.navbar.navbar-default.navbar-top ul{ margin-bottom: 0; } nav.navbar.navbar-default.navbar-top ul li { display: inline-block; padding: 5px; } .navbar-top li.selected { background: #ff8000; } nav.navbar.navbar-default.navbar-top ul li a { display: block; padding: 0 10px; font-size: 13px; color: #ddd; }

تعديل منطقة عرض المواضيع

تعديل منطقة السايدبار والفوتر

تحميل القالب الذي تم تصميمه خلال هذه الدورة