آخر الأخبار

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

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

الصفحة الرئيسية
وسوم بلوجر

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

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

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

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

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

    • الترويسة (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>: جزء من الويدجت يمكن إعادة استخدامه.

  2. وسوم البيانات (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 />: تاريخ التعليق.

  3. وسوم التحكم (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": صفحة الأرشيف.

  4. وسوم التكرار (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: المتغير الذي يمثل العنصر الحالي في التكرار.

  5. وسوم الويدجتس (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>
  6. وسوم التنسيق (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>
  7. وسوم الروابط (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>
  8. وسوم الوسائط (Media)

    عرض الصور

           
     <img expr:src='data:post.thumbnailUrl' alt='صورة المشاركة' />
  9. وسوم التخصيص المتقدمة

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

                
         <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' />
  10. نصائح عامة

    • استخدم <b:include> لإعادة استخدام الأجزاء المشتركة في القالب.

    • استخدم <b:defaultmarkups> لتحديد الترميز الافتراضي للويدجتس.

    • استخدم <b:attr> لإضافة سمات ديناميكية إلى العناصر.

كيف كان المقال؟

لحظة من فضلك

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

لذلك نطلب منك تعليقا للمحتوي وطريقة نشره هل تعجبك ام لا نطلب منك الدعم ودعمك هو تعليقك لكي نستمر لذلك حبا وليس امر من فضلك اكتب تعليق

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

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق