In Tutoriais

Marcadores e Comentários Abaixo do Título dos Posts Personalizados

Oie ^-^ Há muito tempo, quando o site Drikoti ainda estava no ar,  via que em suas postagens o título e o conteúdo abaixo dele eram personalizados de forma super cute! Já tentei fazer isso aqui, mas só agora que aprendi, como vocês podem ver :3
Não é difícil, exige apenas um pouco de atenção. Então nós vamos fazer o seguinte neste post:
  • Adicionar elementos abaixo do título da postagem, como marcadores, número de comentários e nome do autor;
  • Aplicar estilos com CSS para dar aparência que quiser a cada elemento adicionado abaixo do título do post.
1. Nós vamos entrar em Modelo - Editar HTML. Deixe marcada a opção "Expandir Modelos de Widgets".
2. Vamos procurar por códigos referentes ao que desejamos mover para debaixo do título. Uma dica importante: ao localizar cada código, recorte-o e cole em um bloco de notas. É importante também lembrar de NÃO deixar no template (por enquanto) o código que deseja mover. Geralmente eles estão abaixo de post-footer-line-1.
  • Nome do Autor:
Eu particularmente como leitora prefiro que o nome do autor venha no final da postagem, porque assim, quando você faz um bom post, as pessoas vão ver seu nome bem nítido "assinado", quando terminarem a leitura, fica mais fácil de lembrar, de associar "tal conteúdo é do fulano"...e no rodapé da postagem geralmente ficam dados importantes, como as formas de compartilhamento e até quem sabe uma mini biografia sua. Mas se quiser que seu nome apareça em outro local, encontre este código, recorte e cole em um bloco de notas:
 <span class='post-author vcard'>
    <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <span class='fn'><data:post.author/></span>
    </b:if>
    </span> 

  • Marcadores ou Labels:
Encontre, recorte e cole em um bloco de notas:
 <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> 

  • Número de Comentários:
Encontre, recorte e cole em um bloco de notas:
 <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> 

3. Pronto. Já temos os códigos. Agora você deve colar todos eles bem abaixo de
<div class='post-header-line-1'/>.
4. Visualize seu modelo para ver se está tudo normal. Verifique se os elementos que você adicionou aparecem abaixo do título da postagem, e se eles não aparecem mais no rodapé; caso isso aconteça, procure por códigos repetidos iguais aos que vimos acima, apague-os e visualize. Lembrando que cada modelo é de um jeito ok.
5. Se tudo estiver bem, salve. Agora vamos procurar por ]]></b:skin>. Acima dele é que vamos colar os próximos códigos referentes ao CSS, ou seja, vamos dar aparência para:
  • títulos dos posts;
  • nome do autor;
  • marcadores;
  • número de comentários.
Vou deixar estilos para vocês editarem como quiser. Para códigos de cores, consultem esta tabela.
  • Título da Postagem:
 .post h3 {
  margin:0;
  padding-left:10px;
  font-size:0px/** Defina o tamanho da fonte **/;
font-family: 'Lobster'/** Defina o tipo da fonte **/;
  color:#000/** cor do titulo **/;
   background: #000/** cor do background **/;
width: 100%;
height: 100%;
}
/** cor do link do titulo **/
.post h3 a, .post h3 a:visited, .post h3 {
  text-decoration:none;
  color:#000;
}
/** cor do link hover  **/
.post h3, .post h3 a:hover {
  color:#000;
} 

  • Nome do Autor:
 .post-author {
background: #000;/** cor de fundo **/
 font-size:0px;/** tamanho da fonte **/
font-family: 'Lobster'; /** tipo da fonte **/
 color:#000;/** cor do texto **/
 border-bottom:1px solid #fff;/** borda de baixo **/
border-top:1px solid #fff;/** borda de cima **/
width: 0px;/** largura **/
} 

  • Marcadores:
 .post-labels {
 background: #000; /** cor de fundo **/
 padding-left: 20px;
 float:left;
 font-size:0px;/** tamanho da fonte **/
font-family: 'Lobster';/** tipo da fonte **/
 color:#000;
border-bottom:1px solid #fff;/** borda de baixo **/
border-top:1px solid #fff;/** borda de cima **/
width: 0px;/** largura **/
} 

  • Número de Comentários:
 .comment-link {
 background: #000;/** cor de fundo **/
 font-size: 0px;/** tamanho da fonte **/
width: 0px;/** largura **/
}
/** geral e texto **/
.comment-link {
margin-top: 0px;
  float: left;
  font-size:0px;/** tamanho da fonte **/
font-family: 'Lobster';/** tipo da fonte **/
 color:#000; /** cor do texto **/
border-bottom:1px solid #fff;/** borda de baixo **/
border-top:1px solid #fff;/** borda de cima **/
}
/** link ativo **/
.comment-link a:active {
color:#000; /** cor do texto **/
text-decoration:none;
}
/** link hover **/
.comment-link a:hover {
color:#000; /** cor do texto **/
text-decoration:underline;
} 

