Vamos mostrar como colocar duas imagens lado a lado ou então criar duas colunas dentro do mesmo gadget e também como fazer para mostrar vários acessórios diferentes no final de cada postagem um do lado do outro. Com esse código é possível dividir um gadget em duas colunas e assim aproveitar melhor o espaço na sua página.
Exibir acessórios um do lado do outro no final das postagens ou em qualquer gadget pode ser muito útil, veja, por exemplo, no final de nossas postagens, mostrarmos o botão retweet, link da pagina e o link para enviar a postagem por email.
Lembramos que esse código é para ser utilizado como um gadget de html (pagina layout > adicionar gadget > html/javascript) ou então para mostrar acessorios um ao lado do outro no final de cada postagem neste caso entre na pagina editar html, clique para expandir o modelo e coloque o código após post.body, como neste tutorial sobre mostrar o link da postagem.
Isso é feito com o seguinte código:
<div style="float:left;padding:2px;text-align:center">esquerda</div>
<div style="float:right;padding:2px;text-align:center">direita</div>
<div style="clear:both;padding:2px;text-align:center">embaixo</div>
Esse código faz como se fossem 3 caixas: uma a direita outra a esquerda e uma terceira embaixo, você pode colocar o que desejar dentro de cada uma delas. A parte padding:2px;text-align:center repete-se em todas para centralizar e dar uma pequena margem(2px) dentro das “caixas”. Se quiser pode retirar esse trecho e apenas perderá o alinhamento ao centro e a margem, o posicionamento continuará o mesmo.
Se achar que o conteúdo das duas colunas ficaram muito distantes uma da outra pode corrigir isso trocando o padding:2px por padding-left:5px, claro que usando o valor que achar melhor e fazendo a mesma coisa nas duas colunas, ou seja na coluna onde tem float:right use padding-right:5px.
É com um código parecido com esse que fazemos nossos contadores do Feed eTwitter um do lado do outro no inicio da pagina, claro que antes disso tivemos quedividir o cabeçalho do blog em duas partes.
Esperamos que gostem de mais essa dica sobre layout do blog. Apenas tome cuidado para não colocar imagens ou objetos largos demais dentro deste código isso poderá gerar erros.
Exibir acessórios um do lado do outro no final das postagens ou em qualquer gadget pode ser muito útil, veja, por exemplo, no final de nossas postagens, mostrarmos o botão retweet, link da pagina e o link para enviar a postagem por email.Lembramos que esse código é para ser utilizado como um gadget de html (pagina layout > adicionar gadget > html/javascript) ou então para mostrar acessorios um ao lado do outro no final de cada postagem neste caso entre na pagina editar html, clique para expandir o modelo e coloque o código após post.body, como neste tutorial sobre mostrar o link da postagem.
Isso é feito com o seguinte código:
<div style="float:left;padding:2px;text-align:center">esquerda</div>
<div style="float:right;padding:2px;text-align:center">direita</div>
<div style="clear:both;padding:2px;text-align:center">embaixo</div>
Esse código faz como se fossem 3 caixas: uma a direita outra a esquerda e uma terceira embaixo, você pode colocar o que desejar dentro de cada uma delas. A parte padding:2px;text-align:center repete-se em todas para centralizar e dar uma pequena margem(2px) dentro das “caixas”. Se quiser pode retirar esse trecho e apenas perderá o alinhamento ao centro e a margem, o posicionamento continuará o mesmo.
Se achar que o conteúdo das duas colunas ficaram muito distantes uma da outra pode corrigir isso trocando o padding:2px por padding-left:5px, claro que usando o valor que achar melhor e fazendo a mesma coisa nas duas colunas, ou seja na coluna onde tem float:right use padding-right:5px.
É com um código parecido com esse que fazemos nossos contadores do Feed eTwitter um do lado do outro no inicio da pagina, claro que antes disso tivemos quedividir o cabeçalho do blog em duas partes.Esperamos que gostem de mais essa dica sobre layout do blog. Apenas tome cuidado para não colocar imagens ou objetos largos demais dentro deste código isso poderá gerar erros.
Nenhum comentário:
Postar um comentário