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

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

تطوير بلوجركل

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

محمد عبد الوهاب منذ 12 سنة تقريبا 0

A+ A-

facebook twitter

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

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

يكون شكل الاضافة مثل هذه التى على مدونتى او كشكل موضح لها

الصفحة الرئيسية >> التسمية >> عنوان الموضوع

ولاضافة ذلك اتبع الخطوات التالية :

• سجل دخولك الى لوحة تحكم المدونة بلوجر
• اختر التبويب ( قالب) على يمين لوحة التحكم
• اضافط على ( نسخ احتياطية/ استعاده) ؛ ثم اضغط على (تنزيل النموذج الكامل) وذلك لاسترجاع القالب مره اخرة فى حالة حدوث خطأ لا قد الله.
• نرجع الى التبويب (قالب)
• نختار ( تحرير 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'>رئيسية المدونة</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'>رئيسية المدونة</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'>رئيسية المدونة</a> &#187; All posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>رئيسية المدونة</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>

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

1

1

/* 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 */

1

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

منقول مدونة القاهرة 

التعديل مدونة قاهر الجبابرة

الوسوم: تطوير بلوجر كل