تقنيات الويب: اضافة البريدكرامبس التي يبحث عنها الجميع breadcrumbs

اضافة البريد كرامبس breadcrumbs اعلى كل مقال

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

كيف تقوم بتفعيل الاضافة ؟ .. اتبع الخطوات التالية ...

1. قم بفتح اعدادات القالب وتحرير كود html كما بالصورة التالية ..

2. قم بالبحث عن الكود التالي ..

]]></b:skin>

وفوقة مباشرة قم باضافة الكود التالي ...

/***breadcrumbs start***/
#breadcrumbs-mbl {
background: #eee;
width: 513px;
margin-left: 20px;
border-width: 1px;
font-family: droid arabic kufi;
text-transform: uppercase;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
border-radius: 5px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
}
#breadcrumbs-mbl li{
float: right;
}
#breadcrumbs-mbl a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-mbl li:first-child a{
padding-left: 2em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-mbl a:hover{
background: #fff;
}
#breadcrumbs-mbl a::after,
#breadcrumbs-mbl a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
#breadcrumbs-mbl a::after{
z-index: 2;
border-left-color: #ddd;
}
#breadcrumbs-mbl a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#breadcrumbs-mbl a:hover::after{
border-left-color: #fff;
}
#breadcrumbs-mbl .current,
#breadcrumbs-mbl .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-mbl .current::after,
#breadcrumbs-mbl .current::before{
content: normal;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs-mbl .current,
#breadcrumbs-mbl .current:hover{
font-weight: normal;
background: none;
}
#breadcrumbs-mbl .current::after,
#breadcrumbs-mbl .current::before{
content: normal;
}
/***breadcrumbs end BY: KMXE.BLOGSPOT.COM***/

3. قم بالبحث عن الكود التالي ..

<div class='blog-posts hfeed'>

واسفلها مباشرة قم باضافة الكود التالي ..

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<ul id='breadcrumbs-mbl'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<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 == "true"'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>