22 de out de 2012

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='http://4.bp.blogspot.com/-XTKKS-6yW2I/UIS5rjkzZLI/AAAAAAAADQQ/8hS8aEHqER4/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='http://4.bp.blogspot.com/-1SobmFLvoNA/UIS5sux4wAI/AAAAAAAADQY/pCXf3Y5Eq14/s1600/tag.gif'/>
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
               </b:if>
             </b:loop>
             &#187;    <span><img src='http://4.bp.blogspot.com/--anvHj0ZlKI/UIS6XC26etI/AAAAAAAADQg/N264iwUxKuE/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='http://4.bp.blogspot.com/-XTKKS-6yW2I/UIS5rjkzZLI/AAAAAAAADQQ/8hS8aEHqER4/s1600/home.gif'/> Início</a> &#187; Posts com marcador: <img src='http://4.bp.blogspot.com/-1SobmFLvoNA/UIS5sux4wAI/AAAAAAAADQY/pCXf3Y5Eq14/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.


Um comentário:

  1. Oi me desculpa se aqui não é o lugar adequado de perguntar! pois quero muito saber , gostaria de como faz esse gadgets na sidebar direta da pagina inicial do "T&A" que esconde os gadgets e quando dar um clique ele se abre . poderia fazer um tutorial ? ficarei agradecido :) ou gadget que tbm estou intereçado é aquele que tem uma caixa com 3 abas que cliqua nelas elas se abrem sem carregar a pagina pois é em javascript :*

    ResponderExcluir

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