Breadcrumb Navigation for Blogger
Single method you can enhance navigation of a blogger blog is to include breadcrumb navigation to your Blogger blog. There is additionally a SEO advantage of putting a breadcrumb as main search engines like Google deal with anchor text links as significant.
All of us might have viewed breadcrumbs on the majority wordpress blog. So why not bring about a breadcrumb for the blogger blogs..
Search engine outlook a breadcrumb with a text link to significant keywords in the post as prominent.
If you see this site on the top of each title of every article you can observe that
In order to add this feature to bloggers blog just follow steps as:
Step 1: Go to: DESIGN >> EDIT HTML >> check “EXPAND WIDGET TEMPLATES”.
Step 2: Now find
Or if you want to put at the top of each title find,
and paste following code below it,
Step 3: Now find
And paste following code above it
<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>
Step 4: Now find
Paste the following code above it,
font-size: 10px;
color: gray;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Kf_qqnVfs-xayR2PfNdpQ-tY_V8zWKJBRJouINeWcwt1H4fxtGksJBQ1QbLEilfKZXHmjTSdxZWUXeYI8M9L7-W15oEq4Yn4pWLbmB2IDnZKmru3h45aHi7x5q5AKSe5X_DPx12IlD8/s1600/breadcrumb+proknowliz.png);
background-repeat: no-repeat;
padding-left: 25px;
background-position: left center;
padding-top: 10px;
}
Step 5: Save Template.
At this moment in time, you should have a functioning breadcrumb pilotage on your set up.
Vinayak SP
Vinayak is a web geek, digital columnist, and solo entrepreneur working on ProBlogBooster. You can follow PBB on social media or subscribe to our email newsletter and never miss an update. twitter instagram amazon linkedin external-link
