Add Breadcrumb Navigation For Blogger اضافة شريط التسلسل للتدوينات الى بلوجر جديد

السلام عليكم ورحمة الله وبركاته ؛ سوف اشرح فى هذا الموضوع طريقة لمستخدمى مدونات بلوجروهى التسلسل للتدوينات او ما يسميها البعض ( أضافة اين تقرأ الأن) ؛ لها اهمية كبيره لزوار المدونة لان هذه الاضافة تجعله يعرف اين موقعه بالتحديد داخل المدونة

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

• سجل دخولك الى لوحة تحكم المدونة بلوجر
• اختر التبويب ( قالب) على يمين لوحة التحكم
• اضافط على ( نسخ احتياطية/ استعاده) ؛ ثم اضغط على (تنزيل النموذج الكامل) وذلك لاسترجاع القالب مره اخرة فى حالة حدوث خطأ لا قد الله.
• نرجع الى التبويب (قالب)
• نختار ( تحرير HTML)
• نضغط على ( توسيع قوالب عناصر واجهة المستخدم)
• نقوم بالبحث عن الكود التالى باستخدام ازار لوحة المفاتيح ( Ctrl + F) 

<b:include data='top' name='status-message'/>

ونقوم بإستبداله بهذا الكود التالى :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

•  ثم نقوم بالبحث عن الكود التالى:

<b:includable id='main' var='top'>

•  ونستبدله بهذا الكود

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop><b:else/>
&#187; Uncategorized
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span></p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span></p></b:if></b:if></b:if></b:if>
</b:includable>
<b:includable id='main' var='top'>

 الان اخر خطوه وهى خطوة (شكل الاضافة) css 

• ابحث عن الكود 

]]></b:skin>

•  ثم ضع فوقه مباشره الكود الاتى

/* www.bloggertofree.com */
.breadcrumbs {
    margin: 0 0 7px 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:12px;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
} /* www.cairo-pro.blogspot.com */

* والان قم بالحفظ وشاهد شكل الاضافة ؛ واى أستفسار بخصوصها اكتبها وان شاء الله بجاوبكم عليها ؛ بالتوفيق