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
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. De nada!
      Obrigado pela visita!

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

    ♡ b a b y · BOO

    ResponderExcluir
  3. 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 ;)