Imagens Lado a Lado, Fazer Colunas nos Gadgets

Algumas pessoas que visitam nosso blog perguntaram sobre como colocar imagens uma ao lado da outra como fizemos com os links para nossa comunidade no Orkut, Facebook e Vídeos do Youtube que temos em nosso menu. Existem varias maneira de fazer aquilo usando códigos CSS ou tabelas em HTML(que já mostramos em outra postagem: Dividir um gadget em duas colunas), mas preferimos mostrar como fazer utilizando as divs.

divulgar bloggerNaturalmente estamos falando de gadgets de html/javascript onde podemos colocar códigos diretamente dentro deles, se quiser colocar gadgets ao lado do título do seu blog veja aqui:Como dividir o cabeçalho do blog em duas partes.

Voltando ao assunto colocar as imagens ou textos lado a lado no gadget use o seguinte código:
<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
</center>


O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.

O Código para colocar imagens é assim:
<a href="http://www.orkut.com.br/Main#Community?cmm=46751209"><img src="endereço da imagem" border="0" /></a>


Mas é claro você terá que hospedar uma imagem e alterar o endereço do link, este do exemplo é da nossa comunidade no orkut.
Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteudo aqui</div>, ficando deste jeito:

<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="clear:both">conteudo aqui</div>
</center>


dividir gadgets do blogger

Esse código não é indicado para fazer menus de texto, veja aqui um código melhor para menus:Links lado a lado (menu horizontal).

Mais Links úteis:
Colocar ou alterar as bordas
Como fazer um banner
Como Formatar o Texto do Blog

Como já dissemos no inicio existem outras maneiras de fazer isso, mas achamos essa uma das melhores, pois seria possível colocar, por exemplo, duas imagens com um texto no meio ou qualquer outra combinação de conteúdo nas colunas que acabamos de colocar dentro do gadget do blogger.

Related Posts with Thumbnails
Imagens Lado a Lado, Fazer Colunas nos Gadgets
4/ 5
Oleh

139 Comentários

Anônimo
25 de outubro de 2010 16:45 delete

obrigado pela resposta... eu estava aguardado

Reply
26 de outubro de 2010 22:02 delete

Boa Noite!!

Gostaria de saber como faço para quando eu digitar endereço de blogs e sites no meu blog, ir direto a pagina ñ precisando copiar e colar...
Obrigada...

Reply
27 de outubro de 2010 15:46 delete

na hora de colocar os links para outros sites use a ferramenta link na pagina de postagem ou o seguinte código:

<a href='http://www.dicasparablogs.com.br' target="_blank">Dicas para Blogs</a>

Reply
28 de outubro de 2010 17:21 delete

otima postagem e bem interessante,acabei de me inscrever em seu canal atravez deste Gadget!

Reply
2 de novembro de 2010 17:16 delete

Não entendi nada com nada. Acho que vc explicou direito, mas não entendi como faz para colocar as imagens... Por favor, me ajude.

Reply
2 de novembro de 2010 20:25 delete

Heli
no local que escrevemos conteúdo aqui você deve colocar o código de cada imagem, banner ou qualquer outra coisa

Reply
8 de novembro de 2010 11:03 delete

Oi

Eu queria saber como se faz para uma imagem ter vários links. Por exemplo: tenho uma única imagem com vários botõezinhos. E quero que cada botão seja um link. Se for possível, me avisa, OK? Ah, e ótimo post!

Grato

Reply
8 de novembro de 2010 14:06 delete

na verdade os menus são varias imagens e cada uma tem seu link, pode fazer usando esse tutorial, claro que ajustando o valor da largura para o tamanho dos botões ou veja aqui: Links lado a lado (menu horizontal)

Reply
10 de novembro de 2010 21:24 delete

obrigado. Queria perguntar outra coisa:

Como se faz para eu escrever um texto dentro de uma imagem?

Obrigado pela atenção e parabéns pelo sucesso do blog

Reply
11 de novembro de 2010 16:22 delete

para colocar um texto dentro da imagem precisa de um programa para editar imagens: Programas Gratuitos para Edição de Imagens

Reply
11 de novembro de 2010 17:42 delete

