اضافة اقسام للمدونة بلوجر، إضافة أقسام بجانب الرئيسية في مدونة بلوجر

  1. الرئيسية
  2. »
  3. شروحات بلوجر
  4. »
  5. اضافة اقسام للمدونة بلوجر، إضافة أقسام بجانب الرئيسية في مدونة بلوجر
سأعرض لكم في هذه التدوينة طريقة إضافة أقسام بجانب الرئيسية في مدونة بلوجر، وكيفية تقسيم المدونة الى اقسام وجعل كل موضوع ينتمي الي أحد هذه الاقسام.
اضافة اقسام الي مدونة بلوجر يجعل الأمر سهلاً علي الزائر في تصفح موقعك وفي التنقل بين الاقسام المختلفة. وبالتالي فهي اضافة مهمة من اضافات بلوجر.
وكود اقسام بلوجر هو عبارة عن اضافة من اضافات بلوجر التي يمكنك اضافتها بكل سهولة، فتابع معي الشرح.
اضافة اقسام للمدونة بلوجر، إضافة أقسام بجانب الرئيسية في مدونة بلوجر

اضافة التسميات الي مواضيع بلوجر.

بإختصار لتقسيم مدونة بلوجر، عليك اولاً باضافة التسميات أو الـ Labels الي مواضيع بلوجر.
بحيث إذا كان الموضوع يتحدث عن بلوجر قم بوضع كلمة بلوجر في التسميات وإذا كان يتحدث عن الربح من الانترنت أيضاً اكتب كلمة الربح من الانترنت في التسميات الخاصة بالموضوع.
وهكذا مع وضع فاصلة بين كل label والثاني، وفي النهاية عند وضع اقسام المدونة سوف يظهر هذا الموضوع في الاقسام أو التسميات التي قمت بإضافتها اليه.
بعد اضافة التسميات والتأكد من أن كل المواضيع في مدونتك تحتوي علي تسميات تعبر عن القسم الذي تنتمي اليه، سننتقل في الاسفل الي طريقة اضافة اقسام الي مدونة بلوجر.

طريقة إضافة أقسام بجانب الرئيسية في مدونة بلوجر

