Demo shows in top of this post Click Here
- Sign in to your 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'/>
- Step2: 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>
- Step 3: Find ]]></b:skin> and Copy the following css code above it
Style 1: Style like this blog used
.breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a:after, .post-navigation > a:before {
border-bottom: 13px solid transparent;
border-left: 11px solid #B7B7B7;
border-top: 13px solid transparent;
content: "";
display: inline-block;
left: 100%;
position: absolute;
top: -2%;
z-index: 1;
}
.post-navigation > a:after {
border-left-color: #F2F2F2;
left: 99%;
}.post-navigation > a:hover {
padding-left: 23px;
}
.post-navigation > a {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #B7B7B7;
color: #000000;
padding: 4px 12px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
padding-left: 14px;
}
Style 2: 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%;
}
Style 3: 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;
}
Style 4: Blue Type
.breadcrumbs {
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;
}
I hope this article will help you, if you liked this please spread our Blog.
