Border - Área dos posts e Sidebar


Bom, vou ver o que faço. Me pediram mais de uma vez, que eu postasse um tutorial de como fazer estas bordinhas que uso na Sidebar e na Área das postagens do blog. É um tutorial bem simples mesmo, mas já que pediram, resolvi trazer. Abaixo coloquei uma imagem para terem uma ideia do resultado.


Como iremos aplicar por volta de toda a "caixa", usamos o "border". Se desejamos aplicar a borda somente em cima, usamos "border-top", se desejamos aplicar apenas em baixo, usamos "border-bottom", se queremos nos lados, usamos "border-right" ou "border-left". Agora que temos uma introdução, vamos ao tuto.

• Borda na Sidebar

- Vá no seu HTML e procure por /* Widget 
- Abaixo desse código, você irá encontrar .sidebar .widget { 
- Antes do fechamento da tag, } Cole: border: 1px solid #ccc;

• Borda na Área dos Posts

- Se seus posts forem separados, procure por .post-outer { 
- Antes do fechamento da tag, } Cole: border: 1px solid #ccc;

- Se seus posts estiverem juntos ainda, procure por .main-inner .column-center-outer { 
- Apague o código que procurou e o código que o acompanha até o fechamento da tag, } 
- Cole o seguinte código, no lugar: 
.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
padding: 5px;
border: 1px solid #ccc;}


Espero que tenham entendido, qualquer dúvida é só perguntar. Até mais, Ingrid

16 comentários:

  1. Fica muito lindinho assim! ;3
    Amei o tuto ^3^

    www.kawaii-candy.net << Visita?

    ResponderExcluir
  2. Adorei o tuto, fica lindo demais, ainda mais a área dos posts! Vou usar a dos posts mesmo, AUHSSHA'

    -4 Seconds.

    ResponderExcluir
  3. Ótimo tutorial, super útil além de deixar o blog perfeito como o seu né, amei ^^

    Adolescente Nerd

    ResponderExcluir
  4. Nunca me aconteceu disso dos posts novos não aparecerem no painel.. (não que eu saiba USHUAS')
    Eu particularmente acho que fica bem mais fofo e deixa com um ar mais organizado o blog, como se fosse visível que cada "caixinha" dos posts e da sidebar tem sua delimitação *-*
    Beijos, Chovendo Diamantes

    ResponderExcluir
    Respostas
    1. APSKASOKS Aconteceu somente com alguns, e eu fui uma das "premiadas" :c
      Também acho mais organizado *-*

      Excluir
  5. Não fica lindo não ><
    Fica perfeito, e é super útil u3u

    Time HTML

    ResponderExcluir
  6. Adorei o tutorial (:
    Kissos - http://explosaoperfeita.blogspot.com.br/

    ResponderExcluir
  7. \O Amei ^^ Só não uso assim, por que já uso o border-bottom;
    Mas mesmo assim, gostei bastante ^^

    Beijos, #Beijada Por Um Anjo ~

    ResponderExcluir
  8. Fica lindooo .
    Tava tentando procurar um tutorial pra isso só que não achava, muito obrigada ^^

    Wide--Awake.blogspot.com.br

    ResponderExcluir
  9. Muito útil esse tutorial...é ótimo pra quem nõ quer bordas espessas no topo e no rodapé do widget.
    Da um efeito comum e diferente ao mesmo tempo.
    Muito legal...
    www.garotaousada.com

    ResponderExcluir
  10. Fica lindo !!!

    Visita ?http://clube-dos-blogueiross.blogspot.com.br/

    ResponderExcluir
  11. qual o código do seu Blockquote , é lindo.
    Perfil : Girls Nerd

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +