Many bloggers ask me via email – How to add breadcrumbs in blogger blog post. By using breadcrumbs you can makes your blog’s user friendly and more professional.
It shows the location of your posts to user and help them to find all related labels in your blog in just one click.
Breadcrumbs also helps to increase your keyword ranking in search page, when you add keyword in post title.This tutorial teach you how to correctly add breadcrumbs in your blogspot blog by using HTML script.
Step to Add Breadcrumbs Navigation in Blogger
Always take backup of your template before editing it. Follow below given steps to add breadcrumb navigation in blogger blog.
1.Go to template and click anywhere in box and press ctrl+f.After opening find box put this code and find it.
2. Just above above that paste this line of code
<b:include data=’posts’ name=’breadcrumb’/>
3. Again Search for this pice of code
<b:includable id=’main’ var=’top’>
if you find two then stop on second.
4. Above it paste below given code.
<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<b:if cond=’data:blog.pageType == “static_page”‘>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond=’data:blog.pageType == “item”‘>
<!– breadcrumb for the post page –>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<div class=’breadcrumbs’ xmlns:v=”http://rdf.data-vocabulary.org/#”>
<span typeof=”v:Breadcrumb”><a expr:href=’data:blog.homepageUrl’ rel=”v:url” property=”v:title”>Home</a></span>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast == “true”‘>
» <span typeof=”v:Breadcrumb”><a expr:href=’data:label.url’ rel=”v:url” property=”v:title”><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond=’data:blog.pageType == “archive”‘>
<!– breadcrumb for the label archive page and search pages.. –>
<div class=’breadcrumbs’>
<span><a expr:href=’data:blog.homepageUrl’>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == “index”‘>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == “”‘>
<span><a expr:href=’data:blog.homepageUrl’>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href=’data:blog.homepageUrl’>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
save template and your work has done. You can check any post of your blog. Breadcrumb navigation will be showing there.
if you want to make smaller then add this css code on just above of this code – ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
By following above given steps ,you can successfully add breadcrumb navigation in your blogger blog posts.
How To Add “About Us” Widget And Page In Blogger?
How To Add Search Engine Friendly Title to Blogger
15 Best Free Online Backlink Checker Tools
सर्च इंजन ऑप्टिमाइजेशन (seo) क्या है और on page seo कैसे करते है?
Blog Traffic Kaise Badhaye – My Tips in Hindi.
एफिलिएट मार्केटिंग क्या है? 2023 में एफिलिएट मार्केटिंग कैसे शुरू करें
ब्लॉग में लेबल के अनुसार हाल ही में प्रकाशित पोस्ट कैसे दिखाए। ब्लॉगर विजेट