الاثنين، 17 ديسمبر 2012

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






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

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

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

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

breadcrumb navigation for blogger


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


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


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


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

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



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

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

breadcrumb navigation for blogger

2- نضغط تحرير HTML
breadcrumb navigation for blogger
 3- نضع علامة صح لتوسيع القالب
breadcrumb navigation for blogger


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

breadcrumb navigation for blogger

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 التي حددتها لتصنيف تدوينتك

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

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

breadcrumb navigation for blogger


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

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



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





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 لتحديد مسار تصفح زوارك بالمدونة

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

هناك 11 تعليقًا:

Related Posts Plugin for WordPress, Blogger...