14 de ago de 2012

Borda na área dos posts

Olá pessoal! Hoje eu trouxe um tutorial que desde que o aprendi, não deixo de usar. Quem ensinou foi a Kaori do Kawaii World, um blog que eu amo muito. Eu não teria trago o tutorial para cá se 1- Não fosse muito bom e 2- Se não tivesse querendo ensinar uma coisa que ela não ensinou u.u. (É uma coisa bem simples, para ser sincera, qualquer um poderia ter descoberto, mas eu queria trazê-lo para cá também para deixar na tag tutoriais blogger, que são os tutoriais que uso na criação de Templates).

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

.main-inner .column-center-inner {
2-ABAIXO disso, cole, de acordo com o que preferir:

Borda no final do post (essa é que eu sempre uso)

border-bottom: 8px solid #000000;
Borda no inicio do post 

border-top: 8px solid #000000;
Borda no lado direito  
border-right: 8px solid #000000;
Borda no lado esquerdo
border-left: 8px solid #000000;

Entendendo o código:

px: é o "pixel", o tamanho da borda.
solid: é o tipo de borda. Para outros tipos, clique aqui.
#: é a cor da borda. Troque de acordo com sua preferência.

Agora para quem usa aquele tutorial de arredondar a área de posts, cole logo abaixo dos código "border-bottom: 5px solid #000000;" o seguinte trecho:


-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 
Esse é o código da borda arredondada para Firefox, Chrome e Ópera, quando você colar isso, sua borda vai ficar arredondada também.


2 comentários:

  1. Esse tutorial é realmente muito útil. Estou fazendo novo templante e irei usar, com os devidos créditos é claro.

    overdosedeloucura.blogspot.com

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!