تركيب خاصية Breadcrumb مع حل مشكلة البيانات المفقودة في مسارات التنقل | Sunsetting support for data-vocabulary

منذ فترة من تاريخ هذا المنشور تلقى العديد من صناع المحتوى (أصحاب المواقع والمدونات) بريدا إلكتروني أو إشعار تحذير على أداة مشرفي المواقع وذلك بشأن مخطط البيانات المهيكلة  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 لقالب مدونتك بإستخدام علامات بلوجر القياسية..وستلاحظ أن الفكرة بسيطة عندما تقارنه مع المخطط التجريبي السابق ذكره.
  • الكود الآتي -إفتراضي- سيعرض لك فقط إسم مدونتك والتسميات مثلا بلوجر كود > المطورين > حلول وذلك فقط في صفحات النشر..أما في الصفحة الثابتة بما أنها لاتحتوي على تسميات سيعرض لك عنوان المدونة والصفحة فقط مثلا بلوجر كود > الأرشيف..ولاحظ الأكواد المحددة باللون هي عبارة عن أيقونات الأسهم يمكن حذفها أو تغييرها.
    ملاحظة:
    لاحظ أن أخر كود من الأيقونات المحددة باللون موجود داخل العلامة الشرطية <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>


تعليقات

إرسال تعليق

إرسال تعليق

قد يهمك ايضا

  • إنشاء صفحة الإتصال على بلوجر متعددة الإستخدامات | نموذج طلب الإنضمام للمدونة

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

  • سكريبت إضافة صفحة إعادة توجيه الروابط لمدونتك | Custom Redirects In Blogger

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

  • مجانا - سكريبت إضافة أداة عربة التسوق إلى المدونة بإستخدام مكتبة simpleCart (js)

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

  • إضافة خاصية تقييم المحتوى على شكل نجوم 🌟 بإستخدام تطبيق Firebase

    المطور
    صورة
    إضافة ستسمح لمتابعيك وزوار مدونتك يراجعون أعمالك الإبداعية ومنتجاتك وخدماتك من خلال خاصية التقييم بالنجوم بشكل رسمي فهي ليست مجرد واجهة أو زينة بل هي أداة رسمية بكل المقايس كونها تعرض لك نفس البيانات في نتائج بحث  Google  كما أنها ذكية التخصيص ويمكن التحكم في أغلب عناصرها بسهولة..والجميل في الموضوع أن الإضافة تابعة لـخدمات Google على رأسهم منصة - Blogger - وهذا يعني أنك لن تضطر للتسجيل في أي موقع للحصول على الأداة بل ستعمل وفقا لقاعدة بياناتك الخاصة على - Firebase -  والتي تتحكم بها كما تريد. الرجاء قبل إكمال الموضوع أحرص على أنك تملك معرف خاص بك لتطبيق - Firebase - إذا لاتملك واحد راجع هذا الموضوع بسرعة..ثم نكمل. إنشاء معرف تطبيق firebase من خلال واجهة المستخدم الجديدة 2020
    أظهر المزيد

  • قالب فلامينغو - Flamingo - قالب مجلة عصري بـ 10$ - الإصدار v2.0.0

    المطور
    صورة
    أحببنا نحن فريق عمل بلوجر كود قبل الدخول في مجموعة المترياليز إطلاق آخر نسخة v2 من قالب -flamingo- وجاء هذا الإجراء تلبيتا لطلب عملائنا الاعزاء واللذي طالبوا بنسخة حديثة تدعم الإصدار 3 الأخير للوحة التحكم الخاصة بالبلوجر. مع العلم أن القالب لن يتم الإستغناء عنه بل سيكون متوفر بحلة جديدة في مجموعة -Themes - Materialize. هذا القالب برعاية موقع حلولي
    شراء المنتج

  • أداة ستجعل من الصعب فك تشفير شفرة المصدر | JavaScript Obfuscator Tool

    المطور
    صورة
    أداة مجانية متوفرة على النت تتيح لكم تحويل شفرة مصدر JavaScript الأصلية إلى تمثيل جديد يصعب فهمه ونسخه وإعادة استخدامه أوتعديله دون إذن. والرائع هو أنه مهما كان حجم وتداخل السكريبت المراد تشفيره سيكون للنتيجة المبهمة الوظيفة الدقيقة للرمز الأصلي..أقصد بدون الحصول على خطا بنسبة 99.99% أوليس هذا رائعا!!. ومن الرائع كذلك في هذه الأداة التي من خلال استخدام مختلف التحولات و"الفخاخ"، مثل ، الدفاع عن النفس و حماية التصحيح ستصعب قراءته باستخدام أدوات مضادة كأداة JS Beautifier إلا طبعا من محترف. لماذا أرغب في تعتيم رمز JavaScript الخاص بي؟ دعني أخبرك أن هناك العديد من الأسباب التي تجعل من الأفضل حماية التعليمات البرمجية الخاصة بك ، منها ماهو تقني ومنها ماهو تجاري على سبيل المثال إزالة التعليقات والمساحة البيضاء التي ليست مطلوبة. جعله أسرع في التحميل وصعوبة الفهم ؛ حماية المنتج المدفوع كالقوالب والإضافات التي سهرت على بنائها أشهر وأعوام فمن غير العدل أن تسرق منك وتنسب لغيرك..وفي المجمل لاتكن متساهل حتى لايفقد المجال رونقه والجمال الكامن في شطط البحث ومايصحبه من لذة النجاح فهل
    أظهر المزيد