Breadcrumb Menu For Blogger

One of the requirements expected by the google SEO is easy for users to explore a site. Google strongly recommends using breadcumb menu on a site. To that end and in accordance with what we have explained on before blogging, so this time we release a way to make breadcumb on blogger. To be more easily understood, we also include the logic of his thinking, so you understand why breadcumb code is like that. Thus you have a good understanding code bloggers. Interesting is not it?

Ok, go directly to the destination. Please click the Design tab, click Edit HTML. Now, let's discuss for a moment. Because breadcrumb menu not owned by bloggers, then we must make it. The trick is to add the following code

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

Then you can put it above the following code

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

You can also put the breadcrumb below status message, the difference is in the breadcrumb menu display. Consider the following picture message status

if you put breadcumb above the status message then breadcumb menu will appear above the image status message. And vice versa.

Then, the target to be achieved from the breadcrumb menu is access based on the topics shown. Logically, we want to tell users that the users are on the homepage. And we set the notice without a link. When a user opens one of the labels, then breadcrumb menu is activated accompanied by a link to the Home and notification to the user that you're one of the labels.

Home >> List Of Posts On Your Lable

Then, when your users select one of the post title, then breadcrumb menu is activated accompanied by a link to the Home and Lable.

Home >> Your Lable >> Your post

However, it is still incomplete. Sometimes there are blogs that do not include labels, so we can notify the user as follows

Home >> No label >> Your post

Ones again, your users may find your posting of the oldest. Tell your users with

Home>> All Older Posts

Ok, right in practice. Find the following code

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

This code is the code to put the widget. Because we have to put it on the widget post, then put the following code above the code <b:includable id='main' var='top'>.

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> You At Home Now <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/> »No Label </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 Older Posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> » List Of Posts On <data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable>

The next step is to decorate the breadcrumbs menu. Put the following css code before ]]></ b: skin>. For those of you who want to learn more about css, continue to follow tutorials css from us. We give gradually.

.breadcrumbs { padding:6px 6px 6px 2px; margin: 0px 0px 13px 0px; font-size:98%; line-height: normal; border-bottom:3px solid #e6e4e3; }

Now, We already finished making breadcrumb from bloggers. We hope you are not only put the code but know what the code means. Have a nice day.