How to Install Breadcrumbs SEO Friendly in Blogger

How to Install a breadcrumb SEO Friendly - Breadcrumbs are a navigation menu that is usually located above the title of posting a blog or website.It contained a link to the home or main page, followed by the label and then the title of the post is opened.Breadcrumbs is quite important as a contributing factor in the blog SEO, because the breadcrumbs we can inform visitors about the category of the article is in the blog.

Breadcrumbs which I will share it has the advantages of SEO Friendly, though I myself am not very good in terms of SEO.

However, these breadcrumbs already I see for yourself that this is already SEO Friendly breadcrumbs, all labels indexed by Search Engines and certainly Valid HTML5.

How To Install  Breadcrumbs SEO Friendly on Blog

1) Go to Blogger Template and click  Edit HTML  > Then add the CSS code below before]]> </ b: skin> or </ style>

CSS

/ * Breadcrumbs * /.breadcrumbs {padding: 20px 30px; background: # fff;margin-bottom: 20px}.breadcrumbs a, .post-info a {color: # 19abea;}.breadcrumbs a: hover, .post-info a: hover {color: # 454 545;}

 2)  The next step, find HTML code like this post

HTML

<B: includable id = 'main' var = 'top'> ... </ b: includable>

3) Then add the breadcrumbs right HTML code under the code above 

HTML

<B: includable id = 'breadcrumb' var = 'posts'><B: if cond = 'data: blog.homepageUrl! = Data: blog.url'><B: if cond = 'data: blog.pageType == & quot; static_page & quot;'><Div class = 'breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='tag' title='Home'> Home </a> </ span> / <span> <data : blog.pageName /> </ span> </ div><B: else /><B: if cond = 'data: blog.pageType == & quot; item & quot;'><! - Breadcrumb For Pos page -><B: loop values ​​= 'data: posts' var = 'post'><B: if cond = 'data: post.labels'><Div class = 'breadcrumbs'>You are here: <span itemscope = '' itemtype = 'http: //data-vocabulary.org/Breadcrumb'> <a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'> <span itemprop = 'title'> Home </ span> </a> </ span><B: loop values ​​= 'data: post.labels' var = 'label'>/ <Span itemscope = '' itemtype = 'http: //data-vocabulary.org/Breadcrumb'> <a expr: href = 'data: label.url + & quot;? Max-results = 5 & quot;' expr: title = 'data: label.name' itemprop = 'url'> <span itemprop = 'title'> <data: label.name /> </ span> </a> </ span></ B: loop>/ <Span> <data: post.title /> </ span></ Div><B: else /><Div class = 'breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='tag' title='Home'> Home </a> </ span> / <span> Without Labels </ span> / <span> <data: post.title /> </ span> </ div></ B: if></ B: loop><B: else /><B: if cond = 'data: blog.pageType == & quot; archive & quot;'><! - Breadcrumb To Label Search and Search Pages -><Div class = 'breadcrumbs'><Span> <a expr:href='data:blog.homepageUrl' title='Home'> Home </a> </ span> / <span> Archived For <data: blog.pageName /> </ span></ Div><B: else /><B: if cond = 'data: blog.pageType == & quot; index & quot;'><Div class = 'breadcrumbs'><B: if cond = 'data: blog.pageName == & quot; & quot;'><Span> <a expr:href='data:blog.homepageUrl' title='Home'> Home </a> </ span> / <span> All Post </ span><B: else /><Span> <a expr:href='data:blog.homepageUrl' title='Home'> Home </a> </ span> / <span> <data: blog.pageName /> </ span></ B: if></ Div></ B: if></ B: if></ B: if></ B: if></ B: if></ B: includable>

4)  Save the template. To determine the breadcrumbs are installed properly on the blog.