14‏/12‏/2012

انشاء عدة أقسام بمدونات بلوجر

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

ورغم تطرقنا الى الموضوع في تدوينات سابقة على مدونة " واب يب " الا أن هناك الكثير من الإضافات والتحديثات التي سنوضحها من خلال هذه التدوينة الجديدة الشاملة لكل الطرق المتاحة والممكنة في انشاء عدة أقسام وفروع للمدونة انطلاقا من صفحات ثابتة.



سنقوم بشرح كل طريقة على حدى باستخدام أمثلة وصور واختر الطريقة التي تناسب مدونتك وتصميمها.

أول شىء يجب ان تتعلمه في تعاملك مع مدونات blogger هو خاصية التسميــــات الموجودة داخل صندوق الرسائل والتي يطلق عليها أيضا اسم الكلمات الدلالية أو المفتاحية والتي نقوم بادراجها ضمن كل تدوينة او رسالة نقوم بكتابتها مثال لدي مدونة تحتوي على مواضيع متنوعة وأود كتابة موضوع حول التسويق الإلكتروني .

بداخل صندوق الرسائل اضف تسمية جديدة تحت اسم " التسويق الإلكتروني " كما هو موضح بالصورة التالية  



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


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

هذه المرحلة نحتاج اليها في جميع المراحل الأتية "خاصية التسميات"

ننتقل الأن الى شرح طرق اظهار هذه الأقسام على المدونة او الصفحة الرئيسية للمدونة حتى يسهل على المتصفح الوصول الى كافة مواضيع المدونة بارتياح ودون عناء.

الطريقة الأولى 
هي الطريقة السهلة والبسيطة والتي يمكن لأي مدون مبتدىء أن يقوم بعملها وهي :
  • التوجه الى لوحة التحكم 
  • اختيار التخطيط
  • اضافة اداة
  • تجد العديد من الأدوات اختر "التسميات" 
  • ادخل بعض التعديلات المناسبة كاختيار اسم وطريقة العرض  كما هو موضح بالصورة التالية
  • اضغط حفظ كما هو موضح بالصورة التالية 

  • اختر مكان مناسب لعرض أقسام مدونتك 
  • قم بمعاينة المدونة 
  • انت الأن قمت باضافة أقسام متعددة الى مدونتك
مع العلم أن هذه الطريقة تتطلب منك اضافة خاصية " اقرأ المزيد " الى مدونتك سواء الطريقة اليدويـــــــــة   او الطريقة الأليــــــــة  وذالك حتى عرض مقتطفات من التدوينات فقط للمحافظة على تنسيق وتصميم المدونة.


الطريقة الثانية 

وهي اضافة شريط اداة الصفحات الثابتة بأعلى أو على جوانب المدونة كالتالـــــي :

أولا قم بعرض مدونتك وتوجه الى تسميات المدونة واضغط على قسم معين وليكن "قسم التسويق الإلكتروني"  كما هو موضح بالصورة التالية.

ثم قم بنسخ الرابط الألكتروني لهذا القسم  كما في الصورة


ثم انتقل الى لوحة التحكم اختر الصفحات كما في الصورة



توجه الى الإختيار الثاني "عنوان ويب (URL) " وقم بكتابة عنوان للقسم الجديد "التسويق الإلكتروني مثلا" ثم قم بلصق رابط التسميات الخاص بقسم " التسويق الألكتروني " الذي قمنا بنسخه  واحفظ .


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

الطريقة الثالثة 

وهي اضافة قائمة أفقية مسندلة تحتوي على أقسام المدونة 


لأضافة قائمة افقية علوية أو menu horizontal بمدونة بلوجر اتبع الشرح المبسط التالي
  1. - قم بتسجيل الدخول الى مدونتك 
  2. - من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم اختر تحرير html .
  3. - قم بحفظ نسخة من قالب مدونتك .
  4. - اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :</b:skin>

5- ثم مباشرة قبل الكود السابق قم بنسخ الكود التالي :

/*URL: http://www.AllBlogTools.com/ */
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

6- ثم قم بحفظ قالب مدونتك
7-ثم اذهب الى التخطيط اختر اضافة أداة ثم اختر أداة HTML/JavaScript ثم بلصق الكود التالي :


<ul class="basictab">

<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>

<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>



 8- يمكنك تغير لون خلفية القائمة من خلال البحث عن الكود التالي وتغير رمز اللون الذي تريد .
background-color: #f6ffd5; 

9- وتغير لون القائمة عند المرور عليها بزر الماوس من خلال الكود التالي :

background-color: #DBFF6C;

10- وتغير لون النص من خلال الكود التالي :

color: black;

بالإضافة الى كافة هذه الطرق يمكنك ابتكار واضافة طرق اخرى خاصة وان مدونات بلوجر تتميز بمرونة كبيرة تمكنك من التعامل معها بسهولة تامة.

اي استفسار نحن في الخدمة

هناك 7 تعليقات

  1. شكرااااااااا جزيلا لكم علي موضوعاتكم الرائعه
    http://serazatyaa.blogspot.com/2013/01/blog-post.html

    ردحذف
  2. السيد " ahmed shhat "

    شكرا على مرورك مرحبا بك

    ردحذف
  3. شكرا لك اخي لكن لم افهم الشرح جيدا ساحاول
    اليكم مدوتى في طور البناء مهتمة بالحاسوب والانترنيت
    www.pchpro.blogspot.com

    ردحذف
  4. انا في احتياج اكثر لمعرفة كيفية عمل فروع للاقسام نفسها

    واشكرك طبعا ع الشرح الرائع

    ردحذف
  5. شكرا على موضوعاتك الجميلة

    ردحذف
  6. لدي مشكل بسيط و هو عدم تقبل الحاسوب للرموز الموجودة أسفل skin

    ردحذف


EmoticonEmoticon