28.9.14

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




9 comentários:

  1. Cara eu estava procurando por esse tuto, valeeu

    ResponderExcluir
  2. Tutorial bem útil! Ah, aceito afiliação e já está na minha elite, sim? Beijos

    ♡ b a b y · BOO

    ResponderExcluir
  3. Anônimo30/9/14

    Estava procurando por esse tutorial, sério! Adoreeeei :D

    xoxo // http://www.ninascovers.blogspot.com.br/

    ResponderExcluir
  4. Adorei o tutorial, bem explicado e util! Você pediu afiliação com meu blog, entre na página de "about" e veja se seu blog corresponde todas as regras citadas, se sim, entre em contato comigo novamente. Beijos ~> Mini Realeza<~

    ResponderExcluir

-Proibido brigas
-Comente se gostou da postagem
-Não comente palavrões ou comentários ofensivos
-Não comente spans e divulgação de postagens ou blogs, se não seu comentário será excluido.
-Comente a URL do seu blog para visitarmos!
-Comente no que devemos melhorar!
- Use sinais legais : ☁☀☃☂♣♥♪♫
Obrigada por comentar ;)