BreadCrumbs it is just like a Home link followed by the category belongs and then the current location/current post.. In Blogger, the breadcrumbs are the way to realize the category of an article/post.
And now im going to Share with you how to add Breadcrumbs navigator for blogger Just follow easy steps
- First Sign-in on blogger Dashboard
- Go to Template -> Edit HTML
- Step 1: Find (ctrl+F) the following code
<b:include data='top' name='status-message'/>
- copy the following code after it
<b:include data='posts' name='breadcrumb'/>
- Find the following code
<b:includable id='main' var='top'>
- copy the following code above it
<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 == "item"'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><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"'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:if>
</b:loop>
<b:else/>
Unlabelled
</b:if>
<span>
<data:post.title/>
</span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels post-navigation'>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
Archives for
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels post-navigation'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
<span>Posts filed under
<data:blog.pageName/></span>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><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"'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:if>
</b:loop>
<b:else/>
Unlabelled
</b:if>
<span>
<data:post.title/>
</span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels post-navigation'>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
Archives for
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels post-navigation'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
<span>Posts filed under
<data:blog.pageName/></span>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
- Find ]]></b:skin> and Copy the following css code above it
Google Type
.breadcrumbs a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-position: 100% 0;
background-repeat: no-repeat;
border-color: #D9D9D9;
border-image: none;
border-style: solid;
border-width: 1px 0 1px 1px;
color: #666666;
display: block;
float: left;
font-size: 95%;
padding: 7px 16px 7px 19px;
position: relative;
text-decoration: none;
z-index: 1;
}
.breadcrumbs a:hover {
border-bottom-color: #C4C4C4;
border-top-color: #C4C4C4;
box-shadow: 0 2px 2px #E8E8E8;
color: #333333;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
border-top-left-radius: 5px;
z-index: 30 !important;
}.breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
margin: 0px 0px 15px 0px;
font-size:95%;
}
Wood Type
.breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a {
background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
border: 1px solid #C76A29;
border-radius: 7px 7px 7px 7px;
color: #FFFFFF;
padding: 4px 23px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 2px #000000;
transition: all 0.2s ease 0s;
}
.post-navigation > span {
padding-left: 14px;
}
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a {
background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
border: 1px solid #C76A29;
border-radius: 7px 7px 7px 7px;
color: #FFFFFF;
padding: 4px 23px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 2px #000000;
transition: all 0.2s ease 0s;
}
.post-navigation > span {
padding-left: 14px;
}
Blue Type
.breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}.post-navigation > a {
margin: 0px 0px 15px 0px;
font-size:95%;
}.post-navigation > a {
background: url("http://i.imgur.com/KbrSuUv.jpg") repeat scroll 0 0 transparent;
border: 1px solid #016DB5;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
padding: 4px 26px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;
} .post-navigation > span {
padding-left: 14px;
}
padding-left: 14px;
}
0 (mga) komento:
Post a Comment