sexta-feira, 3 de setembro de 2010

Como deixar o blog com textos justificado

Deixar o texto do blog justificado seria uma boa dica para organizar seu layout.Então vamos ensinar a como justificar todos os textos do seu blog fazendo uma pequena alteração do HTML do seu blog.

Vá em "Design" - "Editar HTML" e procure por #outer-wrapper {
Mais abaixo ou do lado, troque qualquer valor de text-align: para Justify.
Deverá ficar assim - text-align:justify;

Caso não tenha essa linha do text-align , coloque-os.

Além de justificar, você pode alinhar o texto do blog de outra forma, trocando o valor de text-align para 'left' (alinhar a esquerda) , 'center' (centralizar o texto) ou 'right' (alinhar a direita).

Depois Visualize e salve!

Marcadores: , ,

Colocando sombra em todas as imagens dos posts

Fazer isso é super fácil, só precisamos de um código que vai colocar a sombra automaticamente em todas as imagens contidos em todos os posts.

Então vamos lá! =D

Vá em "Design" - "Editar HTML" e procure por .post img {
E simplesmente cole o seguinte código abaixo dela...


-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181

A parte em destaque é a cor da sombra.

Depois Visualize e salve!

Marcadores: ,

Arredondando borda da colunas

Para arredondar a borda de uma sidebar, vamos usar as novidades do CSS3.
Vá em "Design" - "Editar HTML" e procure por #sidebar-wrapper {

Abaixo coloque o código caso NÃO tenha a linha border: .... ;

border-width: medium;
border-style: solid;
border-color: #0000FF;

em seguida coloque um dos seguinte código...

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

-moz-border-radius: 9px 3px 9px 3px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;

-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;


Visualize e salve!

Obs. Testado  no template clássico do blogger.

Marcadores: ,

Alterando o fundo das colunas do blog

Para deixar seu template do seu jeito, não precisa ficar vasculhando a Internet à procura de templates legais.Com apenas algumas alterações no HTML do seu blog, você já começa a deixar do seu gosto.Como a troca do fundo das colunas, que é o que vamos ensinar a dar uma personalizada agora, e no final, verás como um pequena modificação altera toda a aprência do blog.

Para isso vá em "Design" - "Editar HTML" e procure por #sidebar-wrapper {
Abaixo dela modifique o valor de - background: #000
Na parte em vermelho coloque uma outra cor em hexadecimal que quiser.
Caso não tenha essa linha do background, coloque-os.

Para colocar uma imagem de fundo na coluna, modifique o valor de - background: #000 - Para -  background:url("URL DA IMAGEM") repeat;
Na parte em vermelho substitua pela URL da sua imagem.


Depois disso visualize e salve!

Obs. Testado  no template clássico do blogger.




Marcadores: ,