دورة تصميم قالب بلوجر 2018 من الصفر اونلاين : خطوة بخطوة


هل أنت مدون نشط وتريد تصميم وانشاء قالب بلوجر من الصفر ؟ هل حلمك أن يكون لديك قالب حصري واحترافي لمدونتك من تصميمك انت ؟ هذا ليس امرا صعبا - خطوة واحدة ويمكنك إنشاء قالب Blogger من تصميمك الخاص !!
أصبح إنشاء المدونات أمرًا سهلاً للغاية مع منصة Blogger وهي خدمة لنشر المقالات معروفة تسمح للمستخدمين بإنشاء مدونات ومشاركة افكارك وهذا مجانًا. ومع ذلك هناك حاجة إلى القليل من المعرفة حول اكواد HTML و CSS وبعض من جافا سكريبت . ولكن الأمر ليس بهذه الصعوبة. بمجرد أن تصفي عقلك وتضع نصب عينيك فكرة لإنشاء قالب Blogger من الصفر ومع بعض المفاهيم الأساسية ، فأنت على استعداد لتصميم قالب حصري لك وحدك .

كيفية إنشاء قالب Blogger ؟

إن وجود نموذج مدون فريد خاص بك هو شيء ممتاز . لكن السؤال الذي يطرح نفسه هو من أين تبدأ ؟ الإجابة البسيطة هي أن هناك طريقتين لتصميم قالب على النحو التالي :
  1. الطريقة اليدوية
  2. الطريقة الالية (مع برامج )
إذا كان لديك معرفة جيدة بالتشفير ، فستتبع الطريقة اليدوية وهذه افضل . ولكن إذا كنت مبتدئًا ولا تعرف كيفية الترميز ، فسيكون عليك استخدام برامج التصميم مثل لانشاء قوالب وهي كثيرة مثل TemplateToaster وهو الأفضل للاختيار بينها . حيث لن تحتاج إلى اكواد مع منشئ قالب بلوجر . سيعطيك واجهة سحب وإفلات سهلة لتصميم قالبك الخاص . دعنا نتعمق أكثر في الاطلاع على الإجراء التفصيلي الذي يوضح كيفية تصميم قالب المدون باستخدام الطريقة اليدوية .

1. الطريقة اليدوية

يتألف قالب Blogger من عناصر XHTML و عناصر blogger elements . لتصميم layout التخطيط الاساسي للقالب ، ستستخدم مساحات الأسماء . حيث يتم تحديد مساحة الاسم (xmlns) مسبقًا للاستخدام مع Blogger بواسطة Google . ويتم استخدام 3 أنواع من مساحات الأسماء بشكل أساسي على النحو التالي :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</html>
</body>

  • xmlns: b’ : تُستخدم للوصول إلى عناصر blogger .
  • xmlns: data - يتم استخدامه لتحديد من أين تأتي بيانات المدونة .
  • xmlns: expr - لحساب التعبير عن السمات attributes .


ستكتب جميع هذه التعليمات البرمجية في ملف اسمه main.xml من Blogger .
هذه هي بنية القالب من السطر الاول <?xml الى اخر وسم وهو  </body> .

بناء الاكواد للتخطيط الأساسي Syntax for Basic Layout :

الأقسام Sections

ينقسم قالب بلوجر إلى أقسام اساسية هي : 

  1. راس الصفحة Header
  2. المحتوى Content
  3. الاقسام الجانبية Sidebar
  4. اخر الصفحة  Footer


 وستستخدم عنصر Widget الادوات لتعريف المحتوى في القسم الذي هو Sections .
الشكل الصحيح للقسم سيكون هكذا :
<b:section id=’معرف‘ class='معرف' maxwidgets='عدد الادوات' showaddelement=' '>
<b:widget/> </b:section>
<b:section id='معرف' class='معرف' maxwidgets='عدد الادوات' showaddelement=' '>
While the below format, will be considered Wrong: <h1>العنوان</h>
</b:section>
<div>Content</div>

Section Attributes

تحتاج إلى تحديد المعرفات التالية في Section . المعرف هو السمة المطلوبة فقط بينما يكون الآخر اختياريًا .
id - هو الاسم الفريد للقسم المحدد بالحروف والأرقام فقط .
class - يتكون من صفوف مشتركة مثل "navbar" و "main" و "header" و "footer" و "sidebar". 
إذا قمت بتغيير القوالب لاحقًا ، فسيتيح لك ذلك تحديد ما إذا كنت تريد نقل المحتوى أم لا. يمكنك أيضًا استخدام class أخرى إذا كنت ترغب في ذلك.
maxwidgets - يحدد الحد الأقصى لعدد عناصر واجهة المستخدم التي يمكن إضافتها في Section .
showaddelement - يتكون من قيمة "yes" أو "no". "نعم" هو الإعداد الافتراضي بالانجليزية وليس بالعربية . 
هذا يحدد ما إذا كانت عناصر الصفحة تعرض رابط "إضافة عنصر الصفحة" أم لا .
growth - يمكن أن يكون "horizontal" أو "vertical". "الرأسي" هو الإعداد الافتراضي . يحدد هذا ما إذا كانت الأدوات مرتبة جنبًا إلى جنب أو مكدسة داخل Section .

Syntax to Add Sections

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents --> </b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section> <b:section id='main' class='main' maxwidgets="1" showaddelement="no"> <!-- Section contents -->
</b:section>
</b:section> <b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->

Widgets

القطعة او الاداة هي الجزء الرئيسي الذي يعرض البيانات الحقيقية لل Section . وهي تعمل كعنصر نائب. يحدد القسم فقط عناصر التخطيط . بعض الأدوات الافتراضية متاحة في بلوجر . ومع ذلك ، يمكنك أيضًا إنشاء عنصر مخصص خاص بك .

Widget Attributes

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

  1. BlogArchive
  2. Blog
  3. Feed
  4. Header
  5. HTML
  6. SingleImage
  7. LinkList
  8. List
  9. Logo
  10. BlogProfile
  11. Navbar
  12. VideoBar
  13. NewsBar

locked مؤمّن - يمكن أن يكون له قيمة "yes" أو "no". القيمة الافتراضية هي "no". لا يمكنك نقل او تغيير أو حذف العنصر المقفل من تبويب التخطيط  . 
title - يعرض عنوان الأداة . إذا لم يتم تحديده ، فسيتم استخدام عنوان افتراضي مثل "List1".
pageType - يمكن أن يكون "all" أو "archive" أو "main" أو "item". الاعداد الافتراضي هو "All" . سوف تظهر القطعة على الصفحات المعينة فقط .
mobile - يمكن أن يكون "yes" أو "no" أو "default". يخبرك انه ستعرض القطعة على الهاتف المحمول أم لا  . لن يتم عرض سوى Header, Blog, Profile, PageList, AdSense, ، سيتم عرص القطعة على الجوّال إذا تم تعيينها على "default".

Widget Syntax

تضمين الأدوات في Section . لإضافة عنصر جديد  في widget .

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>

الطريقة الآلية : 


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

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



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