Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)

Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)

✪ 2 comments

     Fazer a barra de navegação no blogger é uma forma interessante de mostrar onde o visitante está no seu site. Estamos falando daquele tipo de menu mostrando inicio > nome do marcador > titulo da postagem. Isso pode ajudar a diminuir a sua taxa de rejeição fazendo os visitantes permanecerem mais tempo na sua pagina já que mostra links dos marcadores no menu de navegação que alguns sites chamam de Gadget Breadcrumb.

     Mas para colocar essa ferramenta de navegação no seu blog primeiro sugerimos que faça um backup do seu template já que vamos mexer no código HTML. Agora entre na pagina modelo > editar HTML, marque a opção expandir modelos de widgets.

Procure esse código HTML no seu blogger:
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>

Apague o código, coloque esse outro no lugar e salve as alterações:<div id='breadcrumbs'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Você está em: <a expr:href='data:blog.homepageUrl' rel='tag'> Início</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'>» <a expr:href='data:label.url' rel='tag'> <data:label.name/></a> <b:if cond='data:label.isLast != "true"'/> </b:loop> » <span class='post-title entry-title'> <data:post.title/> </span> </b:if> </b:loop> </div> </b:if> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <div class='breadcrumbs'> Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/> </div> </b:if> <b:else/> <b:if cond='data:navMessage'> <div class='breadcrumbs'> Você está em: <a expr:href='data:blog.homepageUrl'> Início</a> » Posts da Categoria: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a> </div> </b:if> </b:if> </div>

E já está pronto agora seu blogspot tem um menu de navegação interna do site, mas ainda podemos melhorar e personalizar esse menu usando alguns códigos de formatação de texto.
Então continuamos na pagina editar HTML, mas desta vez vamos procurar por ]]></b:skin> e colocar antes dele:
.breadcrumbs {background-color: #FFC;border: 1px dashed #000;margin: 5px;padding: 3px;}