10 de jan de 2014

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.



Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube