How to add breadcrumbs to Google Blogger blog template
Got to edit HTML mode of your Blogger blog and follow the instructions below for the edits to add the breadcrumbs into your Blogger blog template.
1. CTRL+F to find this code:
<b:include data='top' name='status-message'/>
2. Add the following code below or after it.
<b:include data='posts' name='breadcrumb'/>
3. CTRL+F to find this code:
<b:includable id='main' var='top'>
4. Replace the above piece of code with the code below
<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 -->
<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"'> »
<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'>
<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'>
<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> » 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'>
5. CTRL+F to find this code:
]]></b:skin>
6. Add the following code before or above it.
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
7. Save the template.
Step 5 is confusing
ReplyDeleteHi, step 5 means to use the text search feature of your web browser to look for the text stated. Ctrl+F is the combination of ctrl and F buttons on your keyboard to use the text search.
DeleteNice article! To add Breadcrumbs to your Blogger blog is so easy using my tutorial.
Deletehttp://www.blazerwap.com/2017/01/new-way-to-add-beautiful-and-stylish.html
Thank you.
Delete