إتبع الخطوات في الاسفل:
  1. أولا لاضافة أقسام الي مدونة بلوجر، توجه الي التخطيط أو الـ Layout في مدونتك علي بلوجر.

  2. قم بالذهاب الي مدونة بلوجر وبعدها الي التخطيط، وقم باضافة اداة جديدة في المكان الذي ترغب في أن تظهر فيه الاقسام بجانب الرئيسية مثلاً. او أسفل شعار المدونة.
  3. ثانياً قم باختيار نوع الاداة Labels أو التسميات، كما بالصورة.

  4. في النافذة المنبثقة قم باختيار نوع الادة: Labels.
    وفي النافذة التالية قم بعمل حفظ أو Save.
  5. ثالثاً قم بالذهاب الي المظهر أو Theme، وقم بالدخول علي صفحة تعديل الـ HTML.

  6. قم بالدخول الي صفحة تعديل الـ HTML حتي نقوم بالتعديل علي اداة اقصام المدونة او التسميات Labels.
    قم بالبحث عن الاداة عن طريق الضغط علي CTRL + F. وابحث عن كلمة "التسميات".
    وقم بتحديد الكود من بداية <b:widget id='Label1' locked='false' title='التسميات' type='Label'> الي نهاية هذا الكود أي الي <b:widget/>.
    وقم بلصق كود اقسام المدونة بدلاً منه.
    كود اقسام المدونة بلوجر
    <b:widget id='Label21' locked='false' title='التسميات' type='Label' version='1'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>LIST</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'> <nav aria-label='Navigation' class='dropdown' role='navigation' style='display: inline;'>    <ul class='dropdown-content' id='mainmenu' role='menubar'><li class='menu-item'>     <b:if cond='data:view.isHomepage'>      <h3 itemprop='name' style='background: #d3d3d3;'><a href='https://www.mobtakr.com/' id='homepage' title='الصفحة الرئيسية'> <i class='fas fa-home'/> الصفحة الرئيسية </a></h3><b:else/>       <h3 ><a href='https://www.mobtakr.com/' id='homepage' title='الصفحة الرئيسية'> <i class='fas fa-home'/> الصفحة الرئيسية </a></h3> </b:if> </li>     <b:loop index='n' values='data:labels' var='label'>        <li class='menu-item' >  <b:if cond='data:blog.url == data:label.url'         <h3  style='background: #d3d3d3;'><a expr:href='data:label.url' expr:id='&quot;labelpage&quot;+ data:n ' expr:title='data:label.name' >        <b:if cond='data:label.name == &quot;بلوجر&quot; '>
    <i class='fab fa-blogger-b'/>                                    <b:elseif cond='data:label.name == &quot;الربح من الانترنت&quot; '/><i class='fas fa-search-dollar'/><b:elseif cond='data:label.name == &quot;برامج&quot;'/>                                    <i class='fab fa-windows'/>                                    <b:elseif cond='data:label.name == &quot;تهيئة محركات البحث&quot;'/>                                    <i class='fab fa-searchengin'/>                                    <b:elseif cond='data:label.name == &quot;اخبار عامة&quot; '/><i class='far fa-newspaper'/>       <b:elseif cond='data:label.name == &quot;العاب&quot; '/><i class='fas fa-gamepad'/>   <b:elseif cond='data:label.name == &quot;برمجة&quot; '/><i class='fas fa-code'/> <b:elseif cond='data:label.name == &quot;تصميم&quot; '/>   <i class='fas fa-pen-nib'/><b:elseif cond='data:label.name == &quot;شخصي&quot; '/><i class='fas fa-theater-masks'/>  <b:else/><i class='far fa-bookmark'/>      </b:if>        <data:label.name/></a></h3><b:else/> <h3 ><a expr:href='data:label.url' expr:id='&quot;labelpage&quot;+ data:n ' expr:title='data:label.name' >                                                                       <b:if cond='data:label.name == &quot;بلوجر&quot; '><i class='fab fa-blogger-b'/><b:elseif cond='data:label.name == &quot;الربح من الانترنت&quot; '/><i class='fas fa-search-dollar'/><b:elseif cond='data:label.name == &quot;برامج&quot;'/><i class='fab fa-windows'/><b:elseif cond='data:label.name == &quot;تهيئة محركات البحث&quot;'/><i class='fab fa-searchengin'/>
    <b:elseif cond='data:label.name == &quot;اخبار عامة&quot; '/><i class='far fa-newspaper'/>
    <b:elseif cond='data:label.name == &quot;العاب&quot; '/><i class='fas fa-gamepad'/><b:elseif cond='data:label.name == &quot;برمجة&quot; '/><i class='fas fa-code'/> <b:elseif cond='data:label.name == &quot;تصميم&quot; '/><i class='fas fa-pen-nib'/>    
    <b:elseif cond='data:label.name == &quot;شخصي&quot; '/><i class='fas fa-theater-masks'/>  <b:else/><i class='far fa-bookmark'/></b:if><data:label.name/></a></h3></b:if> </li></b:loop>
    </ul> </nav>
     </b:includable>
    </b:widget>
    
  7. وأخيراً اضافة تنسيق لأقسام المدونة بالـ CSS.

  8. قم بالبحث عن كود الـ CSS الخاص بمدونتك عن طريق الضغط علي CTRL + F. والبحث عن كلمة "<b:skin/>".
    وقم باضافة هذا الكود مباشرة فوق كلمة <b:skin/>.
    كود تنسيق اضافة اقسام مدونة بلوجر
    
    .menu-item a {
        font-family: rakkas;
        color: #000;
        display: block;
        font-size: 13px;
        line-height: 48px;
        padding: 10px 14px;
    }
    .menu-item {
        display: inline-block;
    }.dropdown-content {
        margin-right: 10%!important;
        margin: 0;
        padding: 0 5px;
        line-height: 0;
        list-style: none;
        vertical-align: top;
        display: inline-block;
        overflow: hidden;
        width: 70%;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    وقم بالحفظ.
وبهذا تكون أضفت اقسام المدونة وقمت بتقسيم الموقع. هذه الاضافة تحتوي علي ايقونات بجانب الاقسام تماماً كما في موقعي.
ما رأيك في هذه التدوينة؟ شاركني برأيك في التعليقات وشكراً...
هناك تعليقان (2)
  1. موضوع ممتاز جدا صديقي , اتمني ليك كل التوفيق والنجاح

    ردحذف
    الردود
    1. حبيبي والله يا ايهاب، أنت الافضل ومنك بنتعلم يا مستر عربكو ❤😍

      حذف

خدماتي علي خمسات