LINKS ABAIXO DO TÍTULO DO POST (Autor, Categoria e Comentários)

10 outubro 2016

Links abaixo do título do post

O manual preparou pra você 4 modelos de links abaixo do título do post para você sair daqui personalizando o seu cantinho.

Que os links são extremamente importantes para indexação de um blog, isso todo mundo já sabe. Mas há quem se esquece de adiciona-los, ou não fazem ideia da importância que eles tem.

Mas qual a importância de ter os links adicionados ao blog?

Autor: Seu aliado no requisito "alto divulgação", além de mostrar ao leitor quem está por trás daquele maravilhoso conteúdo.

Categorias: Pode te ajudar na divulgação dos seus posts. Por exemplo, caso o leitor goste de uma determinada categoria, com certeza ele irá clicar nela para ver os outros posts relacionados aquele assunto.

Comentários: Estimula o leitor a comentar! Mostrando a quantidade de comentários, você aguça a curiosidade, pois hoje em dia a maioria dos usuários gostam de ler comentários.

Esses links também são rastreados pelo Sr. Google, que sempre está de olhos abertos á procura de blogs e sites que trabalham o SEO.  Tudo é armazenado!


O Manual da Blogueira preparou 4 modelos pra você sair daqui já personalizando os seus links. Vamos ao tutorial!

1° Passo:  No painel administrativo do blogger procure por Layout - Postagens no blog. Marque as opções abaixo, e escreva o nome dos links autor (Com amor) e marcador  (Categorias) como a imagem está ilustrando.




2° Passo: Ainda no painel administrativo do bloggger, e procure por: Modelo - Editar HTML e dentro da caixa de códigos procure por < div class= 'post-header' > 

APAGUE o que tiver entre < div class= 'post-header' > e < div class= 'post-header-line- 1' />

Abaixo de < div class= 'post-header' > cole o seguinte código. Antes visualize, se estiver tudo ok, salve! 

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span> |
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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 != &quot;true&quot;'> </b:if>
</b:loop>
</b:if>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>




A imagem abaixo ilustra como o código tem que ficar. A parte destacada em circulo representa o separador das categorias, que pode ser feito com uma vírgula ou um traço. Basta adicionar o elemento desejado entre as chaves ( > < ).


Links abaixo do título do post


3° Passo: Abaixo de <head> cole o seguinte código que fará com que a fonte de estilo funcione.     

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'/>


4° Passo:  Agora escolha o modelo desejado para personalizar os links. Em seguida procure por .post-header depois apague o que encontrar, e no lugar adicione o código do modelo escolhido.

Links abaixo do título do post

Modelo 1

.post-header { font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #424242; font-weight: normal; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD; padding-top: 5px; padding-bottom: 5px; } .post-header a{ font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #FF64B0; font-weight: normal; } .post-header a:hover{ color: #B4DCE9; text-decoration: none; }

Modelo 2

.post-header { font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #424242; font-weight: normal; border-top: 1px dashed #BDBDBD; border-bottom: 1px dashed #BDBDBD; padding-top: 5px; padding-bottom: 5px; } .post-header a{ font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #f2f2f2; font-weight: normal; background: #F5A9A9; border-radius: 3px; padding: 0px 3px 0px 3px; } .post-header a:hover{ color: #585858; text-decoration: none; } .post-author a{ background: transparent; color: #424242; } .post-comment-link a{ background: transparent; color: #424242; } 

Modelo 3


.post-header { font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #000000; font-weight: normal; border-bottom: 3px dotted #BDBDBD; padding-top: 5px; padding-bottom: 5px; } .post-header a{ font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #424242; font-weight: normal; border-radius: 3px; padding: 0px 3px 0px 3px; } .post-header a:hover{ color: #585858; text-decoration: none; } .post-author a{ background: transparent; color: #424242; } .post-comment-link a{ background: #000000; color: #FFFFFF; padding: 2px 4px 2px 4px; } 

Modelo 4

.post-header { font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #AA6ECD; font-weight: normal; padding-top: 5px; padding-bottom: 5px; } .post-header a{ font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: center; color: #ffffff; font-weight: normal; background: #FF8BC1; padding: 0px 3px 0px 3px; } .post-header a:hover{ color: #585858; text-decoration: none; } .post-author a{ background: transparent; color: #FF68AF; } .post-comment-link a{ background: transparent; color: #AA6ECD; }


E se você gostou do tutorial, já sabe o que fazer! Compartilhe com os amigos, curta nossa página no facebook para nunca perder nossas atualizações e siga o Manual em "Faça parte" que fica na lateral do blog. Um grande beijo e até a próxima!

8 comentários:

  1. Adorei a dica, mas não consegui encontrar o código no html....

    ♥ Beijos! E um ótimo feriado!♥

    https://aprimeiracasaninguemesquece.blogspot.com.br/

    ResponderExcluir
  2. Adorei a dica! Já tentei fazer outros tutoriais e nenhum deles funcionou, irei testar esse depois te conto o resultado!
    Beijos ^3^

    ResponderExcluir
    Respostas
    1. Espero que dê tudo certo! Quero ver o resultado =)
      Bjs :*

      Excluir
  3. não consigo achar o codigo < div class= 'post-header-line- 1' />
    :/

    ResponderExcluir
    Respostas
    1. Bom Cibele, todo layout contém esse trecho... Procura com mais atenção, pois eu te garanto que vai encontrar. Boa sorte! Bjão :*

      Excluir