Links informativo de marcadores abaixo do título das postagens no blog

Fala ai galera , hoje vou ensinar a vocês como colocar o link de navegação acima dos títulos das postagens. Semelhante ao que usamos aqui no blog. Esse link deixa seus leitores mais informados sobre as categorias de cada postagem , e onde eles estão navegando no momento.

Screenshot

Vamos ao tutorial, que é muito fácil de ser seguido;

1. Vá até o Menu do Blogger
2. Depois em Modelo
3. Em seguida clique em "Editar Html"
4. Click dentro do html e dê ctrl+F para  pesquisar

Procure pelo trecho:

<b:include data='top' name='status-message'/>




Logo acima dele cole o código abaixo:

<b:include data='posts' name='breadcrumb'/>





Agora, encontrar o código abaixo (se você encontrar dois trechos iguais ,utilize o segundo trecho):

<b:includable id='main' var='top'>





Logo acima dele cole o código abaixo:

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span> </div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>





Agora procure por:

]]></b:skin>




Adicione o código CSS logo acima:

.breadcrumbs { background: #F7F7F7; float: left; border: 1px solid #E6E6E6; width: 575px; font-size: 11px; margin: 10px 10px 10px 10px; padding: 5px 10px 5px 10px; }



Agora salve o modelo, e visualize.

No código CSS em "width" você altera a largura do Link.