Thursday, June 9, 2016

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.

broadcrumb navigation proknowliz

If you see this site on the top of each title of every article you can observe that

Breadcrumb Navigation for Blogger

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

<b:include data='top' name='status-message'/>

Or if you want to put at the top of each title find,

<div class='blog-posts hfeed'>

and paste following code below it,

<b:include data='posts' name='breadcrumb'/>

Step 3: Now find

<b:includable id='main' var='top'>

And paste 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 --> <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

]]></b:skin>

Paste the following code above it,

.breadcrumbs { font-size: 10px; color: gray; background-image: url(http://1.bp.blogspot.com/-Q7czCaiBfq8/Tc_rMb2SB2I/AAAAAAAAAH0/ISoSjHMvaRk/s1600/breadcrumb%2Bproknowliz.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.

Load disqus comments

0 comments