Personalize como quiser, adicione cores, fontes e tudo o que sua criatividade permitir, visualize e quando tudo estiver ok, salve.
Viu só? Até que não é difícil não é mesmo? Como eu disse, só ter atenção e calma ^-^
Beijinhus e espero que gostem!!
*Aprendi isso analisando um dos templates da Lecca.Imagem de abertura do post encontrada no Weheartit.com*

Related Articles

13 comentários:

  1. Que legal o seu! Eu fiz também, mas sem muitos enfeites, só o básico...
    Beijo, feliz 2013!
    www.vitima-fashion.blogspot.com/

    ResponderExcluir
    Respostas
    1. Feliz 2013 para você também ^^
      Beijinhus e obrigada!!!

      Excluir
  2. Adorei a dica Rô, muito útil esses códigos.
    Tentei colocar posts relacionados no meu blog, so que ao inves de aparecer 5 imagens (que foi o que eu selecionei no site) aparecem so 3 :/
    Ja passou por isso?

    E ah, amei o novo templante é muito lindo...
    Ótimo 2013 pra você, beijos!!

    ResponderExcluir
  3. Rô será que no proximo tutorial você poderia ensinar como fazer um cabeçalho da largura do blog?

    Sempre entro em sites e blogs e vejo que a imagem do cabeçalho ocupa a tela toda do meu computador e a minha sobra dos lados a parte cinza:/

    Beijos!

    ResponderExcluir
    Respostas
    1. Você usa o LinkWithin neh; eu tô usando um código que você instala no template mesmo, que aprendi lá no Ferramentas Blog. Vou postar como faz e nele vem os lugares para adicionar o número e personalizar tudinho, aí fica mais fácil ^^
      Quanto ao cabeçalho, postei em um tutorial sobre como usar 1,2,3 ou 4 backgrounds no blog, e com ele dá para fazer isso. É só usar 2 backgrounds: 1 para o blog e outro de largura maior ou do tamanho da tela, que seria o cabeçalho. Aí você exclui a imagem que usaria no gadget de cabeçalho em Layout.
      Dá uma olhada no tuto, super legal e fácil :3
      Beijus...

      Excluir
    2. Obrigado pela ajuda..
      Vou dar uma olhada no tutorial que você falou..
      Mas na sua opinião, você acha que o meu blog tá de bom tamanho a imagem do cabeçalho, ou se aumentar fica melhor?

      É que a resolução do meu computador é diferente, aí o blog aqui em casa sempre aparece diferente dos outros computadores..


      Beijos s2

      Excluir
    3. Eu acho que está lindo! Super fofo e com uma resolução ótima ^^
      Bjus...

      Excluir
  4. Amo este tuto ele é ótimo
    Amor é Kawaii

    ResponderExcluir
    Respostas
    1. É neh ^^ E sobra mais espaço para adicionar coisas no rodapé da postagem :3
      Beijus e obrigada!!!

      Excluir
  5. Oi amore tudo bem? Não estou querendo fazer propaganda do meu blog nem nada, mas só queria te mostrar que eu coloquei um gadget dos meus blogs preferidos no meu blog e você é um deles.
    Beijos, amoo seu blog fofa!!
    strassbook.blogspot.com

    ResponderExcluir
  6. Eu tentei de tudo, so que eles não aparecem em cima Ç-Ç
    Porq???? T3T Eu apaguei codigos repetidos, refiz umas 3 vezes, mas não importa o que eu faça eles não aparecem em cima Ç-Ç

    madness shoujo

    ResponderExcluir
    Respostas
    1. Aqui tá dando certo... Tente encontrar a área do post-header em seu modelo em que apareça certinho, talvez seja isso...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart