Tutorial - Borda e Sombra nos posts e Gadgets

Yoo ~~

Mais um tutorial, e dessa vez é de como colocar sombra com bordinha embaixo da área dos posts e das Gadgets ! É bem legal e eu gosto muito de usar nos meus Layouts !

Vamos lá ? 

Enjoy :}
Bordinha na área dos Posts

Procure por:
.post-outer{
Depois cole a seguinte tag embaixo antes de }
box-shadow: inset 0 0 10px #cfcdcd, 0 0 5px #ccc;
border-bottom: 10px solid #Cor da borda;
Se quiser que a bordinha apareça na parte de cima troque o Bottom por top, se quiser colocar os dois, é so colocar os dois códigos border-Bottom e Border-Top ex:

border-bottom: 10px solid #cdcdcd;
border-top: 10px solid #cfcfcf;

Bordinha na área dos Gadgets

Procure por:
sidebar .widget {
E faça o mesmo processo á cima !

19 comentários

  1. Muito bom o tutorial, vou usar no próximo layout!
    Beijos,
    be-a-princess-official.blogs...

    ResponderExcluir
  2. Estou criando um blog novo e era exatamente esse tutorial que eu queria.
    Muitoo obrigada. *-* ♥

    ResponderExcluir
  3. AAAAHHHH , Seguindo esse blog agora . tava a muitoooo tempo procurando esse tutorial , só que precisa ser corrigido , não encontrei '' .post-outer{ '' no HTML , dei meu jeito de funcionar e ta funcionando td direitinho. pode ser aqui . mas msm assim Vlw . adoreei o tuto e o blog . minha diva no tamplete né ' HUAHSAUHASUHASUHAS Bjoos '--'

    ResponderExcluir
    Respostas
    1. Thanks :)

      As vezes em alguns templates não há alguns códigos, é normal :)

      Beijos :3

      Excluir
  4. Oi Thiago! :) Bom, eu amei o tutorial mt bem feito! Mas eu queria saber em quais Modelos ele funciona, é que eu coloquei no Travel (viajem) E não funcionou! Pode me responder o mais rápido?
    XOXO *---*

    ResponderExcluir
    Respostas
    1. O meu é o mesmo e ta funcionando normal :/

      Excluir
  5. Eu não consegui colocar na area de posts, só nos gadgets. porq não tem esse código .post-outer{
    oq eu faço ?

    ResponderExcluir
    Respostas
    1. Entre no seu Código fonte (CTRL+U) e procure pela tag. Se achar, localize mais ou menos onde ela fica e aplique o código (:

      Excluir
  6. Não achei o ".post-outer{" :C

    ResponderExcluir
    Respostas
    1. Entre no seu Código fonte (CTRL+U) e procure pela tag. Se achar, localize mais ou menos onde ela fica e aplique o código (:

      Excluir
  7. Anônimo10.8.13

    Obrigada pelo tuto! vou tentar fazer aqui ^^ beijão!

    http://lovegacchin.blogspot.com.br/

    ResponderExcluir
  8. Não achei ".post-outer{", já entrei no meu código fonte mas ainda não achei u.u
    Não tem outro jeito? º~º

    ResponderExcluir
    Respostas
    1. Harumi tem sim! Basta você procurar por .post ou criar essa tag ( .post )

      Excluir
  9. Amei o tutorial, me ajudou muito mesmo!
    Amei o bloguinho de verdade!
    http://teenagethiings.blogspot.com.br/

    ResponderExcluir
  10. Gostei vlw ai pela ajuda :D
    Visita e segue, retribuo tbm ;)

    http://GuitarMusicBr.blogspot.com.br

    ResponderExcluir
  11. não achei .post-outer!!! Entrei no meu código fonte mas não adiantou!! O que posso fazer ainda?? ://

    ResponderExcluir
  12. Adorei! Vou usar no próximo lay :3

    Segue lá? Blog novissimo! Criei ontem.

    http://sweetiecherryblog.blogspot.com.br/

    ResponderExcluir

- Se quiser um post, peça na ask !

- Se não gostou, não use palavras ofensivas. Ninguém precisa rebaixar-se a tanto para expressar a opinião.

- Leio todos os comentários, respondo e retribuo sempre que o tempo deixa.