Não, não é isso o que quero. Eu vejo muito na internet que tem algumas imagens com texto. Mas esse texto dá para ser selecionado, mesmo em cima da imagem. Vou tentar dar um exemplo. No blog humorístico do globoesporte, http://globoesporte.globo.com/platb/bolanascostas/, tem ali do lado, escrito "Rss do Blog", de que é possível selecionar

Reply
12 de novembro de 2010 13:00 delete

ele só colocou um texto ao lado de uma imagem, altere o código da imagem assim: <img style="float:left" src="........

e ela ficará ao lado do texto

Reply
Everaldo
12 de novembro de 2010 20:46 delete

Fabiano, voçê ensinou aqui como dividir colunas em um gadget.

E como seria pra dividir em tres colunas em uma postagem pra colocar tres imagens com titulos?

Reply
12 de novembro de 2010 22:44 delete

para fazer 3 colunas dentro de uma postagem o código é o mesmo

Reply
21 de novembro de 2010 19:28 delete

Eu achei o código que queria para botar um texto sobre uma imagem! Te mandei um e-mail com o código, porque o blogger não aceitou aqui nos comentários.

Aposto que muitos blogueiros já pensaram nisso mas não sabiam como. Posta isso no blog!

Grato

Reply
21 de novembro de 2010 19:55 delete

Rodrigo G. Neves
vou olhar seu email, e testar o código que enviou.

mas acho que as pessoas que dizem escrever sobre a imagem querem uma marca d'agua, como fizemos em algumas postagens para tentar impedir copias

Reply
25 de novembro de 2010 14:16 delete

Poxa fabianooooo, gosto mt daki e de vc. O carinho e a paciência q vc tem conosco... mas as vezes naum entendo bulufas. Acho q esse post naum tah bem explicado.... Inclusive eh o segundo q naum consigo entender...vc poderia dar o passo a passo p gente q como eu eh uma cyber analfabeta....poxa se kero colokar duas colunas o texto q vc deu só vai ter duas linhas????
bjks, Vanessa Ramos

Reply
25 de novembro de 2010 15:38 delete

basicamente esse tutorial diz para adicionar um gadget de html/javascript e dentro dele colocar o código das divs, isso divide o gadget em colunas e dentro de cada div você pode escrever ou colocar uma imagem

<div style="float:left; width:33%">conteudo aqui</div>

Reply
26 de novembro de 2010 14:51 delete

Fabiano, vç tem ai como adicionar um banner ou imagem no rodapé do blog, tem uns no youtube mais o HTML é diferente do meu não sei porque e não da certo.

Reply
26 de novembro de 2010 14:59 delete

para adicionar um banner no rodapé só adicionar um gadget, qual código html está tentando usar...?

acho que não entendi direito sua duvida

Reply
28 de novembro de 2010 14:27 delete

Ok Fabiano, aqui nessa página o rodapé: Denuncie os Plagiadores, isso funciona!
Copyright © 2007-2010. Todos os direitos reservados, se eu quiser trocar por um banner, como faço, vç tem algum tutorial ai?

No meu caso o rodapé do meu blog diz:Modelo Picture Window. Imagens de modelo por hdoddema. Tecnologia do Blogger.

Esse que eu gostaria de mudar por um banner entende.
Obrigado pela atenção.

Reply
28 de novembro de 2010 15:39 delete

esse aviso no final da pagina é só um gadget de html no rodapé do blog, você só precisa colocar um gadget com o que desejar

Reply
28 de novembro de 2010 17:45 delete

Entendi.
Eu tambem to pesquisando e dizem que só é possivel colocar mais de uma postagem na primeira página do blog, eu queria colocar varias postagens tambem na segunda ou terceira página e dizem que não dá. E´ verdade isso.

Reply
28 de novembro de 2010 18:55 delete

...Não deu certo, não consegui verificar onde coloco este código...

Reply
28 de novembro de 2010 19:20 delete

você coloca esse código dentro de um gadget de html/javascript

Reply
2 de dezembro de 2010 19:53 delete

Boa dica?
Ótima dica Filhão...
Te admiro mais a cada dia que passa, e, te abençôo com o direito materno que me cabe, pelo ser humano que tu és.
Teu sucesso é fruto dos teus dividendos e de tuas ações Fabiano.
Obrigado por existir no nosso dia-a-dia. Sabemos que sem tua ajuda, a vida de muitos blogueiros teria sido muito mais difícil.
Beijinho gostoso no coração!!!

Reply
12 de dezembro de 2010 20:47 delete

ola gostaria de saber como faço pra colocar um link de imagens forte na postagem... desde já agradeço

Reply
Anônimo
11 de janeiro de 2011 00:41 delete

Já tentei colocar,mas nao consegui. :(

Tô indo em adicionar um gadget > html/javascript > tô colando dentro de 'cole aqui'isso:

http://img98.imageshack.us/img98/5030/iconetwitter.gif

e não fica =/
só fica o texto.
Tem como ajeitar?

Reply
11 de janeiro de 2011 15:00 delete

Anônimo
o código html para colocar imagem é assim:
<img src="http://img98.imageshack.us/img98/5030/iconetwitter.gif" />

Reply
13 de janeiro de 2011 00:41 delete

Como seria esse tal codigo, como é o padrão dele primeiro link da imagem deois destino, me ensina ae

Reply
22 de janeiro de 2011 13:00 delete

Fabiano, em primeiro lugar parabéns pelo site, é muito útil para os usuários do blogspot! Gostaria de saber como colocar um link vinculado à imagem, por exemplo, coloco um ícone do twitter e ao clicar em cima dele a pessoa é redirecionada automaticamente. Valeu!

Reply
22 de janeiro de 2011 14:54 delete

fazer links para seu perfil no twitter ou qualquer outro lugar com imagens é igual fazer um banner, então se precisar veja neste link um gerador de código

Reply
4 de fevereiro de 2011 17:24 delete

interesante mai eu queria saber como coloca o link da suas redes sociais ao lado da coluna

Reply
5 de fevereiro de 2011 00:36 delete

kayque
para colocar os botões no canto da pagina veja aqui o código: Fixar botões no canto da pagina

Reply
Rafael
7 de fevereiro de 2011 15:58 delete

Muito bacana sua dica...
So uma duvida...Como faço para eu comecar uma nova linha com 3 colunas ?
Obrigado

Reply
7 de fevereiro de 2011 16:38 delete

para começar uma nova linha com 3 colunas use o código assim:

<center>

<div style="float:left; width:33%">conteudo aqui</div>

<div style="float:left; width:33%">conteudo aqui</div>

<div style="float:left; width:33%">conteudo aqui</div>

<div style="clear:both">

<div style="float:left; width:33%">conteudo aqui</div>

<div style="float:left; width:33%">conteudo aqui</div>

<div style="float:left; width:33%">conteudo aqui</div>

</div>

Reply
11 de fevereiro de 2011 15:42 delete

poww
coloquei esse codigo em meu blog....
só q no meu caso sao 6 imagens...1 ao lado da outra formando uma fileira de 3....
só q na ultima fileira fica dando um espaço do lado esquerdo feioso...sabe oq pode ser?

Reply
11 de fevereiro de 2011 17:49 delete

veja se os espaços (width) estão corretos e o alinhamento center

Reply
12 de fevereiro de 2011 09:55 delete

Fabiano... Teria como juntar esse código com o código da galeria de imagens? É que se formos criar realmente uma galeria de imagens, os links ou as miniaturas ficarão todos na vertical. Acho que ficam esquisitos. Desse modo ficariam com links lado a lado, ou imagens lado a lado tipo colunas que, clicando veríamos a imagem em tamanho grande.
Toma isto como uma sugestão ok?
Beijinhos

Reply
12 de fevereiro de 2011 13:11 delete

Natália
é possivel fazer, mas vai dar um pouco de trabalho.... vou fazer uns testes e se for possivel criar um tutorial sobre o assunto

Reply
14 de fevereiro de 2011 02:12 delete

e como faz para botar o link do orkut,facebook,twitter junto as fotos.

Reply
14 de fevereiro de 2011 13:21 delete

veja no link como fazer um banner no tutorial...

as imagens do twitter, facebook... são só imagens com links (banners)

Reply
19 de fevereiro de 2011 23:47 delete

Olá
Fabiano
Saudações.
Imagens de texto lado a lado.Para um iniciante igual eu, tive algumas duvidas pq não conseguia. Na sentença do codigo.
No inicio usei
center (conteudo) fechar... div -/center
nã- ao escrever este email , não pode usar tag.
Precisei fechar assim para funcionar.
Muito obrigado pelas suas explicações.
Um abraço

Reply
26 de fevereiro de 2011 23:32 delete

Olá as postagens do meu blog está distante do título,me ajude por facvor.

Reply
27 de fevereiro de 2011 00:27 delete

veja se no seu html no estilo h2 ou h3 tem margin ou padding com valor alto...

não tem como ser mais especifico pois isso varia conforme o template

Reply
2 de março de 2011 15:03 delete

Fabiano vc manda muito bem,adorei esse tuto e já estou usando...
Abraços...
http://drikabello.blogspot.com/

Reply
5 de março de 2011 14:25 delete

olá muito boa a sua dica era o q estava procurando, até consegui colocar os botões de rede sociais um do lado do outro mas o tamanho ficou diferente, um tá maior q o outro e queria q ficasse do mesmo tamanho e tb ñ está alinhado.
será q vc poderia me ajudar?
www.olhinhosdacaju.blogspot.com

obrigada.

Reply
5 de março de 2011 15:42 delete

os tamanhos das imagens você precisa modificar usando algum programa para editar imagens não é recomendável acertar isso com códigos

Reply
11 de março de 2011 23:21 delete

Oi Fabiano... obrigada pela dica... jeito bom.
Gostaria de saber como faço para por essas imagens e o link abrir na mesma página.
Obrigada.

Reply
12 de março de 2011 01:08 delete

para abrir o link na mesma pagina é só naõ usar o target = blank

Reply
12 de março de 2011 10:12 delete

Mais uma duvidazinha... hehe... Gostaria de fazer esse passo como um menu em um template pronto, modificando-o. Só que nele somente há lugar para colocar o gadget em outros locais.. eu consegui criar um novo gadget para o menu, mas não consigo posicioná-lo no local exato... pode me ajudar??

Reply
12 de março de 2011 12:52 delete

para colocar o menu é só adicionar o gadget de html/javascript

Veja aqui sobre Problemas para mover ou adicionar gadgets do blog

Reply
16 de março de 2011 15:54 delete

ótima dica....to conseguindo aprender bastante com site...vale a pena conferir...Obrigado desde há !!!

se quiserem visitar meu blog,

www.lemonds.tk

nao custa nada,to em busca de parceiros,um ajudando o outro conseguimos chegar onde queremos !!!!

Reply
23 de março de 2011 16:04 delete

Olá Fabiano, Não consegui mesmo carregar uma imagem e o link q ela deve abrir, eu quero fazer exatamente igual o exemplo e como é no teu blog só com o twitter, face e youtube, mas no meu caso aparece a escrita do endereço da imagem e não realiza o link para a página. Grato pela atenção

Reply
23 de março de 2011 16:24 delete

é possivel que o endereço da imagem esteja errado.. tente com outra

Reply
31 de março de 2011 10:54 delete

Parabens Fabiano... otimo site!!!!

segui seu tutorial e deu certo fiz com duas colunas
só que tenho uma duvida:
como faço p/ inserir um espaço entre as imagens?
obrigado!

Reply
31 de março de 2011 15:43 delete

se usar a tag center como usamos no tutorial as imagens ficarão centralizadas, ou seja haverá um espaço dos lados de cada imagem, desde que a coluna tenha a largura suficiente

Reply
Anônimo
3 de abril de 2011 21:30 delete

preciso que tambem me diga se eu usar a no negosio 11% vai dar somente uma coluna
AGORA ESTOU ENTENDENDO

Reply
3 de abril de 2011 23:45 delete

o valor 33 é porque são 3 colunas entao a soma dá 99, deve mudar esse valor conforme o numero de colunas para a soma dar um pouco menos que 100

mas se quiser uma coluna só não precisa deste código

Reply
Anônimo
13 de maio de 2011 16:37 delete

Conf q antes eu era super fã do teu site mais depois disso to muito irritado quando entro no meu blog sempre aparece uma anuncio sem ser meu aff

Reply
Anônimo
13 de maio de 2011 16:42 delete

ajuda fika aparecendo esse link http://www.contadorsite.com/adserver/publi-br.php

Reply
13 de maio de 2011 19:41 delete

provavelmente tem esse endereço no seu codigo..

mas ele é um gadget? se for verifique o gadget, senão veja na pagina editar html

Reply
8 de junho de 2011 20:38 delete

Fabiano, tu és O Cara (com maiúsculas mesmo).

Reply
8 de junho de 2011 20:38 delete

Eu te amo (no bom sentido) \o/

Reply
Gabriella
11 de junho de 2011 14:01 delete

Ai Deus! em cada coluna eu quero uma imagem que, quando é clicada, vai para uma pág., igual a deste blog, MAS EU NÃO SEEEI FAZER! como eu coloco igual o do blog?

Reply
12 de junho de 2011 00:20 delete

é só colocar o código das imagens dentro das divs

Reply
Gabriella
18 de junho de 2011 17:42 delete

Num tem como fazer uma vídeo aula ensinando não? pq eu continuo sem entender nd!

Reply
19 de junho de 2011 00:44 delete

onde está escrito conteudo aqui você pode colocar o que desejar que ficará separado em 3 colunas como na imagem

Reply
23 de junho de 2011 14:21 delete

mas qual foi o problema? não dividiu as colunas? vc não conseguiu colocar o conteudo que desejava?

Reply
25 de junho de 2011 12:27 delete

Oi Fabiano, nao consegui fazer voce ate explicou bem, mas nao disse exatamente onde era pra colocar esse código, se era numa gadget de imagem ou em html/java script, quero colocar esses códigos junto com o icone e o link das redes sociais... como faço ???
aguardo urgentemente

Reply
4 de julho de 2011 11:03 delete

Fabiano, curto muito seu blog e estou sempre te acompanhando! Primeiramente, parabéns! rs
Estou com uma dúvida, fiz tudo certo, porém quero deixar meus ícones no centro, como faço isso? Apesar do ele continua no começo do gadget!
Aguardo respostas..
abraçoss

Reply
4 de julho de 2011 14:38 delete

coloque center no começo e final do código, assim:
< center > ... codigo .... < / center >

Reply
6 de julho de 2011 01:10 delete

Poxa Fabiano, minha imagem é do computador, não sei o link delas, poxa... E nem tem como pegar essas imagen pequenas de twitter com link assim, eu salvo no computador. E agora?

Reply
25 de julho de 2011 16:11 delete

Como façço para dar mais espaço entre as imagens ?
Me ajude por favor.. o mais rapido possivel

Reply
25 de julho de 2011 16:33 delete

o código como está centraliza as imagens... ou seja já deixa um espaço entre elas... é claro isso vai depender da largura total da coluna do seu blog

Reply
11 de agosto de 2011 14:52 delete

Olá, Fabiano!
Gostaria muito de colocar fotos, ou icones um do lado do outro, li sua explicações, porém, sou super leiga nesse negócio de Html, onde eu coloco aquele código? Por faor, me help!!!

Obrigada!

Reply
11 de agosto de 2011 18:20 delete

você deve adiconar esse código completo em um gadget de html/javascript

Reply
14 de agosto de 2011 16:46 delete

Não sei se nesse blog tem um tutorial de ~como diminuir os espaços entre cada Banner~

porque quando vejo nos outros blogs está apenas um espacinho em cada banner
e no meu blog quando Crio os HTML fica um espaço do 30 pxl de um pra outro
alguem pode me ajudar

Reply
15 de agosto de 2011 00:15 delete

depende de como colocar os banners... se usar um em cada gadget fica com espaço grande...

mas se for de parceiros ou seja tiver o código html, pode colocar todos no mesmo gadget de html/javascript então ficarão proximos

Reply
15 de agosto de 2011 15:27 delete

Fabiano Boa tarde,quero colocar os banners todos em uma pagina(pagina de parceiros)usei o código e os banners não estão ficando alinhados, o do meio sempre fica um pouco mais abaixo que os das laterais.Mesmo eu colocando os banners do mesmo tamanho.Poderia me dizer por que?

Reply
15 de agosto de 2011 18:19 delete

micarla
fizemos uma pagina com imagens de nosso blog Frases Curtas,veja se é mais ou menos isso que está querendo

Reply
15 de agosto de 2011 18:54 delete

Isso mesmo que quero fabiano,me diz como fazer,obrigado.

Reply
15 de agosto de 2011 18:56 delete

vou fazer um tutorial e publicar amanhã... a explicação é um pouco longa... principalmente por causa das variações possiveis...

Reply
15 de agosto de 2011 20:39 delete

Obrigado por sua atenção,vou esperar.

Reply
28 de agosto de 2011 12:52 delete

Boa Tarde! Gostaria de saber porque, ao colocar as tres colunas, a terceira sempre saido alinhamento horizontal, ou seja, as duas primeiras vem no mesmo alinhamento (topo) a 3ª vem sempre com o topo abaixo da 1ª e da 2ª, dando um acabamento feio. Obrigado.

Reply
28 de agosto de 2011 16:29 delete

se uma das colunas ficou embaixo é porque o espaço nao é suficiente para elas...

precisa reduzir o conteudo das colunas ou usar só duas

Reply
28 de agosto de 2011 18:42 delete

simplesmente o melhor blog de dicas que Existe na internet...belo post!!!!!!

Reply
3 de setembro de 2011 19:48 delete

Obrigada por ter respondido meu email, estava colocando o codigo errado, agora deu certo parabéns pelo seu site!!!!!

Reply
8 de outubro de 2011 17:43 delete

olá eu gostaria de colocar aquelas divisórias nas laterais para dar mais um than no blog,do jeito que ta bagunçado,,obg,bjus
http://blogdasonhagleide.blogspot.com/

Reply
8 de outubro de 2011 22:31 delete

blog da sonha gleide
divisorias?... entre as colunas? é uma imagem de fundo no estilo #content-wrapper

Reply
23 de outubro de 2011 18:08 delete

bem finalmente eu consegui dividir as colunas.
Mas eu queria saber, como aumento o numero de colunas?

Reply
24 de outubro de 2011 13:12 delete

DIC JOGOS
se usar os novos templates é na pagina design do modelo, lá tem como alterar as larguras, senão entre na pagina editar html e procure por #sidebar {width: 260px..... claro que será um pouco diferente, mas o importante é achar o valor que está em width:

mas se aumentar esse precisa diminuir a largura da coluna das postagens (#main) ou aumentar a largura total do blog (#outer-wrapper)

Reply
25 de outubro de 2011 18:41 delete

ae como que eu adiciono a imagem, e como adiciono o destino do link(que seria a imagem)?

se puder me passar os codigos das imagens do facebook, vimeo e youtube para facilitar.

Reply
26 de outubro de 2011 12:31 delete

oi fabiano tudo bem eu queria saber como coloca os banners de parceria no menu de parceria sempre quando eu boto fica na pagina inicial eu quero que fique no menu de parceria você pode me ajudar!!obrigado

Reply
26 de outubro de 2011 14:59 delete

TWO FLUX
o código é igual o link de qualquer outro banner... por exemplo

<a href="http://www.facebook.com/dicasparablogs" target="_blank"><img src="http://acessoriosparablogs.com.br/dicas-blogs-facebook.gif" border="0" /></a>

claro que usando o endereço da imagem e site que desejar

Reply
26 de outubro de 2011 19:12 delete

pode me mandar seu email para que eu possa falar com vc melhor?

Reply
26 de outubro de 2011 21:18 delete

po brigado entendi agr, mas msm assim deixa seu email pra qualquer duvida vlw pela atenção blog perfeito

Reply
27 de outubro de 2011 14:32 delete

nosso endereço de email está no lateral do blog..

Reply
5 de novembro de 2011 20:36 delete

Sensacional post Fabiano, você está de parabéns!

Obrigado.

Reply
22 de novembro de 2011 09:50 delete

Deu tudo certo, mas a imagem ficou grande de mais, tem como diminuir? Quero colocar fixa em cima no canto esquerdo do blogger! Poderia me ajudar??

Reply
22 de novembro de 2011 14:22 delete

Isadora Drew Bieber
o tamanho das imagens tem que ajustar num programa para editar imagens ou em algum site online, veja aqui: Editor de Imagens, Fotos e Banners Online

Reply
28 de novembro de 2011 16:08 delete

Funcionou :) Vlw mesmo Dicasparablogs vocês são os melhores parabéms www.downsmassa.blogspot.com

Reply
Rai
1 de dezembro de 2011 12:10 delete

olá fabiano, como eu faço pra deixar minhas coluas de gadgets desse jeito desse site?

http://www.brasildowns.com.br

pra colocar no meu blog

senhordelphi.blogspot.com

aguardo resposta, e se possivel me dê seu banner pra eu colocar la no meu blog, eu coloco os banners de quem me ajuda,grato

Reply
1 de dezembro de 2011 15:42 delete

@Rai ele usou uma imagem no topo de cada gadget, você poderia colocar na pagina editar html junto com os outros estilos CSS, isso aqui:

.widget {background-image: url(endereço da imagem); }

isso faz uma imagem de fundo no inicio de cada gadget, só precisa criar uma imagem no tamanho certo

Reply
Rai
3 de dezembro de 2011 10:01 delete

@Fabiano Roberto olha, eu fiz o que vc disse, coloquei embaixo da linha content, mas a imagem apareceu tbm na pagia de postagem, e se multiplicou, ficou horrivel, qual o lugar certo pra por esse treco ai?

Reply
4 de janeiro de 2012 13:50 delete

MUUUUUUUUIIITTOOO OBRIGADO!!!!!!!

Reply
11 de fevereiro de 2012 10:34 delete

MUIIIIIIITO LEGAL CARA EU FAZIA DE TUDO PARA POR LADO A LADO MAS NAO FICAVA ERA POR CAUSA DO MEU TEMPLETE QUE INPEDIA OS BANNER DE FICAREM LADO A LADO MAS COM ESSE CODIGO FUNCIONA DIREITINHO !

MAS ACONCELHO:

___Nao adc varios banners de uma vez so no mesmo codigo!
___Eu fiz tudo de uma vez e so os quatro primriros ficaram alinhadinhos o resto ficou tudo torto!

Entao eu aconselho a adc so 4 no codigo depois vc pega o codigo novamente e adc + 4 e ai vai!


BOM EU FIZ TUDO DE UMA VEZ NO MESMO CODIGO E DEU ERRADO mas talvez no de vcs dê certo! '-'

Reply
25 de fevereiro de 2012 16:52 delete

Galera tenho um site que usa banners do adsense e gostaria de saber como eu posso fazer para ocultar os banners da página inicial do blog?Gostaria que fosse visualizado o banner apenas quando o visitante abrisse o post completo.

Reply
Anônimo
27 de março de 2012 03:42 delete

vc é o cara, muito bom..

Reply
28 de março de 2012 01:50 delete

Tem como colocar uma tarja na foto em css, com o nome da foto? aproveitando este seu codigo?

Reply
28 de março de 2012 16:19 delete

guilherme
tarja na foto? não entendi o que está querendo fazer.

esse código só coloca imagens lado a lado, se quiser alterar algo na imagem precisa de um programa de edição de imagens

Reply
Anônimo
15 de junho de 2012 22:35 delete

Vamos supor que alguem queira usar este codigo para fazer um classificados. teria como colocar uma descrição embaixo de cada imagem, como é feito na maioria dos classificados?

Reply
15 de junho de 2012 23:00 delete

Anonimo seria possivel você deve usar nos lugares indicados com conteudo aqui esse código:

<a href="http://www.dicasparablogs.com.br" title="Dicas para Blogs" target="_blank"><img src="http://acessoriosparablogs.com.br/dicas/banner-parceria.gif" border="0" /></a><br />Tutoriais e Ajuda para Blogueiros



no trecho title="Dicas para Blogs"

Dicas para Blogs é o texto que aparece ao passar o mouse sobre a imagem, então pode alterar como quiser ou até apagar

Reply
19 de setembro de 2012 15:46 delete

Sempre que preciso de algo venho cá no site. Tem tudo o que eu preciso para melhorar o meu blogue :)
Óptima dica. Obrigado e abraço ,
Wilker

Reply
24 de setembro de 2012 19:50 delete

Nossa, ficou muito bom
parabéns pelo post, tenho uma dúvida
poderia me ajudar ?

gostaria de colocar 20 escudos de clube de futebol em me blog, mais não consigo deixar um ao lado do outro, como faço ? gostaria de fazer 5 linhas com cada linha tendo 4 escudos.

Atée

Reply
25 de setembro de 2012 00:01 delete

Caio César 67 veja esse tutorial
Organizar Banners ou Pagina de Parcerias entre Blogs

ele fala sobre banners, mas na verdade serve para qualquer tipo de imagens no seu caso os escudos dos times.

Reply
25 de setembro de 2012 03:53 delete

Olá Fabiano, obrigado pela resposta
mais não consegui ver onde eu coloco o link da imagem dos escudos e o link de direcionamento.

Poderia me ajudar novamente ?

Até

Reply
25 de setembro de 2012 08:41 delete

os links são esse trecho:

<a href='http://www.dicasparablogs.com.br'target='_blank'><img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg"/></a>

Reply
12 de outubro de 2012 11:05 delete

Legal o post!

http://www.bloguedorenato.blogspot.com.br

Reply
3 de fevereiro de 2013 04:18 delete



P E R F E I T O *__*

eu precisava fazer uma galeria de imagem em uma pagina do meu blog wordpress, e me deparei com um pequeno problema, as imagens só ficava uma em baixo da outra,e não tinha a minima idéia de como coloca-las uma do lado da outra como o planejado, e acredite,acho que essa dica do seu blog não era bem para editar pagina do wordpress, mais caiu como uma luva!
vai da para eu fazer com 7 mini imagem por cada linha usando 14px!
ficou perfeito aqui! *_*

