O Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade. 
Um código simples divide em colunas a sua postagem ou sidebar, sem mexer no HTML do template. Fácil e prático. Para as postagens, é só inserir o código na janela e escrever no local indicado. Para a sidebar, inserir o código num "Elemento de Página" - "HTML/Java". Veja:
Para dividir em 2 colunas
<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div>
<divstyle="clear: both"></div>
Veja o exemplo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque diam in orci. Aliquam facilisis, orci ac eleifend dignissim, orci dolor commodo nisl, non mollis massa justo mattis sem. Curabitur congue, eros ac ultrices tristique, ligula metus porttitor sapien, vitae mattis sem sem non purus. Donec tempus mauris eu purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque diam in orci. Aliquam facilisis, orci ac eleifend dignissim, orci dolor commodo nisl, non mollis massa justo mattis sem. Curabitur congue, eros ac ultrices tristique, ligula metus porttitor sapien, vitae mattis sem sem non purus. Donec tempus mauris eu purus.
No exemplo abaixo inserí imagens com links no espaço de texto. Veja:
Visite
Twitter
Como fazer:
A imagem deve estar hospedada em um site. Eu uso o Tinypic em portugues, mas pode ser o Photobucket ou outro que ofereça o endereço html.
Copie o endereço HTML para sites.
Exemplo:
<a href="ENDEREÇO/LINK" target="_blank"> < img src="ENDEREÇO DA IMAGEM" border="0" alt=""></a>
Inserindo as imagens e links nas colunas:
<div style="float: left; WIDTH: 45%"> <a href="ENDEREÇO/LINK" target="_blank"> < img src="ENDEREÇO DA IMAGEM" border="0" alt=""></a> </div><div style="float: right; WIDTH: 45%"><a href="ENDEREÇO/LINK" target="_blank"> < img src="ENDEREÇO DA IMAGEM" border="0" alt=""></a> </div><div style="clear: both"></div>
Copie todo o código, vá em sua página "Layout"m clicle em "Adicionar Elemento de pagina", escolha "HTML/Javascript" e cole o código dentro da janela. Posicione onde quiser.
Boa sorte!
Fonte: Matéria traduzida e adaptada► Blogger Buster
14 comentários
Se bem entendi coloco numa miniaplicação o código. Mas depois, daí para a frente, todas as mensagens estarão em 2 ou 3 colunas? Sempre? Não posso escolher qdo quero escolher 1 ou 2 colunas?
Obg e bom final de semana
Por indicação duma professora minha de informática, vim ver o seu blog. Obrigada pelas dicas tão certinhas, já consegui fazer um texto em 2 e em 3 colunas!
SerenoSobressalto:
Eu testei no campo das mensagens, não adicionei uma mini aplicação, e resultou! :-)
Olá boa noite
Fazia já algum tempo que procurava algo do género, mas hoje por mero acaso descobri o seu site e eis que se faz luz.
Excelente, este seu post e facílimo de realizar.
Claro que já está em execução e funciona perfeitamente no sidebar.
Muito obrigado foi uma excelente dica.
Um beijo
Boa tarde, fiquei impressionado com seu blogger é bonito e muito util pra que está como eu iniciando
parabens vc tem muito bom gosto. um grande abraço. Edivaldo Mendonça
entardecendo com esperança de um novo amanhã
Quiser é com S e não com Z
Olá!
Adorei a dica, mas ao dividir em três colunas, a coluna da direita ficou deslocada para baixo. Será que poderia me ajudar?
Obrigada,
Daniele
<divstyle não existe,OK?o correto não seria <div style?Pelo menos para o style clearboth funcionar,senão o W3C reclama...
Ah!Vc pode explicar se este artigo tem créditos?Eu achei semelhantes no Tio Google...
Abraços
obs:Tem no Google,não no meu Blog ;)
Oi Blogueirosnaweb!
Você tem razão sobre o <divstyle (está corrigido), mas há uns 2 anos que encontrei esse artigo não percebí o detalhe.
A matéria foi traduzida do Blogger Buster, adaptada e publicada aqui em abril de 2008, depois revisada em março de 2009. Muita gente já me copiou depois disso. Mas foi bem lembrado, vou publicar o link original, afinal eu nunca deixo de creditar a fonte, exceto por descuido ou quando me parece irrelevante.
Ameiiiiiiiiiiii sua dica. Eu fiz com vídeos e tb deu certo! Obrigada!!!
aconteceu a mesma coisa que a Daniele relatou acima. ao dividir em 3 colunas a da direita passa para baixo. duas colunas eu consegui fazer numa boa, mas 3 eu não consigo de jeito nenhum. já pesquisei em tudo que é canto. já deixei mensagem em tudo que foi blog e até agora nada. se souber, por favor, me escreva: vladiaqueiroz@gmail.com
@Vládia Queiroz
Isso pode acontecer e eu não sei como resolver, sinto muito... Fuciona muito bem para duas colunas.
Se eu encontrar uma solução volto a postar.
Desculpe o transtorno.
flw! belo post.
" Olá MaMa !! td bem ??? ...
Se vc me permite , gostaria de acrescentar que o 4shared é um ótimo ospedeiro de imagens , apesar de a grande maioria ñ ter percebido isto ainda ... basta vc baixar e instalar o 4shared desktop , criar uma conta de login e fazer um up da foto que quizer ... daí vc abre a pasta que vc criou para as fotos ( recomendo ) e botão direito em get link ... ele te dá duas opções , URL e código HTML ... neste último código que vc passou basta colar o ( código HTML ) da imagem nas partes em verde e em vermelho , daí vc terá ñ só duas mas quatro imagens ... espero ter contribuido com vc que já me ajudou bastante com suas dicas ... Boa MaMa !!! "
Postar um comentário
Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.