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

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

بعض مميزات القائمة العلوية:

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

معاينة القائمة

كيفية اضافة القائمة العلوية الى بلوجر

اولا قم بتسجيل الدخول الى مدونتك في بلوجر ثم قم باختيار قالب ثم تعديل واتبع الاتي :

في الاول تاكد من وجود الخط الكوفي لديك وذلك من خلال البحث عن كلمة "droidarabicnaskh"

ان لم تجدها فقم بالبحث عن ]]></b:skin> واضف الكود التالي فوقه مباشرة :

اضافة css:

قم بالبحث عن ]]></b:skin> واضف الكود التالي فوقه مباشرة :

#404F6C : هو لون القائمة ابحث عنه وغيره الى اي لون تريد
#AB042C : اللون الاحمر الذي يظهر في القائمة وايضا عند تمرير الفارة غيره بما يناسبك
#MBL_wrapper : هذا الكود مسؤول عن عرض القائمة و جعلها ثابتة لذلك اذا اردت التغيير على هاتين الخاصيتين قم بالبحث عن هذا الكود و غير في الواصفة width و position بما يناسبك

/*--MyBloggerLab Sticky Navigation Bar--*/
    #MBL_wrapper .MBL_social_wrapper
    {
    margin-top: 10px;
    margin-left: 18px;
    float: left;
    
    }

#MBL_wrapper
    {
    
    width: 85%;
    position: fixed;
    margin-right: 7.5%;
    background: #404f6c;
    height: 46px;
    -webkit-box-shadow: 0 1px 0 #666, 0 1px 3px #666;
    -moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
    -o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
    
    z-index: 999;
    }

#MBL_wrapper .topmenu.notice
    {
    float: right;
    width: 500px;
    margin-top: 15px;
    color: #fff;
    }

#top_menu a
    {
    color: #fff;
    }

#top_menu
    {
    display: block;
    float: right;
    list-style: none;
    margin-top: 12px;
    }

#top_menu li
    {
    display: inline-block;
    margin-right: 15px;
    font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    }

#top_menu li ul
    {
    display: none;
    }

#boxed_wrapper
    {
    width: 980px;
    margin: auto;
    }

.MBL_standard_wrapper
    {
    width: 100%;
    margin: auto;
    }

.MBL_standard_wrapper.wide
    {
    width: 980px;
    }

.MBL_standard_wrapper.header
    {
    margin-bottom: 0px;
    }

.MBL_social_wrapper
    {
    width: auto;
    float: left;
    }

#menuforall .MBL_social_wrapper
    {
    margin-top: 15px;
    }

.MBL_social_wrapper ul
    {
    list-style: none;
    }

.MBL_social_wrapper ul li
    {
    float: left;
    margin-right: 10px;
    }

.MBL_social_wrapper ul li img
    {
    width: 28px;
    }

#MBL_menu_wrapper
    {
    width: 930px;
    height: 50px;
    padding: 0;
    margin:auto;
    }

.mainmenu.notice
    {
    float: right;
    width: 600px;
    padding: 17px 0 10px 12px;
    z-index: 999;
    }

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
    {
    list-style: none;
    display: block;
    float: right;
    margin: 0 23px 0 5px;
    width: 700px;
    }

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
    {
    display: block;
    float :right;
    margin: 0;
    }

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
    {
    display: none;
    list-style: none;
    background: #000;
    position:absolute;
    padding: 0;
    margin-top: 51px;
    width: 200px;
    height: auto;
    z-index: 1000;
    padding-top: 5px;
    border-bottom: 5px solid #000;
    border-right: 0;
    }

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
    {
    margin-right: 200px;
    margin-top: 5px;
    }

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
    {
    background: none;
    }

.main_nav li ul li
    {
    width: 100%;
    }

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
    {
    color: #fff;
    display: block;
    width: 188px;
    font-weight: bold;
    line-height: 1em;
    padding: 10px 0 10px 12px;
    background: none;
    }

.main_nav ul, .main_nav
    {
    list-style: none;
    margin: auto;
    width: initial;
    height: 50px;
    z-index: 999;
    float: right;
    }

.main_nav ul li,  .main_nav li
    {
    display: block;
    float :right;
    margin: 0;
    }

.main_nav ul li a,  .main_nav li a
    {
    display: block;
    float :right;
    margin: 0 0 0 0;
    padding: 10px 15px 9px 15px;
    color: #fff;
    font-family: 'droid arabic naskh';
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    }

.main_nav ul li ul li a,  .main_nav li ul li a
    {
    width: 165px;
    padding: 7px 19px 7px 16px;
    border: 0;
    font-size: 12px;
    font-weight: normal;
    color: #ccc;
    font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
    }

.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a
    {
    border-bottom: 0;
    }

.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a
    {
    color: #fff;
    background: #AB042C;
    }

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
    {
    border-right: 0;
    }

.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
    {
    display: block;
    width: 170px;
    line-height: 0.7em;
    padding: 5px 0 5px 30px;
    }

.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
    }

div
    {
    margin:0;
    padding:0;
    border:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
    }

a
    {
    color: #0114dd;
    text-decoration: none;
    -webkit-transition: color .2s linear, background .1s linear;
    -moz-transition: color .2s linear, background .1s linear;
    -ms-transition: color .2s linear, background .1s linear;
    -o-transition: color .2s linear, background .1s linear;
    transition: color .2s linear, background .1s linear;
    }

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }

إضافة كود HTML :

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

<div id='MBL_wrapper'>
    <div class='MBL_standard_wrapper'>
    <div class='menu-main-menu-container'>
<ul class='main_nav' id='main_menu'>
<li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>

<a href='https://iabdelkadir.blogspot.com'>الرئيسية</a></li>
<li><a href='https://drive.google.com/open?id=0B8q4LK9YxVqZeTktSDlXLUQ5YUk' rel='nofollow' target='_blank'>كتب</a></li>
<li><a href='https://drive.google.com/open?id=0B8q4LK9YxVqZLW8zVVJnd0wxcFE' rel='nofollow' target='_blank'>برامج</a></li>
<li><a href='http://iabdelkadir.blogspot.com/p/author.html'>من نحن</a></li>
<li><a href='http://iabdelkadir.blogspot.com/p/contuct-us.html'>اتصل بنا</a></li>
</ul>
</div>
<div id='menu_border_wrapper'/>
    <div class='MBL_social_wrapper'>
    <ul>
<li><a href='#' target='_blank'><img alt='' src='http://store2.up-00.com/2016-11/1478824954521.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='http://store2.up-00.com/2016-11/1478824954786.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='http://store2.up-00.com/2016-11/1478824954612.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='http://store2.up-00.com/2016-11/1478824954674.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='http://store2.up-00.com/2016-11/1478824954745.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='http://store2.up-00.com/2016-11/1478824954633.png'/></a></li>
</ul>
</div>
</div>
</div>

لاتنسى التعديل على الروابط باضافة روابط موقعك وروابط مواقع التواصل الاجتماعي

.انتهاء الشرح

Pages

About

التسميات

مختارة

الاحدث

Navigation

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

بعض مميزات القائمة العلوية:

معاينة القائمة

كيفية اضافة القائمة العلوية الى بلوجر

اضافة css:

إضافة كود HTML :

أضف تعليق:

3 comments:

Recent Post

اشترك معنا في القائمة البريدية

Pages

About

التسميات

مختارة

الاحدث

Navigation

بعض مميزات القائمة العلوية:

معاينة القائمة

كيفية اضافة القائمة العلوية الى بلوجر

اضافة css:

إضافة كود HTML :

التالي

رسالة أحدث

السابق

رسالة أقدم

أضف تعليق:

3 comments:

اشترك معنا في القائمة البريدية