طريقة تصميم قالب بلوجر احترافي 2023

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

طريقة تصميم قالب بلوجر احترافي 2023

كيفية تصميم قالب بلوجر

من اجل بدء عملية تصميم وبرمجة قالب بلوجر احترافي من الصفر فانت بحاجة الى بعض الامور التي يتوجب عليك معرفتها واتقانها وهي كالتالي :

  • تعلم لغة HTML
  • تعلم لغة CSS
  • تعلم لغة البرمجة JAVASCRIPT

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


شرح اكواد HTML الخاصة ببلوجر

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

كود skin

وهذا الكود هو الذي سوف تضع فيه اكواد css الخاصة بالقالب او اكواد تنسيق القالب والمسؤولة عن الالوان والشكل النصوص وغيرها و يضهر كالتالي :

<b:skin>Write Css Code Here...</b:skin>

كود section

وهذا الكود هو المسؤول عن انشاء طبقة، ومن خلال هذه الطبقة يمكنك اضافة الكثير من الادوات المهمة في قسم التنسيق. مثل طبقة رسائل المدونة الالكترونية، فهي عبارة عن section من قسم التنسيق في بلوجر. ويكتب بالشكل التالي كما تشاهد يحتوي على خيار id او المعرف وهو اسم تطلقه على هده الطبقة مثالا "القائمة العلوية":

<b:section id="ضع اي اسم هنا">

كود b:widget

ياتي دائما اسفل section، عندما تقوم بانشاء section جديد ثم التوجه الى التنسيق من اجل ملئ هذه section باحدى الادوات سوف يظهر لنا widget والذي يحتوى على كل الاكواد البرمجية الخاصة بالاداة المضافة وهذه الاكواد تجدها عند الدخول الى تعديل HTML.

كود if

وهو الكود الشرطي، حيث تكتبه وداخل الخاصية cond تكتب الشرط الذي يجب ان يتحقق لكي يتم تنفيذ الاكواد التي بداخل الشرط if ويكتب بالشكل التالي :

<b:if cond='data:blog.pageType == &quot;item&quot;'></b:if>

وهنا كما تلاحظون الشرط مكتوب داخل cond، وهذا ما يجب عليك معرفته في الوقت الحالي ولا تهتم لما هو مكتوب في الداخل لاننا سوف نشرحه في بقية المقال.


لن نتكلم على الاكواد التي توجد داخل الوسم <head> باستثناء كود meta لانه يستعمل اكواد بلوجر فلو لاحظت داخل القالب الخاص بك في وسم meta ستجد الكود التالي :

<meta expr:content=

وهذا الكود معناه اننا سوف نضع خاصية content داخل الوسم meta، ولكننا نضع قبلها expr لكي نستدعي القيمة التي سوف تكون داخل content باستعمال اكواد بلوجر ركز في المثال التالي :


<meta expr:content='data:blog.url.canonical' property='og:url'/>

لاحظ data:blog.url.canonical وهي كود خاص ببلوجر سوف يترجم لاحقا الى قيمة توضع داخل الخاصية content.


كود data:

هذا الكود يستخدم لكي نجلب مجموعة من القيم من مدونة بلوجر تابع معي المثال لكي تفهم :

اولا نكتب data نقطتين ثم بعد ذلك نكتب القيمة سوف نشرح قيمتين مهمتين وهما post و blog.

قيمة post تجلب لنا قيم مختلفة من المشاركات او التدوينات التي تنشرها، مثلا عنوان المشاركة تاريخ نشر المشاركة تاريخ تعديل المشاركة رابط المشاركة او المشاركة نفسها وغيرها.

  • post.title لجلب عنوان المشاركة
  • post.url لجلب رابط المشاركة
  • post.body لجلب المشاركة كلها
  • post.featuredImage لجلب صورة المشاركة
  • post.author.name.jsonEscaped  لجلب اسم الكاتب
  • post.date.iso8601.jsonEscaped لجلب تاريخ النشر

وقد تختلف بعض هذه الاكواد على حسب اصدار بلوجر الذي تستخدمه او version هل هو 1 او 2.

قيمة blog والتي سوف تجلب لنا امور تتعلق بالمدونة كلها مثل رابط المدونة واسم المدونة وعنوانها.

  • blog.homepageUrl لجلب رابط المدونة
  • blog.pageType لجلب نوع الصفحة هل هي صفحة المدونة الرئيسية ام صفحة احدى المشاركات
  • blog.blogId لجلب معرف المدونة
  • blog.url لجلب الرابط الذي يظهر في اعلى المدونة

كود loop

ويكتب على الشكل التالي :
<b:loop values='data:links'

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

كود b:includable

هذا الكود هو عبارة عن حاوية لديها معرف او اسم و يتم وضع داخلها الاكواد البرمجية، ومن خلال استدعائنا لها عن طريق المعرف او id الخاص بها سوف يتم استدعاء وتنفيذ الاكواد الموجودة داخلها ويتم استدعائها من خلال الكود b:include.

كود application/ld+json

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

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

فوائد تعلم تصميم قالب بلوجر

انشاء مدونة مجانية والربح منها

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

العمل الحر اونلاين

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

كيفية تعلم تصميم قوالب بلوجر

تعلم لغات البرمجة

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

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

تعلم التصميم

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

أحدث أقدم

نموذج الاتصال