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 == "false"'>
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 == "item"'>
<div class='breadcrumbs'>
Menu » <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 == "true"'> »
<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>
» <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 == "archive"'>
<div class='breadcrumbs'>
Menu » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Menu » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Menu » <a expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/-XTKKS-6yW2I/UIS5rjkzZLI/AAAAAAAADQQ/8hS8aEHqER4/s1600/home.gif'/> Início</a> » 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.
.jpg)
