15 de outubro de 2012

Tutorial - Post footer abaixo do titulo do post. (Pedido)

    Tumblr_mag8wkxxpg1rg4qbpo1_500_large

Oooooi pessoinhaas <3 Eu fui ver, os comentários antigos. E tem alguns pedidos. Pediram pra mim postar um tutorial do Comentários, Tags e autor, abaixo do titulo do post. O pedido foi da Nicolle Ferreira Sanchez. Vamos aprender!
Bom, eu normalmente não sabia como fazer. Fui olhando em vários blogs, e não conseguia. E eu fiz de outro jeito, um jeito que parece ser mais fácil. Mais não sei se vocês vão entender.
Nos outros blogs, falavam pra recortar tal, colar em tal, mais eu não faço isso.
Chega de conversa, vamos ver como se faz! :3

Vão em modelo, editar html, " Expandir modelos de widgets " e faça o seguinte que quiser.
Esse primeiro é onde nós vamos por as | entre eles.

Código do autor:

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

Código dos comentários:

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

Código dos marcadores:

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

Ayla ~ E agora? o que tem que fazer?

Agora, vem a parte mais fácil, shaushau ' Você já tem os três códigos. Pesquise apenas pela primeira frase, onde está em vermelho. Achou? então você vai colocar o | no meio, ou no final de cada </span>.
Não entendeu? então vai tentando depois de todos os </span> que sua frase possuir. 

Ayla ~ Como personalizamos?

Bom, é simples. Que a gente põe a borda em volta. Vamos aprender!

Procurem por .post-header {

Achou? então, antes de fechar o } cole o seguinte código:

text-align:center; /*Centraliza o texto*/
border-top: dotted 1px #ddd;
border-bottom: dotted 1px #ddd;

Pronto, agora, é só isso. Para mudar a borda, só substituir onde está dotted 1px
Tipos de bordas: Aqui
Tabela de cores: Aqui


Um comentário:

  1. Gata obrigada pelo tutorial, me ajudou mesmo!
    Eu tbm tentei aquele negocio de recortar e ferrei meu lay, mas vc me salvou! Valeu mesmoo


    novidadesdatekinha.blogspot.com

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)