Breadcrumb com css

O que todos os blogueiros querem, em qualquer  nicho que estejam é ter leitores e que os leitores permaneçam em seu blog o maior tempo possível. É interessante que você tenha a maior interatividade em seu blog para que ao ler um post, a curiosidade de seu leitor para outros posts seja aguçada assim seu leitor de um post passe a outro, e depois a outro, assim sucessivamente tornando seu blog mais acessado e aberto por mais tempo.
O breadcrumb é um bom recurso para isso pois traz em evidência os marcadores das postagens em sintonia com o post que seu leitor estiver, portanto, ajuda na navegação de seu blog. Siga o passo a passo e instale o menu de navegação em seu blog.




Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Procure por

  <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

Acima dele, cole o próximo código:

<!--Start Breadcrumbs code, get at http://htmlmaker.blogspot.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
<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 != &quot;true&quot;'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><span itemprop='title'><data:label.name/></span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
</b:if>
</b:loop>
<b:else/>
Untagged
</b:if>
</b:loop>
<span class='crust'>
<a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a>
<span class='arrow'><span/></span>
</span>
</span>
</div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Archives for <data:blog.pageName/></span></a>
<span class='arrow'><span/></span></span>
</span></div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
        <a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Posts tagged <data:blog.pageName/></span></a><span class='arrow'><span/></span></span>
</span>
       </div>
     </b:if>
</b:if>
</b:if>
</b:if>
<!--End Breadcrumbs code, get at http://htmlmaker.blogspot.com-->

Salve. Agora vamos implementar o estilo.

Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/* Start CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/
.breadcrumb {
background: #F7F7F7;
border: 1px solid #E6E6E6;
box-shadow: 0 2px 3px #B5B5B5;
border-bottom:none;
width: 720px;
margin: 5px;
font-size: 9px;
text-transform:uppercase;
overflow: hidden;
}
.breadcrumb a, .breadcrumb a:visited {
    color: #848484;
    font-family: Oswald;
}
.breadcrumb .boardTitle {
    display: none;
}
.breadcrumb .crust {
    display: block;
    float: left;
    position: relative;
}
.breadcrumb .crust a.crumb {
    background-color: #EDEDED;
    display: block;
    height: 24px;
    line-height: 24px;
    margin-bottom: -1px;
    outline: 0 none;
    padding: 0 10px 0 18px;
    text-decoration: none;
}
.breadcrumb .crust:first-child a.crumb {
    padding-left: 10px;
}
.breadcrumb .crust:last-child a.crumb {
    background-color: #D9D7D7;
    font-weight: bold;
}
.breadcrumb .crust:last-child .arrow span {
    border-left-color: #D9D7D7 !important;
}
.breadcrumb .crust .arrow {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent black transparent #BBBBBB;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 12px 1px 12px 12px;
    display: block;
    height: 0;
    position: absolute;
    right: -12px;
    top: 0;
    width: 0;
    z-index: 5;
}
.breadcrumb .crust .arrow span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent black transparent #EDEDED;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 12px 1px 12px 12px;
    display: block;
    height: 0;
    left: -13px;
    overflow: hidden;
    position: absolute;
    text-indent: 9999px;
    top: -12px;
    white-space: nowrap;
    width: 0;
    z-index: 6;
}
.breadcrumb .crust:hover a.crumb {
    background-color: #D9D7D7;
    color: #3C3C3C;
}
.breadcrumb .crust:hover .arrow span {
    border-left-color: #D9D7D7;
} /* End CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Via