اضافة اقسام لمدونة بلوجر

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

0

اضافة اقسام الي مدونة بلوجر يجعل الأمر سهلاً علي الزائر في تصفح موقعك وفي التنقل بين الاقسام المختلفة. وبالتالي فهي اضافة مهمة من اضافات بلوجر.

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

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

بإختصار لتقسيم مدونة بلوجر، عليك اولاً باضافة التسميات أو الـ Labels الي مواضيع بلوجر.

بحيث إذا كان الموضوع يتحدث عن بلوجر قم بوضع كلمة بلوجر في التسميات وإذا كان يتحدث عن الربح من الانترنت أيضاً اكتب كلمة الربح من الانترنت في التسميات الخاصة بالموضوع.

وهكذا مع وضع فاصلة بين كل label والثاني، وفي النهاية عند وضع اقسام المدونة سوف يظهر هذا الموضوع في الاقسام أو التسميات التي قمت بإضافتها اليه.

Image

بعد اضافة التسميات والتأكد من أن كل المواضيع في مدونتك تحتوي علي تسميات تعبر عن القسم الذي تنتمي اليه، سننتقل في الاسفل الي طريقة اضافة اقسام الي مدونة بلوجر.

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

إتبع الخطوات في الاسفل:

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

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

Image

  1. ثانياً قم باختيار نوع الاداة Labels أو التسميات، كما بالصورة.

في النافذة المنبثقة قم باختيار نوع الادة: Labels.

Image

وفي النافذة التالية قم بعمل حفظ أو Save.

  1. ثالثاً قم بالذهاب الي المظهر أو Theme، وقم بالدخول علي صفحة تعديل الـ HTML.

قم بالدخول الي صفحة تعديل الـ HTML حتي نقوم بالتعديل علي اداة اقصام المدونة او التسميات Labels.

Image

قم بالبحث عن الاداة عن طريق الضغط علي CTRL + F. وابحث عن كلمة “التسميات”.

Image

وقم بتحديد الكود من بداية

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

  1. وأخيراً اضافة تنسيق لأقسام المدونة بالـ CSS.

قم بالبحث عن كود الـ 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;}

وقم بالحفظ.

وبهذا تكون أضفت اقسام المدونة وقمت بتقسيم الموقع. هذه الاضافة تحتوي علي ايقونات بجانب الاقسام تماماً كما في موقعي.

ما رأيك في هذه التدوينة؟ شاركني برأيك في التعليقات وشكراً…

سجل الآن في منفذ

سجل وضف خدماتك في منفذ أو تصفح الخدمات المتاحة علي المنصة.