31 março 2012

Tutorial - Modificar o Autor, Marcadores e Comentários abaixo do título

Yooun ~

Vou postar agora meu primeiro tutorial aqui no InDelicada!

Espero que gostem!

O Tutu de hoje vai ensinar como colocar o Autor, Marcadores e Comentários  abaixo do título do post. Eu acho esse tutorial super prático e além disso, deixa o blog super fofo...

Quer conferir o Tutorial? Clique em Leia Mais.


Esse tutorial é um pouco complicado, então tem prestar muuuita atenção! Ah, os créditos estão no final do post...

Let's Go!

Pra fazer esse tutorial vamos precisar do seu Bloco de Notas.

Vá em:
Design Editar HTML Marque 'Expandir modelos de Widget'.

De Ctrl + F e procure por:
<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' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> 

 Esse código representa o Autor da Postagem. Você terá que RECORTAR esse código! Se não sabe, é muito simples! Clique com o botão direito do mouse e com o texto selecionado, clique em Recortar. Depois disso, cole o código no Bloco de Notas.

Agora, procure por:
<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>
O código representa os Marcadores. Faça o mesmo processo que fizemos com o código anterior e cole no Bloco de Notas.

Por último, procure por:
    <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>

 Esse código representa os comentários. Faça o mesmo processo e cole no Bloco de Notas.

Agora que conseguimos todos os códigos, tenha a certeza de que você recortou os códigos. Se não recortou, os nomes aparecerão duas vezes. Se não recortou, refaça o processo!

Agora, procure por:

<div class='post-header-line-1'/> 
E cole os 3 códigos abaixo.

Agora, a parte mais fácil é personalizar. Aqui, eu uso as duas barrinhas assim: || mas você pode colocar um ♥ no lugar.
Coloque elas depois de cada </span> dos 3 códigos .

E por fim, as linhas pontilhadas:

Procure por h3.post-title {  vai ter algum código abaixo, depois que ele termina, vai aparecer um } e é depois desse } que você vai colar isto: 

.post-header, .dados {
    border-top: 1px dashed #ccc;
    border-bottom: dashed 1px #ccc; /*cinza*/
    padding: 1px 0 1px 12px; /*espaço topo direita baixo esquerda/*
    margin: 0;
    border-bottom: 1px dashed #ccc; /*cinza*/
    text-align: center;
    }

 Não tem necessidade de modificar o código, ele fica lindo em qualquer layout.

Espero que tenham gostado do Tutorial de hoje. Créditos .

Kissus ;3

5 comentários:

' Keeells Sillvaa disse...

aaaaaaaaaaaiin amore preciso da sua ajuda como eu faço pra reverter esse goodie , gostaria de coloca lo como antes ...

http://sweettsecretsofagirl.blogspot.com.br/

Cah! disse...

AAAAA!!!! To fazendo o novo lay do meu blog, fui usar esse tutorial. Mas quero tirar!! Como que eu faco?? Por favor, responde aqui mesmo, meu blog ta fechado!!

POR FAVOR ME AJUDE!

Rita ♥ disse...

@Cah, eu tenho um link certinho pra isso, porém é num blog super antigo meu :) Para entrar no tutorial, clique aqui! Bj

Cah! disse...

Muiiito obrigada (:

Rita ♥ disse...

@Cah, de nada querida ^^ Mil beijos!