Breaking News

How to add Breadcrumbs in Blogger Template





Search for Breadcrumbs

and then remove

.breadcrumbs{display:none;margin:0;font-size:0px}

Now paste this code above

]]></b:skin>

copy from here

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #e6e4e3;}
/*
Responsive Table MBG
*/
@media screen and (max-width: 400px) {
table {font-size: 70%;}
}
@media screen and (max-width: 250px) {
table {font-size: 50%;}
}
@media screen and (max-width: 150px) {
table {font-size: 30%;}
}
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 5px;
border: 1px solid #ccc;
text-align: left;
}
.table a
{
display:block;
text-decoration:none;
}
blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: Arial;
font-size:20px;
}


Now find

<b:if cond='data:mobile == &quot;false&quot;'>
Paste codes between this Both
<b:include data='top' name='status-message'/>

This code

<!--breadcrumbs start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == true'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187; Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<p class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.searchLabel'>
<p class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<!--breadcrumbs end-->


Save the theme and enjoy

No comments

If you have any Doubt. Please let me know. I will be happy to help you.