10 outubro 2016
LINKS ABAIXO DO TÍTULO DO POST (Autor, Categoria e Comentários)
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!
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 != "true"'> </b:if>
</b:loop>
</b:if>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 ( > < ).
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.
<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.
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!
Adorei a dica do link Lorena!
ResponderExcluirBeijos
Fran
Achei e Rabisquei
Que bom que gostou Fran <3
ExcluirBjs :*
Adorei a dica, mas não consegui encontrar o código no html....
ResponderExcluir♥ Beijos! E um ótimo feriado!♥
https://aprimeiracasaninguemesquece.blogspot.com.br/
Qual é a sua dúvida? =)
ExcluirAdorei a dica! Já tentei fazer outros tutoriais e nenhum deles funcionou, irei testar esse depois te conto o resultado!
ResponderExcluirBeijos ^3^
Espero que dê tudo certo! Quero ver o resultado =)
ExcluirBjs :*
não consigo achar o codigo < div class= 'post-header-line- 1' />
ResponderExcluir:/
Bom Cibele, todo layout contém esse trecho... Procura com mais atenção, pois eu te garanto que vai encontrar. Boa sorte! Bjão :*
Excluirtambém não! :(
ExcluirNão achei o códifo < div class= 'post-header' > mesmo procurando com o CTRL+F
ResponderExcluirA única explicação que encontro pro tutorial não está funcionando com vcs meninas, é fato de que talvez o template que vcs estão personalizando já sofreu muitas personalizações, isso pode acontecer. Trabalhem com o template virgem, e depois me digam se deu certo! Mil bjs :*
ExcluirOii Lory, amo as dicas do seu blog! <3 Não desista pfvr!!!!! Me tira uma dúvida, é assim mesmo o link ficar em cima do titúlo das postagens??
ResponderExcluirOi Milena, pode ficar tranquila que não desistir do manual não. Em breve volto com novidades. Mas sobre a sua dúvida: Os links vão ficar ABAIXO do título da postagem =) vc conseguiu fazer?
Excluir