Imagem com Largura total do Post/ Sidebar


Muita gente tem usado as imagens dos posts e sidebar ocupando toda largura dos mesmo, ficando muito legal.  Vamos aprender?

 Faça sempre backup do seu template antes de modificá-lo , ou tenha um                               blog de testes, caso algo dê algo errado.


Na Área dos Posts

Vá em Modelo => HTML => /* Posts




/* Posts----------------------------------------------- */

Cole logo abaixo:

.post img{border: 0; /* borda na imagem em zero, não altere */margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */padding: 0; /* espaço entre margens e imagem, não altere */width: 540 px; /* tamanho máximo da imagem, pode e deve ser alterado */}

Mude a parte selecionada de acordo com a a largura total da área da postagem

*** Dica: Atenção!!! alguns blogs usam esse tutorial, mas acabam deformando as imagens. Quando estamos fazendo a postagem, no próprio editor, temos a opção de tamanho das imagens, por exemplo, pequeno, médio, grande, muito grande, tamanho original... 
Para que sua imagem fique linda e com a largura total do post, você precisa deixa-la centralizada e com seu tamanho original. Assim o tutorial irá funcionar perfeitamente, caso contrário, ficará horrível sua imagem. Lembrando que TODAS as imagens do post ficarão com a largura total do post, seja ela, gif, mini-gif, ícones...por isso de voce usar gifs ou ícones, eles ficarão enormes, desfocados e feios. Use imagens!!!

Na Sidebar
Para deixar a imagem na sidebar com largura total voce vai em:

Vá em Layout => Adicionar um Gadgte => HTML/ Javascript




Coloque nele o código abaixo:

<img width="280" height="auto" src="URL DA IMAGEM" />

Coloque a largura de acordo com a o tamanho da sua sidebar e a altura, deixe AUTO. Coloque também o URL da sua imagem. Xeiruuuuuu

Nenhum comentário:

Postar um comentário