muito obrigado mesmo!
;D

Reply
17 de fevereiro de 2013 15:26 delete

queria saber como coloca essa linha ai em azul na vertical para dividir os widgets das postagem só que no lado direito...

Reply
11 de março de 2013 20:54 delete

Você me ajudou! Muito obrigado! :)

Reply
Anônimo
11 de abril de 2013 14:12 delete

gostaria de saber como fazer para colocar uma palavra embaixo da outra numa mesma celula

Reply
11 de abril de 2013 14:23 delete

para deixar uma embaixo da outra é só usar o < br / > para mudar de linha

Reply
10 de janeiro de 2015 12:56 delete

Muito obrigado, graças à dica que vocês deram, consegui colocar os dois anuncios lado a lado em apenas um gadget, sem complicações.
Site adicionado aos favoritos, sempre que precisar de alguma coisa vou procurar aqui.
Vinicius // www.centraltech.co

Reply
28 de julho de 2015 16:52 delete

Fabiano, estou com um problema: quando vou embeddar vídeos do Facebook em meu blog, eu estipulo a largura máxima de 620px, e fica centralizado perfeitamente (já que é a largura total de posts de meu blog). Já as imagens dos posts, quando eu as salvo com 620px, ficam um pouco tortas para a direita!
O que pode ser isso? Eu posso reverter a situação pelo CSS do blog?
[]'s

Reply
28 de julho de 2015 23:29 delete

acho que deveria reduzir um pouco o tamanho das imagens.

existem diversos códigos no html do blog que podem criar espaços nas imagens use o inspecionar elemento do firefox ou chrome para tentar achar o código.

Reply
28 de abril de 2016 14:58 delete

boa tarde amigo, queria saber como com esse código posso por apenas 2 imagens uma do lado da outra, obrigado

Reply
28 de abril de 2016 15:27 delete

pode usar apenas com 2 imagens, então troque o valor 33% por 49% nas duas divs que vai utilizar.

caso as imagens não fiquem lado a lado reduza um pouco mais o valor pois as vezes tem outro código CSS criando margens nas imagens(espaço vazio ao redor da imagem).

Reply
4 de junho de 2016 07:52 delete

Como eu faço pra fazer uma grade de imagens? uma do lado da outra, e uma em cima da outra?

Reply
4 de junho de 2016 08:56 delete

você fala em grade, está queremos mostrar a separação entre as colunas?

como mostrar as grades de uma tabela?

se for para fazer outra grade embaixo só precisa repetir o código mais vezes que ele muda de linha automaticamente.

Reply