maio 19, 2011

Tutorial - Bordas em seu blog


Eu particulamente adoro colocar bordas em meu blog, em vários
lugares e existem vários tipos delas, vários modelos.

Um exemplo de borda a mais simples e comum. Solid
border: 1px solid #000000
Em azul a expessura da borda, em verde o modelo em roxo a cor.
Abaixo segue outros modelos de bordas com expessuras e cores alteraveis.

border: 2px dotted #000000

border: 2px dashed #000000

border: 4px double #000000

border: 2px groove #000000

border: 2px ridge #000000

border: 2px inset #000000

border: 2px outset #000000

Escolha a borda que você quiser caso queira colocar em HTML/JavaScript,
para colocar em postagens e gadgets, coloque:

<div style="border: 4px double #000000;">COLOQUE AQUI O QUE QUISER<div>
Esse é o código para colocar a borda em todos os lados. 
Agora tem formas de colocar apenas em um lado essa é a melhor parte.

       top: para cima          bottom: para baixo
right: direita             left: esquerda

Um exemplo de como ficaria o código com uma borda apenas para cima (top):
<div style="border-top: 4px double #000000;"> 
coloque um traço depois de border e o lado que você escolheu.

Agora se você quiser colocar no designer de seu blog. Design > Editar HTML > esse 
é o código para colocar em alguma parte de seu blog, pelo html dele, css e qualquer 
parte de /* exemplo:  /* posts  ,  /* headings , /* header, etc ..

border-top: 4px double #000000;
para colocar a borda em todos os lados
border: 4px double #000000;

e não esqueça de colocar sempre dentro das chaves quando for no html do 
seu blog. Exemplo: se você fosse colocar nos links:
a:link {
  text-decoration:none;
  color: $(link.color);
  border: 4px double #000000;
}
então é isso gente, até o proximo post. 
Beijooooos

20 comentários:

  1. Eu acho super lindo bordas, depois vou colocar no meu blog.
    Bjos, Ella
    Passa lá:
    trueagirl.blogspot.com

    ResponderExcluir
  2. Segue que eu sigo de volta. Prometo!
    http://blogdamanurequena.blogspot.com/

    ResponderExcluir
  3. Oii Karoline, aqui é lindo, já disse né? *-*
    Bom, queria q vc me add no msn, sohblog8@hotmail.com , queria perguntar um negócio pra vc =)
    Beijooooos

    ResponderExcluir
  4. Oi Karoline. Acho que você já não lembra mais de mim mas eu passei no seu blog já faz um tempinho e perguntei sobre alguns backgrounds. Bom, para encurtar a história eu disse que quando eu terminasse de montar o meu blog eu avisaria e talz. Entra e vê o que acha! Eu coloquei o seu blog nos créditos pq seus tutoriais me ajudaram bastante.

    http://7redroses.blogspot.com/

    PS: O seu blog está lindo!!

    ResponderExcluir
  5. Adorei flor, ficou lindo e fofo.
    Obrigada pelos créditos <3

    ResponderExcluir
  6. Oi, estou visitando e adorando seu lindo blog. Gostaria de dar uma passadinha no meu também? :)

    http://splashcake.blogspot.com

    ResponderExcluir
  7. Oi Karoline, amo seus posts, estou te seguindo, me segue tbm? http://daninhapink.blogspot.com
    Bjks Daninha Pink

    ResponderExcluir
  8. Adoreii conhecer seu site!!!
    Super fofo :3
    Gostaria de recebê-la em meu bloguinho "recém-criado" rsrsrs...
    Ficarei feliz ^^
    beijinhus, Roberta.
    http://reinokawaii.blogspot.com

    ResponderExcluir
  9. muito obrigada, visito sim florzinha com o maior prazer ^^

    ResponderExcluir
  10. Olá flor! Eu acho o blog muito bom, adoro os tutoriais e tals.. mas eu queria recomendar que tirasse o tocador de música automática pois sempre que eu entro aqui, já estou escutando música e ai do nada vem uma música bem alta... Teve uma vez que eu tinha acabado de fazer o meu irmãozinho dormir, mas entrei aqui e a música acordou ele... Por favor, poderia tirar a música? Obrigada!
    -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
    Lu-Luh - uma grande fã do blog! Beijos!

    ResponderExcluir
  11. Eita flor, mil desculpas :s
    eu não te prometo que tiro, mas posso mudar o estilo do player de musica, para tocar só quando clicar no play pode ser?? <3 beijoos

    ResponderExcluir
  12. Oii seguindo**
    Segue??
    http://littlevogueblog.blogspot.com

    ResponderExcluir
  13. Oie karol,eu tow com dúvida eu qr colocar borda só em baixo dos titulos dos post´s e como faço pra isso acontecer?Já vi em alguns blog só que eu não dei como faço,li esse tutorial mais não foi muito exclarecedor pra mim,desculpa se puder me responda como faço,bjo!

    ResponderExcluir
  14. Srtª Porfirio : procure por h3.post-title { e cole embaixo: border-bottom: 1px dashed #000000;

    altere o modelo da borda se quiser o o tamanho, mas é só isso e a cor :)

    ResponderExcluir
  15. Oi flor :)
    Adorei o post, seu blog é lindo, mas vou deixar pra próxima
    Seguindo...segue.?
    http://meninamulhermomentos.blogspot.com

    Big beijones

    ResponderExcluir
  16. Gostei muito do tutorial, pena que não se pode copiar os codidos e sim digita-los....
    http://filipy-said.blogspot.com

    ResponderExcluir