Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Configurar Tutoriais Blogger Vanessa S.

Bordas no Template

Como adicionar bordas nos templates do Blogger

É só adicionar a seguinte opção no trecho do codigo que você deseja colocar borda:


border: 1px solid #000000;

Exemplo: Nos templates mínima a na maioria dos templates modificados, a coluna total da área de postagens é
#main-wrapper
Se quiser acrescentar uma borda na cor preta sobre a área total de post, você deverá acrescentar a borda em “main-wrapper”.
Ficará assim:


#main-wrapper {
border: 1px solid #000000;
}

Nos templates Designer de Modelo,o trecho referente a coluna total da área de postagens está representado por:
.main-outer
Ficará assim:


.main-outer {
border: 1px solid #000000;
}

Lembrando que
1px -> medida da borda
solid -> é o estilo da borda
#000000 -> é a cor da borda
Você pode alterar esses elementos.

Estilos de bordas:

solid -> linha solida
Dashed -> Borda tracejada
dotted -> borda pontilhada
ridget -> cume
inset -> inserido
outset -> outset
none -> nenhuma

Você também pode inserir a borda apenas em determinado lugar:

border-right -> (Borda somente a direita)
border-top -> (Borda somente no topo)
border-left -> (Borda somente a esquerda)
border-bottom -> (Borda somente na parte inferior)

Leia alguns artigos que tratam sobre alguns efeitos que você poderá incluir em suas bordas, talvez você se interesse em conhecer outras maneiras de personalizar as bordas no seu template:
Efeito Sombreado
Bordas arredondadas

Para entender um pouco mais sobre o corpo do seu Template, leia este Post Elementos Básicos do Blogger.

 

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

19 Comentários

  1. Roxom 666 disse:

    Meus parábens, seu blog já está entre os meus favoritos. Vou acessar sempre pra conferir as novidades.

  2. Renato S. Oliveira disse:

    Legal o post e o blog!
    Aprendo bastante aqui!
    Mas gostaria de fazer uma pergunta:
    Vi pelo seu blog que você também tem adsense nele, eu tenho um blog e estou pensando em colocar programas de afiliados nele tipo mercado livre, submarino e adsense, e gostaria de saber se você já ganhou alguma coisa com ele? Se já recebeu em sua casa o cheque como promentem ou em sua conta bancária? Porque colocar por colocar as propagandas no blog, melhor deixar sem néh!
    Aguardo retorno, até mais!

    bibliotecadostemplates.blogspot.com

  3. .:: Clau ::. disse:

    Giovani Bartz
    Vc tem que descobrir qual a "div" referente a area que vc quer incluir a borda e acrescentar os trechos de código CSS a essa div.
    No caso deste tutorial, ele foi baseado nos modelos de template minima, não testei no Designer de modelo. Esse "#main-wrapper" se refere a area de postagens nos templates minima. O seu template deve ser diferente, por isso que vc não encontrou este trecho. Eu não tenho como te ajudar,pq cada template varia muito de um para outro e não há como eu saber a respeito do seu.

  4. Giovani Bartz disse:

    Clau, estou a tempos procurando um tutorial sobre adicionar bordas, mas no meu template não aparece "#main-wrapper {".
    Tentei criá-lo mas acho que coloquei no lugar errado ( abaixo de "content", junto com os outros estilos).
    Será que você pode me ajudar?
    Desde já agradeço.

  5. Ariel Alves disse:

    Oi Clau, estou acompanhando seu blog e vc tem me ajudado muito. Parabéns pelo blog. Muito bom!
    Gostaria de saber, como faço para inserir bordas nas postagens parecidas com as suas. Acho que você usa imagens, não é isso? Bom, espero que possa me ajudar.
    Eu procurei no seu blog mas não consegui encontrar.

    Desde já agradeço, e mais uma vez parabéns!

  6. Orichalcum disse:

    Boa noite.

    Estou com uma dúvida. Como faço para colocar um efeito transparente nas bordas? Seria parecido com aqueles efeitos de vidro. Existe algum código?

    Agradeço a atenção.

  7. Jr Marques disse:

    Boa noite Clau, como colocar bordas nos Gadget ou em seus Títulos?
    Desde já agradeço sua ajuda!!!!

  8. .:: Clau ::. disse:

    ADM Reset
    Lamento, mas não tenho como ajudar.

  9. ADM Reset disse:

    oi tudo bom meu blog
    não tem essa parada aki ó .sidebar{ eu vou pra pesquisar
    Ctrl+F e ele não acha isso no template oque fazer??

  10. @zecarlosfilho disse:

    Oi clau! Queria saber como põe bordas no blog mas com imagens. Igual ao seu! Tambem queria pedir mais postagens sobre slides.

  11. - Sizzin - disse:

    Oi, eu acompanho o blog há algumas semanas, mas é meu primeiro comentário.
    Primeiro quero dizer que seus trabalhos são ótimos, e que toda dúvida que eu tinha, você me respondeu com os posts.
    Segundo, parabéns pelo blog =) São poucas as pessoas que realmente entendem de tal assunto e auxilía as outras com tanta educação e carisma, como você.

    Agora quero perguntar uma coisa …

    Daria para por o efeito gradiente em bordas ? Pois vi no seu tutorial sobre Efeito Gradiente com CSS3, e percebi algo na seguinte linha:

    background: -moz-linear-gradient(top, #CCCCCC, #000000);/* firefox3.6+ */

    no ínicio do código ele descreve o background, então se eu colocasse dessa maneira:

    border: -moz-linear-gradient(top, #CCCCCC, #000000);/* firefox3.6+ */

    ou

    -moz-border-radius: -moz-linear-gradient(top, #CCCCCC, #000000);/* firefox3.6+ */

    iria funcionar? ou não adiantaria nada? Bom, isso é apenas uma dúvida, não que eu queira por isso, mas talvez, se isso funcionar, algum dia eu possa por em meu blog, em algum lugar …

  12. .:: Clau ::. disse:

    Thalles
    Se vc pensa em começar a persoanlizar o seu template, recomendo que vc leia o post sobre:
    "Elementos Básicos do Blogger" , para entender um pouco mais sobre o corpo do seu Template. Leia tb os artigos do marcador "Iniciantes".

  13. Thalles Ribeiro disse:

    Sou novo nesse negócio de Blog, queria saber onde é o lugar que adiciono esses códigos. se puderem me explicar com mais detalhes, serei muito grato! 😀

  14. RoEeD disse:

    Queria sua ajuda para colocar em "Recomendo aquelas linhas, ja vi alguns blogs usando essas linhas mais não encontrei como inseri-las no widget, caso pudesse me ajudar, ficaria grato 😀

  15. Lucas disse:

    è possìvel colocar borda redonda?

  16. .:: Clau ::. disse:

    @Orichalcum the Hedgehog:
    Talvez este artigo te ajude:
    Colocar Imagem no Titulo do Post

  17. Orichalcum the Hedgehog disse:

    Boa noite, estou com uma duvida:

    Como faço para adicionar uma imagem no lugar da borda do topo (border-top) na área do post, de forma que o título do post fique abaixo dele?

  18. ::Clau:: disse:

    @bornout:
    Se for na sidebar, dá uma lida neste post:
    personalizando a sidebar.
    Ou se preferir, dá uma olhada no menu, em "tutoriais Blogger" que vc encontrará outros artigos que tratam do assunto.

  19. bornout disse:

    Gostaria de saber como inserir imagens no Lugar da cores da Bordas.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.