Creating Breadcrumb Navigation in Blogger



Not already a week I was not updating this blog. This is because I was busy rearranging the content on this blog and add some tools to it. One is thebreadcrumb navigation . Breadcrumb is a WordPress plugin that works belong to facilitate readers to browse the blog page. So, like a map or sitemap in the blog.plugin is usually placed on the posting. An example looks like this: In addition to facilitate the reader in knowing the location of the page being traced, this plugin can also optimize your blog page in search engines ( SEO ). Even recommended directly by Google know. Do not believe? Here is a quote that I took from the ebook ' Google Search Engine Optimization Starter Guide '. Want to know more SEO techniques in the ebook Google Search Engine Optimization Starter Guide? Please read here .Ok I think enough explanation, for users wordpress plugin Breadcrumb you can download here . As for the blogger users follow the steps below to install the breadcrumb navigation: 1. Open Blogger. Go to the menu Design -> Edit HTML 2.You can check the 'Expand Widget Templates'. 3. After that, find the code <b:if cond='data:post.title'> 4. Put the code below under <b:if cond='data:post.title'>




breadcrumb navigation















<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'> Home </ a > »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr: href = 'data: label.url "rel =" tag "> <data:label.name/> </ a>
<b:if cond='data:label.isLast != "true"'>, </ b: if>
</ b: loop >
» </
b: if>
<data:post.title/>
</ div>
</ b: if>

5. Then look up 
the code ]]> </ b: skin>

6. Put the code below css thereon

. Breadcrumb {
padding: 5px 5px 5px 0px;
margin: 10px 0px 0px 0px;
font-size: 90%;
line-height: 1.2em;
border-bottom: 3px double # e6e4e3;
}
7. If you've saved your template and see what happens. Hopefully useful :)

0 comments:

Post a Comment