30/04/2013

Tutorial - Personalizar a Área das Postagens

Peçam algum utilitário na Ask, hehe :3

Boa noite pessoas lindas *u*

Tudo bom? Sábado assisti o filme a Ultima Música, com a diva da Miley, e era um filme que eu tava doida pra assistir. Ele é muito bom, porém o final é muito triste. Até chorei ç.ç

Enfim, estou vindo atender a um pedido da minha Ask. E como não disseram que era pra cá ou pro PH, estou postando aqui mesmo, pra não ficar desatualizado né? Como eu sou muito preguiçosa e tô sem tempo, eu peguei a postagem do maravilhoso IIRTW. Achei essa postagem de lá bem útil, e seria bom que vocês aprendessem :3




~ Separando as postagens e bordinhas em cima e em baixo dos posts :: 

Se você usa o modelo Travel procure por:
.main-inner .column-center-outer { Se você usa o modelo Janela de Imagem ou Marca d' água procure por:

.post-outer { Se você usa outro modelo, sinto muito mas não sei se posso ajudar.
Agora você vai achar isso:

Se você usa o modelo Travel:

.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}


Se você usa o modelo Marca d' água:


.post-outer {
padding: 15px 20px;
margin: 0 0 25px;
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
border: $(post.border.style) $(post.border.size) $(post.border.color);
-moz-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
}

Se você usa o modelo Janela de Imagem:

.post-outer {
background-color: $(post.background.color);
border: solid 1px $(post.border.color);
-moz-border-radius: $(post.border.radius);
-webkit-border-radius: $(post.border.radius);
border-radius: $(post.border.radius);
-goog-ms-border-radius: $(post.border.radius);
padding: 15px 20px;
margin: 0 $(post.margin.sides) 20px;
}

 Independente do seu modelo, você vai substituir tudo (desde o que você procurou a "}")que você achou, por isso:

.post-outer {
background: #fff; /* Fundo da postagem */
padding-top: 1px; /* Espaço do topo */
padding-left: 10px; /* Espaço da esquerda */
padding-right: 10px; /* Espaço da direita */
padding-bottom: 10px; /* Espaço de baixo */
margin: 1px 12px 7px;
border-top:2px #EDEDED solid; /* Borda de cima */
border-left:1px #EDEDED solid; /* Borda da esquerda */
border-right:1px #EDEDED solid; /* Borda da direita */
border-bottom:1px #EDEDED solid; /* Borda de baixo */
box-shadow: inset 0 0 5px #F8F8F8, 0 0 1px #ccc; /* Sobra */
border-radius: 15px; /* Se quiser arredondar a postagem */
margin-top: 35px;
}

Já tem tudo explicadinho no código. Aí é só você alterar as cores.


Título da Postagem em Hover ::  

Siga apenas esse tutorial :)



É só isso mesmo amores. Espero que tenham entendido tudo direitinho, e se tiver alguma dúvida perguntem, beijooones :3



19 comentários:

  1. Lulita, muito legal. Parabéns pela criatividade.
    bjsss
    Manoel

    ResponderExcluir
  2. Gostei, é um ótimo tutorial.

    http://forever--and-ever.blogspot.com.br/

    ResponderExcluir
  3. Nyah, estou viajando nesse layout divoso *u* Voltando à realidade, adorei o tutorial, bem simples, eficiente e rápido, e.e

    ~ Kisses

    - 4 Seconds.

    ResponderExcluir
  4. Amei o post u3u,me ajudou muito flor *-*
    Se der,faz uma passadinha em meu blog ^^ e se gostar,pode seguir?
    Beijinhos <3

    http://sweetlove-html.blogspot.com.br/

    ResponderExcluir
  5. Muito bom o Tuto como sempre,eu vou ver se utilizo!!
    Coloco os créditos!!

    http://sarang-cute.blogspot.com

    ResponderExcluir
  6. Nossa amei esse blog, serio mesmo!
    Meu conhecimento em html é nulo, achei um maximo aqui meio que ensinar como fazer e tudo mais!
    Já to seguindo e com certeza irei visitar muito aqui.

    beijinhos, bia caspirro

    http://www.pontoemcomum.com/

    ResponderExcluir
    Respostas
    1. Annnw sério? Obrigada!
      Com o tempo você aprende amora ♥

      Excluir
  7. O primeiro tuto é maravilhoso. O segundo pretendo testar *.*
    Como você disse no começo, a ultima musica é maravilhoso - eu li o livro, nunca vi o filme

    Nhackt Yoo

    Crazycherry-sa.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Haha, usa mesmo, fica lindo!
      Aaah, eu recomendo muito que assista o filme, é bem emocionante Ç.Ç

      Excluir
  8. Meu blog é esse mais não sei qual dos templatees é. fc-julianapaiva.blogspot.com

    ResponderExcluir
  9. Adorei o tutorial, fiz no meu *-*
    Obrigada.

    Beijoos!

    ResponderExcluir