شرح كامل لأكواد ووسوم قوالب مدونات بلوجر

سأقدم لك شرحًا شاملًا لأكواد ووسوم قوالب مدونات بلوجر (Blogger). بلوجر يستخدم لغة ترميز خاصة تسمى Blogger Template Language (BTL)، وهي مبنية على لغة XML وتحتوي على وسوم وخصائص محددة لإدارة وتخصيص القوالب. سأشرح أهم الأجزاء والوسوم المستخدمة في قوالب بلوجر.

شرح كامل لأكواد ووسوم قوالب مدونات بلوجر

بنية قالب بلوجر الأساسية
- الترويسة (Header)
```
 
      <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">
<head>
    <meta charset="utf-8" />
    <title><data:blog.pageTitle /></title>
    <b:skin><![CDATA[/* CSS Styles */]]></b:skin>
</head>
<body>
    
</body>
</html>
```
  - <?xml ... ?>: تعريف أن الملف من نوع XML.
  - <html>: العنصر الرئيسي للقالب.
  - <head>: يحتوي على معلومات مثل عنوان الصفحة <title> وأنماط HTML <b:skin>.
  - <b:skin>: مكان وضع أكواد HTML لتنسيق القالب.
  - <data:blog.pageTitle />: وسم يعرض عنوان المدونة أو الصفحة الحالية.
- الجسم (Body)
```
     
      <body>
    <b:section id="header" class="header" maxwidgets="1" showaddelement="no">
        <b:widget id="Header1" type="Header" locked="true">
            <b:includable id="main">
                
            </b:includable>
        </b:widget>
    </b:section>

    <b:section id="main" class="main" maxwidgets="2" showaddelement="yes">
        <b:widget id="Blog1" type="Blog">
            <b:includable id="main">
                
            </b:includable>
        </b:widget>
    </b:section>
</body>
```
  - section
    - <b:section>: قسم في القالب يمكن إضافة ويدجتس Widgets إليه.
    - id: معرف فريد للقسم.
    - class: فئة HTML لتنسيق القسم.
    - maxwidgets: الحد الأقصى لعدد الويدجتس المسموح بها.
    - showaddelement: يحدد ما إذا كان يمكن إضافة ويدجتس من لوحة التحكم.
    - widget
    - <b:widget>: ويدجت Widget مثل الهيدر أو المدونة أو القائمة الجانبية.
    - id: معرف فريد للويدجت.
    - type: نوع الويدجت مثل Header, Blog, HTML.
    - <b:includable>: جزء من الويدجت يمكن إعادة استخدامه.
وسوم البيانات (Data Tags)

وسوم عامة
- <data:blog.title />: عنوان المدونة.
- <data:blog.description />: وصف المدونة.
- <data:blog.url />: رابط المدونة.
- <data:blog.pageTitle />: عنوان الصفحة الحالية.
وسوم المشاركات
- <data:post.title />: عنوان المشاركة.
- <data:post.body />: محتوى المشاركة.
- <data:post.url />: رابط المشاركة.
- <data:post.dateHeader />: تاريخ المشاركة.
وسوم التعليقات
- <data:comment.author />: اسم كاتب التعليق.
- <data:comment.body />: نص التعليق.
- <data:comment.date />: تاريخ التعليق.
وسوم التحكم (Conditional Tags)

وسوم التحكم تُستخدم لعرض محتوى معين بناءً على شروط محددة.

وسوم التحكم الأساسية
- <b:if cond='condition'>: يعرض المحتوى إذا كانت الشرط صحيحًا.
```
         
         <b:if cond='data:blog.pageType == "index"'>
    <p>هذه الصفحة الرئيسية</p>
</b:if>
```
  <b:else />: يُستخدم مع <b:if> لعرض محتوى بديل إذا كان الشرط غير صحيح.
```
          
       <b:if cond='data:blog.pageType == "index"'>
    <p>الصفحة الرئيسية</p>
<b:else />
    <p>هذه ليست الصفحة الرئيسية</p>
</b:if>
```
  أمثلة على الشروط
  - data:blog.pageType == "index": الصفحة الرئيسية.
  - data:blog.pageType == "item": صفحة مشاركة واحدة.
  - data:blog.pageType == "archive": صفحة الأرشيف.
وسوم التكرار (Loop Tags)

تُستخدم لعرض قائمة من العناصر مثل المشاركات أو التعليقات.

مثال على عرض المشاركات
```
      
     <b:loop values='data:posts' var='post'>
    <h2><data:post.title /></h2>
    <p><data:post.body /></p>
</b:loop>
```
- values: القائمة المراد التكرار عليها مثل data:posts.
- var: المتغير الذي يمثل العنصر الحالي في التكرار.
وسوم الويدجتس (Widgets)

الويدجتس هي عناصر يمكن إضافتها إلى أقسام القالب مثل الهيدر أو القائمة الجانبية.
- أنواع الويدجتس
  - Header: ويدجت الهيدر.
  - Blog: ويدجت لعرض المشاركات.
  - HTML/JavaScript: ويدجت لإضافة أكواد HTML أو JavaScript.
  - Labels: ويدجت لعرض التصنيفات.
- مثال على ويدجت HTML
```
           
          <b:widget id="HTML1" type="HTML" locked="false">
    <b:includable id="main">
        <div class="widget-content">
            <h3>عنوان الويدجت</h3>
            <p>محتوى الويدجت</p>
        </div>
    </b:includable>
</b:widget>
```

وسوم التنسيق (HTML و JavaScript)

إضافة HTML

      
     <b:skin><![CDATA[
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    .header {
        background-color: #333;
        color: #fff;
    }
]]></b:skin>

إضافة JavaScript

      
     <script type="text/javascript">
    function showAlert() {
        alert("مرحبًا!");
    }
</script>

وسوم الروابط (Links)

روابط التصفح

            
     <b:if cond='data:newerPageUrl'>
    <a expr:href='data:newerPageUrl'>الصفحة التالية</a>
</b:if>
<b:if cond='data:olderPageUrl'>
    <a expr:href='data:olderPageUrl'>الصفحة السابقة</a>
</b:if>

وسوم الوسائط (Media)

عرض الصور

       
     <img expr:src='data:post.thumbnailUrl' alt='صورة المشاركة' />

وسوم التخصيص المتقدمة

إضافة ميتا تاج

          
         <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description' />
</b:if>

إضافة Open Graph Tags

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

نصائح عامة
- استخدم <b:include> لإعادة استخدام الأجزاء المشتركة في القالب.
- استخدم <b:defaultmarkups> لتحديد الترميز الافتراضي للويدجتس.
- استخدم <b:attr> لإضافة سمات ديناميكية إلى العناصر.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

شرح كامل لأكواد ووسوم قوالب مدونات بلوجر

شرح كامل لأكواد ووسوم قوالب مدونات بلوجر

بنية قالب بلوجر الأساسية

وسوم البيانات (Data Tags)

وسوم التحكم (Conditional Tags)

وسوم التكرار (Loop Tags)

وسوم الويدجتس (Widgets)

وسوم التنسيق (HTML و JavaScript)

وسوم الروابط (Links)

وسوم الوسائط (Media)

وسوم التخصيص المتقدمة

نصائح عامة

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار