أداة breadcrumbs لتتبع مسار تصفحك للمدونة من تعريبي breadcrumb navigation for blogger

أداة breadcrumb navigation  لمعرفة وتتبع موقع القسم الذي تتصفحه بالمدونة

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

هذه الاداة تعتبر أداة واجهة تساعد المستخدم اثناء تصفح مدونتك على سهولة تتبع القسم الموجود به

مما يسهل للزائر تصفح مدونتك  بسهولة ووضوح واكثر احترافية

مشاهده حيـّه Live Demo

والآن نأتي لطريقة الإضافة:


*(ينصح بعمل نسخة إحتياطية أولاً من قالب المدونة في حال حدوث خطأ)


اولاً ندخل الى:

*قالب او Template >> تحرير شيفرة HTML >> متابعه أو Procced >> توسيع Expand



*إتبع الشرح المصور

1- نذهب لـ قالب

2- نضغط تحرير HTML

 3- نضع علامة صح لتوسيع القالب

4-  (لسهولة البحث إضغط CTRL+F من الكيبورد )

5- نبحث عن السطر التالي:

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

ونقوم بنسخ السطر الملون بالاخضر بالاسفل فوقه مباشرة:

<b:include data='posts' name='breadcrumb'/>

6- نبحث عن السطر الآخر التالي :

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

*تنبيه: إن وجدت هذا السطر مكرر مرتين بنتيجة البحث فقم بإختيار السطر الثاني منهما 
"المهم إختار سطر واحد فقط تنسخ تحته الكود"

7- ننسخ الكود التالي تحت السطر الذي بحثنا عنه بالنقطه (6)

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>

الرئيسية</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>

الرئيسية</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title'

rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>

الرئيسية</a></span> &#187; <span>غير مصنف</span> &#187;

<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>الرئيسية</a></span> &#187; <span>الأرشيف لشهر

<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>الرئيسية</a></span> &#187; <span>كل

المواضيع</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>الرئيسية</a></span> &#187; <span>مواضيع تحت أقسام

<data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

*ملاحظة قبل الانتقال للخطوة التالية :

الكود أعلاه يقوم بإظهار اخر كلمة من الوسوم او التصنيفات او الـ Labels التي حددتها لتصنيف تدوينتك

حتى لو كنت قد حددت اكثر من تصنيف لها

كما هو موجود بالصورة بالاسفل:

اما ان اردت ان تجعل المسار يشمل جميع التصنيفات والوسوم المحددة لتدوينتك

كما هو موضح بالصورة بالاسفل

فقم بحذف السطرين الملونين باللون الأزرق بالكود أعلاه

8- نبحث عن السطر التالي :

]]></b:skin>

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

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

9- نقم بحفظ القالب وهكذا قد إنتهينا




والآن أصبح بمدونتك أداة breadcrumb navigation لتحديد مسار تصفح زوارك بالمدونة

تهانينا ....!