Reino Kawaii

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
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!!