Colocando imagens ao lado de author profile, comentários, hora e marcador.

Um tutorial incomum...

Olá pessoal, eu estou pensando em fazer um Big Tutorial com o título {Quase} Tudo para fazer um ótimo layout! Oque acham? Seria bem legal né....  Hey! Estamos com 160 comentários! Pessoal nos ajudem a conseguir 200! Quando atingimos a meta de 200 comentários e 30 seguidores e vou liberar dois layouts free!! Falando em layout, eu estou fazendo um agora, um bem especial....

Hoje eu trouxe um tutorial incomum.... Eu procurava e procurava esse tuto mas não achava! E quando achei fiquei bem feliz. E hoje vou ensinar a vocês como botar imagens ao lado do author profile, hora, comentário e marcador. Vai ficar desse jeito:

Tá vendo essas imagens ao lado? Pois é isso. Vamos aprender como colocar? Heyeeheyehey!!!

• Abra seu blogger >> Modelo >> Editar HTML
• Procure por :

• Click nessas 3 bolinhas no meio {...}. Vai abrir muitos códigos, vá descendo até achar:

/* Posts

----------------------------------------------- */

• Essa parte refere-se a tudo da área de posts. Dentro dessa tag procure por:

#blog-pager {

  font-size: 140%;

}

• Quando achar cole esse código abaixo } :

.post-timestamp {

background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;

padding:2px 0px 2px 20px;  /*ajuste as margens se precisar*/

}

.post-author {

background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;

padding:2px 0px 2px 20px;    /*ajuste as margens se precisar*/

}

.comment-link {

background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;

padding:2px 0px 2px 20px;  /*ajuste as margens se precisar*/

}

.post-labels{

background: url("URL-DA-SUA-IMAGEM")  no-repeat  center  left;

padding:2px 0px 2px 20px;  /*ajuste as margens se precisar*/

}

Vamos entender o código!

.post-timestamp { - Refere-se a hora

.post-author { - Refere-se ao autor da postagem

.comment-link { - Refere-se aos comentários

.post-labels { - Refere-se ao marcador

Agora, aonde estiver URL-DA-SUA-IMAGEM você bota simplesmente a URL da sua imagem. Pode ser mini-gifs. Recomendo um ótimo site aonde tem imagens para botar no footer (★).

Depois de colocar as URL's ficará assim:

Click na imagem para amplia-lá

Visualize. Se estiver tudo bem salve. Pronto. Fácil não é?

Abraços