مرحبا..منذ فترة تلقى العديد من صناع المحتوى (أصحاب المواقع والمدونات) بريدا إلكتروني أو إشعار تحذير على أداة مشرفي المواقع وذلك بشأن مخطط البيانات المهيكلة  data-vocabulary.org الذي لن  يصبح معتمد من طرف محركات البحث العالمية وذلك طبعا بشكل تدريجي ولكن بالنسبة لمحرك بحث google تم إعتماد هذا الإجراء منذ أبريل الفارط و لمعرفة المزيد راجع التصريح الرسمي من هنا.






لمحة سريعة لفهم مفردات البيانات المهيكلة

تُستخدم مخططات البيانات المهيكلة مثل schema.org و data-vocabulary.org لتحديد هياكل ذات معنى مشترك للتطبيقات المستندة إلى العلامات على الويب. ومع تزايد استخدام وشعبية schema.org ، قرر مهندسوا هذه المحركات التركيز على نظام SD واحد. اعتبارًا من 6 أبريل 2020 ، لن تصبح ترميز البيانات- vocabulary.org مؤهلة لميزات النتائج الغنية من Google .

فـ Google تستخدم التنسيقات الموحدة للبيانات والمخططات المشتركة لتوفير معلومات حول الصفحة والأشياء الموضحة في الصفحة. إذ يتم استخدام هذه المعلومات لغرضين رئيسيين
1-فهم محتوى الصفحة.
2-إضافة تحسينات وتمكين ميزات نتائج البحث الخاصة.
وطبعا إستخراج هذه البيانات من الصفحة يكون فقط عند تحديدها وتنسيقها مسبقا من طرفك أنت كمشرف مدونة أو موقع إلكتروني.
وإلى جانب تنسيقات البيانات المهيكلة ، تعمل مخططات البيانات المهيكلة مثل نوع من القاموس ، حيث تحدد مصطلحات أنواع الأشياء مثل ("الشخص" و "الحدث" و "المؤسسة") ، وللخصائص والعلاقات مثل  ("الاسم" ، و "أعمل لـ" "). بالحفاظ على هذا الفصل بين التنسيق والمخطط ، يمكن لمستخدمي التنسيقات المختلفة الاستفادة من نفس المخططات المشتركة على نطاق واسع.

ماذا حدث بالضبط مع مفردات البيانات؟

كان مشروع "مفردات البيانات" من Google بمثابة معلم هام في تطوير البيانات المهيكلة على الويب ، لأنه أدى إلى تعاون كامل مع محركات البحث الأخرى لإنشاء schema.org. ومع ذلك فقد أصبح الآن قديمًا جدًا ويفضل عمومًا استخدام مفردات مشتركة على نطاق أوسع فقط من قاموس Schema.org. لذلك ، ستتوقف علامة data-vocabulary.org عن كونها مؤهلة للحصول على ميزات نتائج بحث Google والتحسينات.

report
تنويه ...Google تنصح لكي تكون مؤهلاً لميزات النتائج الغنية من Google ، توصي بتحويل بياناتك المهيكلة من data-vocabulary.org إلى schema.org.

كيفية تغيير مفردات البيانات إلى schema.org

للأسف لاحظت تدوينات بعض ممن نشروا شرح حول طريقة إصلاح مخطط البيانات ( شريط التنقل ) أو مايعرف بـميزة breadcrumb وكان الشرح كارثي بصراحة والعجيب أن Google نفسها أعطت أمثلة لكيفية التحويل أو الإنتقال بين البيانات المهيكلة...وذلك لم ينحصر عند البحث عن كلمة data-vocabulary.org في قالب مدونتك وإستبدالها بـ schema.org مثلما فعل الكثرين.
وكان البعض يقدم شفرة كاملة لوضعها في القالب دون الأخذ في عين الإعتبار إحتمال التعارض في الأكواد وأذية مجهودات المستخدم في تحسين قالبه ومدونته في محركات البحث.

إذن إخوان سنحاول في هذا البرنامج التعليمي أن نفهم مع بعض بشكل مبسط كيف تكتب السلسلة البرمجية للبياناتك المهيكلة لنستطيع التحويل بسهولة من data-vocabulary.org إلى schema.org وذلك في قسم مخطط التنقل أو كما ذكرناه سابقا بميزة breadcrumb.

الخطوة الأولى:مقارنة سريعة بين المخططين.

    تنويه:
    تاليا..سنعرض لكم مخططين بـ لغة HTML من كل مكتبة data-vocabulary.org و schema.org وحاول أن تركز على الإختلافات..مع الأخذ في عين الإعتبار أن كل شفرة -مخطط- جعلناها مكونة من جزئين..فقط لنفهمك أن هذه المخططات من الممكن أن تكون سلسلة مكررة لأكثر من قسم مثلا
    الرئيسية > إضافات > الصفحات > الفهرس.
  • الكود الآتي عبارة عن سلسلة مخطط لمكتبة data-vocabulary.org التي لم تعد مستخدمة
  • 
    <!-- data-vocabulary.org -->
    <ul>
      <li itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a href='/' itemprop='url'>
         <span itemprop='title'>
           الرئيسية
         </span>
        </a>
      </li>
      <li itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a href='/' itemprop='url'>
         <span itemprop='title'>
           إضافات
         </span>
        </a>
      </li>
    </ul>
    
  • الكود الآتي عبارة عن سلسلة مخطط لمكتبة schema.org والمعتمدة من جميع محركات البحث العالمية.
  • 
    <!-- schema.org -->
    <ul itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
      <li itemscope='itemscope' itemprop='itemListElement' itemtype='http://schema.org/ListItem'>
        <a href='/' itemprop='item'>
         <span itemprop='name'>
           الرئيسية
         </span>
        </a>
     <meta content='1' itemprop='position'/>
      </li>
      <li itemscope='itemscope' itemprop='itemListElement' itemtype='http://schema.org/ListItem'>
        <a href='/' itemprop='item'>
         <span itemprop='name'>
           إضافات
         </span>
        </a>
     <meta content='2' itemprop='position'/>
      </li>
    </ul>
    
      التعديلات والإختلافات:
    • لاحظ أن العنوان الكامل لـ http://data-vocabulary.org/Breadcrumb يحوي مسار مختلف عن http://schema.org/BreadcrumbList لهذا من الغباء أن نغير إسم المكتبة ونترك المسار.
    • كذلك في العناوين لاحظ أن مكتبة schema.org تشترط عنوان مخصص للحاوية الإبن http://schema.org/ListItem وهذا الإعداد غير موجود في data-vocabulary.org وكذلك يجب تعريف سمة الدعامة itemListElement.
    • في وسم العنصر القابل للنقر لاحظ أن سمة الدعامة تغيرت من url إلى item في مكتبة schema.org.
    • في وسم إسم العنصر لاحظ أن سمة الدعامة تغيرت من title إلى name في مكتبة schema.org.
    • العلامة الأخيرة والمهمة <meta content='1' itemprop='position'/> الموجودة فقط في مكتبة schema.org ولاحظ أنها تعتمد على الفهرسة الرقمية فكلما زاد عدد الأقسام زاد الرقم من 1 و 2 وهكذا...

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية: التطبيق العملي.

    تعليق:
    الآن سنعتمد فقط على البيانات المهيكلة من مكتبة schema.org فماستقوم به هو كتابة كود breadcrumb لقالب مدونتك بإستخدام علامات بلوجر القياسية..وستلاحظ أن الفكرة بسيطة عندما تقارنه مع المخطط التجريبي السابق ذكره.
  • الكود الآتي -إفتراضي- سيعرض لك فقط إسم مدونتك والتسميات مثلا بلوجر كود > المطورين > حلول وذلك فقط في صفحات النشر..أما في الصفحة الثابتة بما أنها لاتحتوي على تسميات سيعرض لك عنوان المدونة والصفحة فقط مثلا بلوجر كود > الأرشيف..ولاحظ الأكواد المحددة باللون هي عبارة عن أيقونات الأسهم يمكن حذفها أو تغييرها.
  • report
    لاحظ أن أخر كود من الأيقونات موجود داخل العلامة الشرطية <b:if cond='not data:label.isLast'><i class='fa fa-angle-left'/></b:if> وذلك معناه أنه لايجب عرض الأيقونة لآخر تسمية حتى لايظهر المسار بهذا الشكل مثلا بلوجر كود > المطورين > حلول >.
    
      <b:if cond='data:view.isSingleItem'>
        <b:if cond='data:view.isPage'>
          <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.homepageUrl' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.title/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='1' itemprop='position'/>
            </li>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.url' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.pageName/>
                </span>
              </a>
              <meta content='2' itemprop='position'/>
            </li>
          </ul>
          <b:else/>
          <ul temscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <b:loop values='data:posts' var='post'>
              <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                <a expr:href='data:blog.homepageUrl' itemprop='item'>
                  <span itemprop='name'>
                    <data:blog.title/>
                  </span>
                </a>
                <i class='fa fa-angle-left'/>
                <meta content='1' itemprop='position'/>
              </li>
              <b:if cond='data:post.labels'>
                <b:loop index='i' values='data:post.labels' var='label'>
                  <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                      <a expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;' itemprop='item'>
                        <span itemprop='name'>
                          <data:label.name/>
                        </span>
                      </a>
                      <b:if cond='not data:label.isLast'><i class='fa fa-angle-left'/></b:if>
                      <meta expr:content='data:i+2' itemprop='position'/>
                    </li>
                </b:loop>
              </b:if>
            </b:loop>
          </ul>
        </b:if>
      </b:if>
    
  • الكود الآتي هو نفس الكود السابق لكن لنفترض أن المنشورات الخاصة بك تحتوي على أكثر من قسم لكنك تريد عرض عدد معين ماعليك سوى إضافة علامة شرطية...لاحظ في الكود المحدد الذي أضفناه يوجد به الرقم 3 نغير الرقم للعدد المراد عرضه من التسميات مثلا لوكان عندك المسار هكذا بلوجر كود > المطورين > حلول ووضعت رقم 1 سيعرض هكذا بلوجر كود > المطورين.
  • 
      <b:if cond='data:view.isSingleItem'>
        <b:if cond='data:view.isPage'>
          <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.homepageUrl' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.title/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='1' itemprop='position'/>
            </li>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.url' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.pageName/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='2' itemprop='position'/>
            </li>
          </ul>
          <b:else/>
          <ul temscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <b:loop values='data:posts' var='post'>
              <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                <a expr:href='data:blog.homepageUrl' itemprop='item'>
                  <span itemprop='name'>
                    <data:blog.title/>
                  </span>
                </a>
                <i class='fa fa-angle-left'/>
                <meta content='1' itemprop='position'/>
              </li>
              <b:if cond='data:post.labels'>
                <b:loop index='i' values='data:post.labels' var='label'>
                 <b:if cond='data:i lt 3'>
                  <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                      <a expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;' itemprop='item'>
                        <span itemprop='name'>
                          <data:label.name/>
                        </span>
                      </a>
                      <b:if cond='not data:label.isLast'><i class='fa fa-angle-left'/></b:if>
                      <meta expr:content='data:i+2' itemprop='position'/>
                    </li>
                 </b:if>
                </b:loop>
              </b:if>
            </b:loop>
          </ul>
        </b:if>
      </b:if>
    
  • نفس الكود الآتي هو الكود السابق لكن لنفترض كذلك أنك تريد عرض قسم واحد في المنشورات ولكن في محركات البحث تريد عرض جميع الأقسام..هنا نضيف فقط سطر بهذا الشكل الآتي..أنظر الكود المحدد الذي أضفناه يوجد كذلك به رقم 1 والذي يعني القسم الآول فما بعده قم بإخفائه..طبعا هذا الإخفاء سيكون فقط داخل المنشور بينما في نتائج البحث ستكون بقية الأقسام ظاهرة.
  • 
      <b:if cond='data:view.isSingleItem'>
        <b:if cond='data:view.isPage'>
          <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.homepageUrl' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.title/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='1' itemprop='position'/>
            </li>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.url' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.pageName/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='2' itemprop='position'/>
            </li>
          </ul>
          <b:else/>
          <ul temscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <b:loop values='data:posts' var='post'>
              <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                <a expr:href='data:blog.homepageUrl' itemprop='item'>
                  <span itemprop='name'>
                    <data:blog.title/>
                  </span>
                </a>
                <i class='fa fa-angle-left'/>
                <meta content='1' itemprop='position'/>
              </li>
              <b:if cond='data:post.labels'>
                <b:loop index='i' values='data:post.labels' var='label'>
                  <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                      <a expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;' itemprop='item'>
                        <span itemprop='name'>
                          <data:label.name/>
                        </span>
                      </a>
                      <b:if cond='not data:label.isLast'><i class='fa fa-angle-left'/></b:if>
                      <meta expr:content='data:i+2' itemprop='position'/>
                      <b:attr cond='data:i gte 1' name='style' value='display: none'/>
                    </li>
                </b:loop>
              </b:if>
            </b:loop>
          </ul>
        </b:if>
      </b:if>
    
  • والآن لإضافة عنوان التدوينة إلى مسار التنقل مع تقييد المسار بقسم واحد فقط لتكون النتيجة في صفحة النشر هكذا بلوجر كود > المطورين > حل مشكلة البيانات المفقودة في مسارات التنقل بينما في نتائج البحث هكذا بلوجر كود > المطورين > حلول نقوم بالآتي..
  • 
      <b:if cond='data:view.isSingleItem'>
        <b:if cond='data:view.isPage'>
          <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.homepageUrl' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.title/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='1' itemprop='position'/>
            </li>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
              <a expr:href='data:blog.url' itemprop='item'>
                <span itemprop='name'>
                  <data:blog.pageName/>
                </span>
              </a>
              <i class='fa fa-angle-left'/>
              <meta content='2' itemprop='position'/>
            </li>
          </ul>
          <b:else/>
          <ul temscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
            <b:loop values='data:posts' var='post'>
              <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                <a expr:href='data:blog.homepageUrl' itemprop='item'>
                  <span itemprop='name'>
                    <data:blog.title/>
                  </span>
                </a>
                <i class='fa fa-angle-left'/>
                <meta content='1' itemprop='position'/>
              </li>
              <b:if cond='data:post.labels'>
                <b:loop index='i' values='data:post.labels' var='label'>
                  <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                      <a expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;' itemprop='item'>
                        <span itemprop='name'>
                          <data:label.name/>
                        </span>
                      </a>
                      <i class='fa fa-angle-left'/>
                      <meta expr:content='data:i+2' itemprop='position'/>
                      <b:attr cond='data:i gte 1' name='style' value='display: none'/>
                    </li>
                </b:loop>
              </b:if>
                <li>
                  <a expr:href='data:blog.url'>
                    <span>
                      <data:blog.pageName/>
                    </span>
                  </a>
                </li>
            </b:loop>
          </ul>
        </b:if>
      </b:if>
    
    تنبيه مهم جدا:
    حاولنا في هذا البرنامج إعطاء الأسس لحل مشكل البيانات المفقودة في مسار التنقل وذلك بشكل إفتراضي وهذا معناه أن تحرص على أن تبحث عن هذه الأكواد في قالبك مدونتك عن طريق البحث عن مثل هذه الكلمات data-vocabulary.org أو schema.org أو breadcrumb فإذا وجدت واحد من تلك الخيوط عليك إتباع خطوات المقارنة والتصحيح التي شرحناها سابقا.

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة: تركيب خاصية breadcrumb

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

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب
  • قم بالبحث عن <b:includable id='threaded_comments' var='post'> أسفل وسم الإغلاق </b:includable> نضع الكود الآتي..أنظر الصورة قبل وضع الكود.
  •                               <b:includable id='breadcrumb' var='posts'>
                                    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <style type='text/css'>
    /*<![CDATA[*/
    /*===================================
              =style-1- Breadcrumbs Navigation=
    ===================================*/
    #breadcrumbs{position:relative;background-color:#edeff0;padding:5px;font-size:14px;}
    #breadcrumbs ul{margin:0;padding:0;position:relative;overflow:hidden;display:block;}
    #breadcrumbs ul li{text-align:center;display:inline-block;position:relative;padding:0;margin:0 3px;}
    #breadcrumbs li a{position:relative;font-size:12px;margin:5px 0;padding:5px 10px;color:#2f2f2f;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none!important;vertical-align:middle;}
    #breadcrumbs li a i{font-size:15px;color:#4a4a4a;}
    #breadcrumbs ul li::after{content:"\f053";height:16px;width:16px;vertical-align:middle;font-family:FontAwesome;text-align:center;font-size:15px;color:#cacaca;}
    #breadcrumbs ul li:last-child::after{display:none;}
    #breadcrumbs a:hover{color:#1165f1;}
    #breadcrumbs a.bred-title{max-width:250px;}
    /*=radius=*/
    #breadcrumbs{border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
    #breadcrumbs a{border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}
    /*=dir=*/
    html[dir="rtl"] #breadcrumbs ul li{float:right;}
    html[dir="ltr"] #breadcrumbs ul li{float:left;}
    html[dir="rtl"] #breadcrumbs ul li:first-child{margin:0 0 0 3px;}
    html[dir="ltr"] #breadcrumbs ul li:first-child{margin:0 3px 0 0;}
    html[dir="ltr"] #breadcrumbs ul li::after{content:"\f054";}
    @media screen and (max-width:1200px){#breadcrumbs{padding:5px;margin:0;}#breadcrumbs a.bred-title,#breadcrumbs li a{max-width:80px;}}
    /*]]>*/
    </style>
                                      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                                        <div class='static-page_breadcrumbs' id='breadcrumbs'>
                                          <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
                                            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                              <a expr:href='data:blog.homepageUrl' itemprop='item'>
                                                <span itemprop='name'>
                                                  <i class='fa fa-home'/>
                                                  <data:blog.title/>
                                                </span>
                                              </a>
                                              <meta content='1' itemprop='position'/>
                                            </li>
                                            <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                              <a class='bred-title' expr:href='data:blog.url' itemprop='item'>
                                                <span itemprop='name'>
                                                  <i class='fa fa-file-text-o'/>
                                                  <data:blog.pageName/>
                                                </span>
                                              </a>
                                              <meta content='2' itemprop='position'/>
                                            </li>
                                          </ul>
                                        </div>
                                        <b:else/>
                                        <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                          <div class='item_breadcrumbs' id='breadcrumbs'>
                                            <ul itemtype='//schema.org/BreadcrumbList' temscope='itemscope'>
                                              <b:loop values='data:posts' var='post'>
                                                <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                  <a expr:href='data:blog.homepageUrl' itemprop='item'>
                                                    <span itemprop='name'>
                                                      <i class='fa fa-home'/>
                                                      <data:blog.title/>
                                                    </span>
                                                  </a>
                                                  <meta content='1' itemprop='position'/>
                                                </li>
                                                <b:if cond='data:post.labels'>
                                                  <b:loop index='i' values='data:post.labels' var='label'>
                                                    <b:if cond='data:i lt 3'>
                                                      <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                        <a expr:href='data:label.url + &quot;?&amp;amp;max-results=4&quot;' itemprop='item'>
                                                          <span itemprop='name'>
                                                            <i class='fa fa-tag'/>
                                                            <data:label.name/>
                                                          </span>
                                                        </a>
                                                        <meta expr:content='data:i+2' itemprop='position'/>
                                                        <b:attr cond='data:i gte 1' name='style' value='display: none'/>
                                                      </li>
                                                    </b:if>
                                                  </b:loop>
                                                </b:if>
                                                <li>
                                                  <a class='bred-title' expr:href='data:blog.url'>
                                                    <span>
                                                      <i class='fa fa-file-text-o'/>
                                                      <data:blog.pageName/>
                                                    </span>
                                                  </a>
                                                </li>
                                              </b:loop>
                                            </ul>
                                          </div>
                                          <b:else/>
                                          <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                            <div class='archive_breadcrumbs' id='breadcrumbs'>
                                              <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
                                                <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                  <a expr:href='data:blog.homepageUrl' itemprop='item'>
                                                    <span itemprop='name'>
                                                      <i class='fa fa-home'/>
                                                      <data:blog.title/>
                                                    </span>
                                                  </a>
                                                  <meta content='1' itemprop='position'/>
                                                </li>
                                                <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                  <a class='bred-title' expr:href='data:blog.url' itemprop='item'>
                                                    <span itemprop='name'>
                                                      <i class='fa fa-archive'/>
                                                      <data:blog.pageName/>
                                                    </span>
                                                  </a>
                                                  <meta content='2' itemprop='position'/>
                                                </li>
                                              </ul>
                                            </div>
                                            <b:else/>
                                            <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                              <div class='index_breadcrumbs' id='breadcrumbs'>
                                                <b:if cond='data:blog.pageName == &quot;&quot;'>
                                                  <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
                                                    <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                      <a expr:href='data:blog.homepageUrl' itemprop='item'>
                                                        <span itemprop='name'>
                                                          <i class='fa fa-home'/>
                                                          <data:blog.title/>
                                                        </span>
                                                      </a>
                                                      <meta content='1' itemprop='position'/>
                                                    </li>
                                                    <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                      <a class='bred-title' expr:href='data:blog.url' itemprop='item'>
                                                        <span itemprop='name'>
                                                          <i class='fa fa-file-text-o'/>
                                                          All 
                                                        </span>
                                                      </a>
                                                      <meta content='2' itemprop='position'/>
                                                    </li>
                                                  </ul>
                                                  <b:else/>
                                                  <b:if cond='data:blog.searchQuery'>
                                                    <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
                                                      <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                        <a expr:href='data:blog.homepageUrl' itemprop='item'>
                                                          <span itemprop='name'>
                                                            <i class='fa fa-home'/>
                                                            <data:blog.title/>
                                                          </span>
                                                        </a>
                                                        <meta content='1' itemprop='position'/>
                                                      </li>
                                                      <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                        <a class='bred-title' expr:href='data:blog.url' itemprop='item'>
                                                          <span itemprop='name'>
                                                            <i class='fa fa-search'/>
                                                            <data:blog.pageName/>
                                                          </span>
                                                        </a>
                                                        <meta content='2' itemprop='position'/>
                                                      </li>
                                                    </ul>
                                                    <b:else/>
                                                    <b:if cond='data:blog.searchLabel'>
                                                      <ul itemscope='itemscope' itemtype='//schema.org/BreadcrumbList'>
                                                        <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                          <a expr:href='data:blog.homepageUrl' itemprop='item'>
                                                            <span itemprop='name'>
                                                              <i class='fa fa-home'/>
                                                              <data:blog.title/>
                                                            </span>
                                                          </a>
                                                          <meta content='1' itemprop='position'/>
                                                        </li>
                                                        <li itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
                                                          <a class='bred-title' expr:href='data:blog.url' itemprop='item'>
                                                            <span itemprop='name'>
                                                              <i class='fa fa-tag'/>
                                                              <data:blog.pageName/>
                                                            </span>
                                                          </a>
                                                          <meta content='2' itemprop='position'/>
                                                        </li>
                                                      </ul>
                                                    </b:if>
                                                  </b:if>
                                                </b:if>
                                              </div>
                                              <b:else/>
                                              <b:if cond='data:view.isPreview'>
                                                <div class='index_breadcrumbs' id='breadcrumbs'>
                                                  <ul>
                                                    <li>
                                                      <a expr:href='data:blog.homepageUrl'>
                                                        <span itemprop='title'>
                                                          <i class='fa fa-home'/>
                                                          <data:blog.title/>
                                                        </span>
                                                      </a>
                                                    </li>
                                                    <li>
                                                      <a class='bred-title' expr:href='data:post.title'>
                                                        <i class='fa fa-eye'/>
                                                        <data:blog.pageName/>
                                                      </a>
                                                    </li>
                                                  </ul>
                                                </div>
                                              </b:if>
                                            </b:if>
                                          </b:if>
                                        </b:if>
                                      </b:if>
                                    </b:if>
                                  </b:includable>
  • الآن قم بالبحث عن <b:includable id='main' var='top'> أسفله مباشرة نضع الكود الآتي...
  • <b:include data='posts' name='breadcrumb'/>
  • وأخيرا إذا أردت تركيب شكل آخر بدل المعروض في الأعلى قم بالآتي.
  • تنبيه:
    قم بإستبدال كود الستايل بالكود الآتي..وحذاري قم فقط بتغيير كود الستايل -النمط- وهو الجزء المحدد في الشفرة التي قدمناها سابقا وذلك لتحصل على الشكل أو النموذج الموضح لك أدناه..

    <style type='text/css'>
    /*<![CDATA[*/
    /*===================================
      =style-2- Breadcrumbs Navigation=
    ===================================*/
    #breadcrumbs{position:relative;background-color:white;padding:0;font-size:14px;}
    #breadcrumbs ul{margin:0;padding:0;position:relative;overflow:hidden;display:block;}
    #breadcrumbs ul li{text-align:center;display:inline-block;position:relative;padding:0;margin:0 3px;}
    #breadcrumbs li a{position:relative;font-size:12px;z-index:2;margin:5px 0;padding:5px 10px;background-color:#edeff0;color:#2f2f2f;border:4px solid #edeff0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none!important;}
    #breadcrumbs li a i{font-size:15px;}
    #breadcrumbs a:hover{background-color:#ffffff;color:#1165f1;}
    #breadcrumbs a.bred-title{max-width:250px;}
    #breadcrumbs ul:before,#breadcrumbs ul:after{content:"";z-index:1;position:absolute;height:4px;background:#edeff0;margin:0 2px;width:100%;top:50%;-webkit-transform:translateY(-50%) translateX(-1px);-moz-transform:translateY(-50%) translateX(-1px);-ms-transform:translateY(-50%) translateX(-1px);-o-transform:translateY(-50%) translateX(-1px);transform:translateY(-50%) translateX(-1px);}
    #breadcrumbs ul:after{content:"\f115";font-family:FontAwesome;text-align:center;font-size:15px;color:#2f2f2f;line-height:35px;width:35px;height:35px;}
    /*=radius=*/
    #breadcrumbs a{border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}
    #breadcrumbs ul:after{border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
    /*=dir=*/
    html[dir="rtl"] #breadcrumbs ul li{float:right;}
    html[dir="ltr"] #breadcrumbs ul li{float:left;}
    html[dir="rtl"] #breadcrumbs ul li:first-child{margin:0 0 0 3px;}
    html[dir="ltr"] #breadcrumbs ul li:first-child{margin:0 3px 0 0;}
    html[dir="rtl"] #breadcrumbs ul:before,html[dir="rtl"] #breadcrumbs ul:after{left:0;}
    html[dir="ltr"] #breadcrumbs ul:before,html[dir="ltr"] #breadcrumbs ul:after{right:0;}
    @media screen and (max-width:1200px){#breadcrumbs{padding:5px;margin:0;}#breadcrumbs a.bred-title,#breadcrumbs li a{max-width:80px;}}
    /*]]>*/
    </style>


©2020 جميع الحقوق محفوظة لموقع بلوجر كود. يتم التشغيل بواسطة Blogger.