6 de nov. de 2012

Tutorial: Separar, Colocar Sobra e Arredondar Área da Postagem

Oláá pessoal!!
Tudo bom??

Bom, agora, trouxe um tutorial, muito fácil de se fazer. é bem simples e o resultado fica lindo!! O tutorial, é de como separar, as postagens no modelo Travel. Mas também vem acompanhado de como colocar sombra e arredondar!!!

Veja o exemplo:


Clique nas Imagens para Ampliar

Esse tutorial, eu achei no blog Hino-Chan. Então, os créditos vão totalmente a Nyan(acho que é esse o nome ~.~'.
Vamos lá??
Vá até o HTML de seu blogue, dê um CTRL+F e procure por:

.main-inner .column-center-outer {

Apague esta linha e no lugar dela cole isso:


.post-outer {margin: 3px 8px 15px;background:#fff;padding: 11px 11px;box-shadow: 1px 4px 19px 2px #f3b9f5;padding: 11px;}





 Para separar as postagens e ainda deixar as bordas arredondadas, cole esse código:



.post-outer {margin: 3px 8px 15px;background:#fff;padding: 11px 11px;box-shadow: 1px 4px 19px 2px #f3b9f5;padding: 11px;border-radius: 30px;}







Personalizando :


Modifique o código em sublinhado pelo código da cor da sombra que você deseja em volta da área das suas postagens.



Os códigos em negrito são a distância entre os textos e imagens das bordas da área de postagem. Quanto maior for o número, mais longe eles irão ficar da borda do post.



Se escolheu o segundo código com bordas arredondadas, troque o destacado em itálico, por um número maior para deixar mais arredondada ou diminua o número para "desarredondar"  !


Prontinho, visualize e veja como ficou ! Se não deu certo, tente ler o tutorial com mais calma que com certeza vai conseguir (*o*) ~

Caso não consiga, deixe um comentário que eu te ajudo!!

Por hoje é só!!
~Kissus~

12 comentários:

  1. :O
    Que tutorial legal!!!

    ResponderExcluir
  2. Muito bom esse tutorial, acho lindo, vou usar a sombra :)
    ~~ besos
    Bruna.
    Garota da Lua // Official

    ResponderExcluir
  3. Bem útil fofa, Beijôs , amei o post seguindo okay.

    linhas-corrigidas.blogspot.com.br

    ResponderExcluir
  4. Ótimo esse tuto!!

    http://tvfabulous.blogspot.com

    Bjs,
    Sté

    ResponderExcluir
    Respostas
    1. É bem simples, e deixa um toque especial no blog...
      ~Kissus~

      Excluir
  5. Amei seu blog!!
    Mesmo que e não tenha um blog, vou visitar todos os dias!!!

    :D

    ResponderExcluir
    Respostas
    1. Ahhn...
      Obrigada!!!

      Ficoo muito feliz em ouvir isso!!

      Excluir

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!