تعلم طريقة إنشاء قوالب بلوجر Blogger احترافية وبيعها والربح منها

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

فإذا كنت تملك مهارات تصميم جيدة يمكنك التفكير في تصميم قوالب بلوجر جذابة ووظيفية لتلبية احتياجات المدونين وبيعها لهم وكسب مال منها.

كيف أصمم قالب بلوجر؟

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

إليك خطوات عامة لإنشاء قالب لمنصة بلوجر:

1. التخطيط

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

2. كتابة أكواد HTM

استخدم عناصر HTML الأساسية مثل <header> و<nav> و <main> و <footer> و <div> و <span> و <p> وما إلى ذلك في ملف بصيغة XML بشكل مشابه لما يلي

<p>محتوى HTML هنا</p>

</div>

ملاحظة: يجب أن تتأكد من الالتزام بصيغة XML وعدم استخدام عناصر HTML غير المدعومة.

3. كتابة أكواد التنسيق

ابحث في قالبك عن قسم <head> وضمن فيها الوسم <style> واكتب التنسيقات مباشرة، أو وسم <link> لربط ملفات تنسيق خارجية وتنسيق المحتوى داخل القالب.

على سبيل المثال:

<b:skin>

<style type='text/css'>

/* أكواد CSS اكتب هنا*/

</style>

</b:skin>

يمكنك أيضًا ربط ملف CSS خارجي باستخدام وسم <link> بالشكل التالي:

<b:skin>

</b:skin>

4. أضف تفاصيل الديناميكية للقالب

استخدم واجهة برمجة التطبيقات Blogger API لاستدعاء محتوى ديناميكي من منصة بلوجر واحرص على جعل العناصر الديناميكية مثل المقالات والتعليقات تُولِّد ديناميكيًا باستخدام تقنيات مثل لغة القالب الخاصة ببلوجر.

5. اختبرعمل القالب

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

6. انشر القالب

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

خطوات عملية لتصميم قالب بلوجر Blogger

يتطلبتصميم قالب لمدونة بلوجر باستخدام XML العديد من الخطوات التي يجب اتباعها بعناية للحصول على نتيجة جيدة كما يحتاج لامتلاك المهارات الأساسية في لغة XML و HTML و CSS.

إليك الخطوات العملية التي يمكن اتباعها لتصميم قالب Blogger:

إنشاء ملف XML جديد باستخدام أي محرر XML مثل فيجوال ستوديو كود أو Sublime Text.
إضافة الأكواد الأساسية المطلوبة لبناء تصميم القالب مثل عنوان المدونة والشعار وقائمة التنقل والمقالات والشريط الجانبي.
تحديد الألوان والخطوط المطلوبة باستخدام CSS وتحديد حجم الخط والتنسيق الذي يناسب المحتوى.
تحديد تخطيط الصفحة وذلك باستخدام CSS وتحديد أماكن العناصر المختلفة مثل الشعار وقائمة التنقل والمقالات والشريط الجانبي.
إضافة العناصر الديناميكة مثل أزرار المشاركة والتعليقات وعرض الصفحات والأرشيف.
تخصيص الأقسام المختلفة مثل عرض المدونة الرئيسية وصفحة المؤلف وصفحة المقالة وغيرها.
الاختبار والصيانة يجب اختبار التصميم والتأكد من عمل الأقسام المختلفة بشكل صحيح وإجراء أي تعديلات مطلوبة.
بعد الانتهاء من تصميم القالب، يمكن تحميل الملف على منصة بلوجر وتثبيته على المدونة الخاصة بك.

ما معنى ودجت أو قطعة في قالب بلوجر؟

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

خطوات عملية لبرمجة قالب بلوجر

ستقوم بكتابة جميع الشيفرة في ملف main.xml الخاص بمدوّنة بلوجر حيث يتكون قالب بلوجر من عناصر XHTML تستخدم أسماء الفرعية namespaces محددة مسبقًا من جوجل للاستخدام مع المدوّنة . هناك ثلاثة أنواع من الأسماء الفرعية تُستخدم بشكل أساسي على النحو التالي:

xmlns:b - 'b' هذا النطاق يُستخدم للوصول إلى عنصر المدونة.

xmlns:data - يُستخدم لتحديد مصدر بيانات المدوّنة.

xmlns:expr - يحسب التعبيرات للسمات.

الخطوة1: تحديد الأقسام

بعدها نكتب الكود التالي

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

</head>

<body>

</body>

</html>

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

الرأس (Header)
المحتوى (Content)
الذيل (Footer)
الشريط الجانبي (Sidebar).
وتستخدم الودجات لتحديد المحتوى في الأقسام

ملاحظة: لا يمكن استخدام HTML داخل الأقسام لكن من المسموح استخدام HTML حول الأقسام.

تكون الصيغة الصحيحة للقسم بالشكل التالي:

<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>

<b:widget……../>

</b:section>

لكن الصيغة التالية خاطئة

<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>

<h1>عنوان المحتوى</h1>

<div>المحتوى</div>

</b:section>

يحتاج كل قسم إلى تحديد السمات التالية فيه

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

الخطوة 2: صيغة إضافة الأقسام

تضاف الأقسام للمدونة بالشكل التالي:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">

</b:section>

<b:section id='main' class='main' maxwidgets="1" showaddelement="no">

</b:section>

<b:section id='footer' class='footer' showaddelement="no">

</b:section>

خطوة 3 تحديد الودجات (Widgets):

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

يمكن للقالب (Widget) أن يحتوي على العديد من السمات. من بينها، تعد id و type مطلوبة، والبقية اختيارية.

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

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

locked - يمكن أن يكون له قيمة 'نعم' أو 'لا'. القيمة الافتراضية هي 'لا'. لا يمكن نقل أو حذف القالب المغلق من علامة عناصر الصفحة.
title - يعرض عنوان القالب. إذا لم يتم تحديده، سيتم استخدام عنوان افتراضي مثل 'List1'.
pageType - يمكن أن يكون 'all'، 'archive'، 'main'، أو 'item'. 'all' هو الافتراضي. سيعرض القالب فقط على الصفحات المحددة.
mobile - يمكن أن يكون 'نعم'، 'لا'، أو 'افتراضي'. يخبرك ما إذا كان القالب سيُعرض على الأجهزة المحمولة أم لا. سيتم عرض العناصر الرأسية، والمدونة، والملف الشخصي، وقائمة الصفحات، وAdSense، وAttribution على الأجهزة المحمولة إذا تم تعيينها على 'افتراضي'.

الخطوة 4: إضافة الوجات (Widget Syntax)

تضاف الودجات ضمن الأقسام بالشكل التالي:

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">

<b:widget id='CustomSearch1' title='بحث' type='CustomSearch' locked='false'/>

<b:widget id='FollowByEmail1' title='متابعة عبر البريد الإلكتروني' type='FollowByEmail' locked='false' />

<b:widget id='PopularPosts1' locked='false' title='الأكثر شهرة على Relatemein' type='PopularPosts'/>

<b:widget id='Label1' type='Label' locked='false' />

</b:section>

هل يمكن إنشاء قالب بلوجر بدون كود؟

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

بمجرد الانتهاء من تخصيص القالب وتصميمه وفقًا لاحتياجاتك صدر القالب ليتم حفظه كملف على جهاز الحاسوب الخاص بك وطبقه على مدوّنتك.

الخلاصة:

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

هل تعلم أن كتابة المحتوى من أهم مجالات العمل الحر! إليك أسرار العمل ككاتب محتوى

أبريل 26, 2023

قراءة المزيد

أنا حر- دليلك نحو العمل الحر والذكاء الصناعي