Breadcrumb no novo Blogger

DEMO

Este hack é excelente para seu leitor ter acesso aos outros posts de seu blog. Refiz todo o código, para quem usa o template Simple, portanto, se não o usa, nem comece a implementar os códigos pois não dará certo. Vinculei o estilo ao menu de páginas, portanto, os dois terão o mesmo estilo.



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

 Hack atualizado para modelos implementados em 2013

Agora vamos clicar em "Ir para um widget" e depois clicar em Blog1

 Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte clicando na pequena seta, como mostra a imagem abaixo:



<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>...</b:widget>

Procure então por:

 <b:if cond='data:mobile == &quot;false&quot;'>

Observe que um pouco abaixo, haverá um código como esse abaixo.




    <!-- posts -->
    <div class='blog-posts hfeed'>



Troque-o por:

    <!-- posts -->
    <div class='blog-posts hfeed'>

 <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

     

Agora procure por:



    <data:top.dummyBootstrap/>
  

Observe que abaixo dele há o seguinte trecho:

 </b:if>

</b:includable>

 O que você deverá fazer é apagar este trecho todo e depois colar o código abaixo:

<data:top.dummyBootstrap/>
  </b:if>

</b:includable>
 <b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- No breadcrumb on front page -->
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div class='breadcrumbs'>
         Menu &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OD7JpQPPi7c0kTetIzf7eJGnfPKOgmUm2d6KJMHRPrm15W5DODJ9A3ECAw-rP3ynHY6jc2jijdS7AmWq0mGKyLykDcaXA8OT7wGM5GaMWwyoU5YbzCzeN8JtfnS8G7Y6Xl4LUR_oDzF/s1600/home.gif'/> Início </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 == &quot;true&quot;'> &#187;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qfs3Xmwre4g6R3hhUF0xiaiqqizzRNLsDTw4AMYhp8CFvbpaKr1n3wwpioqis7bk7RlffpFqeTD_JhRYqPlxAdRCgsH3LL2hmJg0KbjBxo9ySmMO6sspGld5eLxycW9YA3NZPNO-KJEL/s1600/tag.gif'/>
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
               </b:if>
             </b:loop>
             &#187;    <span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYTNA5vEzmBIZodS6eeJyDnOpmhUIfwT8aLe6s9Ukt3gEZU5eWTiRzYtRW0fe88FrigyXaxTx1HoFpKOD_SU-EdDBzXYHPFf5bVCR7Mqx3l-rFFYBM_jLUMgrwqryEgdqxvHFyZ9YaHjv/s1600/arrow_fat_down.gif'/>  <data:post.title/></span>
           </b:if>
         </b:loop>
       </div>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumbs'>
         Menu &#187;   <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
        </div>
      <b:else/>

        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Menu &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Menu &#187; <a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OD7JpQPPi7c0kTetIzf7eJGnfPKOgmUm2d6KJMHRPrm15W5DODJ9A3ECAw-rP3ynHY6jc2jijdS7AmWq0mGKyLykDcaXA8OT7wGM5GaMWwyoU5YbzCzeN8JtfnS8G7Y6Xl4LUR_oDzF/s1600/home.gif'/> Início</a> &#187; Posts com marcador: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qfs3Xmwre4g6R3hhUF0xiaiqqizzRNLsDTw4AMYhp8CFvbpaKr1n3wwpioqis7bk7RlffpFqeTD_JhRYqPlxAdRCgsH3LL2hmJg0KbjBxo9ySmMO6sspGld5eLxycW9YA3NZPNO-KJEL/s1600/tag.gif'/> <data:blog.pageName/>
          </b:if>
          </div>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Salve. Agora vamos das  estilo ao menu breadcrumb






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.

/*Breadcrumbs-------------------------------*/

.breadcrumbs {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  border: $(header.bottom.border.size) solid $(tabs.border.color);
 font-size: 14px;
 padding:5px;
 font-weight: bold;
 line-height: 1.4em;
 margin: 2px 1px;
}


.breadcrumbs select a, .breadcrumbs  a:hover {
 color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  font-weight: bold;
  color:$(body.text.color);
  padding:5px;
}

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