Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:
<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>
Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.
Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.
<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>
Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.
Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.
Vc poderia colocar como deixar a radio off, tipo quando uma pessoa entra no meu blog so liga a radio se quiser.
ResponderExcluirmeu blog: http://vamp-downloads.blogspot.com/
obrigado
algumas radios fornecem essa opção outras não, você tem que ver isso na hora de pegar o código no site da radio porque a maioria delas é impossivel alterar a opção de ligar automaticamente.
ResponderExcluirSite muito bom =D
ResponderExcluirvenho acopanhando a mtuuu tempo ^^
Legal a dica, eu mesmo não sabia.
ResponderExcluirVou começar a fazer alguns teste em imagens no meu blog, valeu.
Willian Coutinho
http://dicasplugins.net
Vc tem alguma explicação de como fazer o banner? Obrigada.
ResponderExcluirEAD
ResponderExcluircomo fazer banner é complicado pois é edição de imagem, então não tem muito como explicar, mas já postamos uma lista de programas gratis para editar imagens
http://dicasparablogs.blogspot.com/2008/08/programas-gratuitos-para-edicao-de.html
Valew brother, sempre com dicar simplies praticas e objetivas.
ResponderExcluirsó pra avisar, aqui a imagem ta bugada.
ResponderExcluirRicardo Lopes
ResponderExcluirobrigado por avisar, já troquei a imagem.
TENHO QUE DAR MÃOS A PALMATORIA!!
ResponderExcluirVocê é muito bom, fiquei sabado inteiro procurando e só encontrei aqui. Muito obrigado por nos ajudar!!!!
boa dica deu certo no meu blog mais na hora que eu coloquei uma imagem do lado da outra ele parou de funcionar vc sabe como e que eu faço para fazer esse codigo em varias imagens uma do lado da outra ou e so em uma
ResponderExcluirCara não tá funcionando não!
ResponderExcluirAnimações dos Sellens A-S
ResponderExcluirtalvez esteja usando o endereço errado da imagem, como pode ver nesta postagem o código funciona
Bom cara mas qdo eu passo o mouse por cima não muda pq será?
ResponderExcluirmarcos eu so tenho a ti agradecer, pois o seu blog, é muito bom, tenho aprendido de mais,pois é bem explicativo como vc da as dicas,eu estou apenas começando, e pode ter certeza quando tenho alguma duvida corro pro seu blog.
ResponderExcluirvaleu meu amigo continue assim!
email-ixnbravo@hotmail.com
Como eu hospedo a imagem depois de pronto???
ResponderExcluirveja aqui como hospedar as imagens
ResponderExcluirhttp://www.dicasparablogs.com.br/2008/12/hospedagem-de-imagens.html
Fabiano, fiz tudo conforme seu tutorial. coloquei 2 imagnes na sidebar com esse efeito, porem, quando eu passo o mouse sobre o primeiro, a imagem que deveria aparecer, aparece no segundo. Não sei se entendeu, mas preciso de ajuda, meu prazo de entrega de layout esta acabando e eu preciso disso para termina-lo.
ResponderExcluirLucas C. M.
ResponderExcluirveja que um endereço de imagem aparece duas vezes no código, talvez esteja colocando os endereço em lugar errado.
Consegui colocar tudo certinho, mas tenho outro problema agora... a segunda imagem (ao passar o mouse) esta demorando demais para aparecer.
ResponderExcluiro tempo que a imagem demora para aparecer tem a ver com o tamanho da imagem, onde está hospedada, velocidade de internet...
ResponderExcluirnão é possível corrigir isso no código
Eai amigo bloggeiro tudo bom?
ResponderExcluirquero uma ajuda sua fera!!
como voce faz pra por codigo HTML em seus posts e eles nao se executarem??
tipo se quando eu for fazer um post assim:
Ola galera hoje eu vou ensinar a como por titulo no seu blog, entao peguem o codigo abaixo:
< html>< title>ESCREVA O TITULO
Me responda no msn ou no meu blog!
msn: thow4ever@hotmail.com
thow4ever.blogspot.com
Thow4EveR
ResponderExcluirpara publicar codigos use o blogger in draft e veja as opções na pagina de postagens, ou também com um programa para editar html
Publicar Código
olha eu ja tentei mil vezes e nao consigo, faço,repito e quando vou ver o resultado ...nada...
ResponderExcluirfiz dois banners, coloquei a url do primeiro, depois do segundo e repeti a do segundo, nada...o que sera?ah, aprendi muitas coisas aqui, obrigada.
É a Nossa " Cara"
ResponderExcluirpode acontecer dois erros ao editar esse código, veja se não está cometendo um deles:
endereço da imagem errada
lugar dos endereços errada.. apenas um dos endereços tem que repetir duas vezes no código
Olha eu tentei colocar isso no meu blog, mais eu não entendi a parte dos links, eu fiz tudo como você explicou, mais a imagem não muda, e quando muda se nós tirarmos o mouse a imagem continua lá... Como eu resolvo isso?
ResponderExcluirvictor giovane kinczel slezinski
ResponderExcluirprecisa colocar outro endereço de imagem no código, mas veja que um deles aparece duas vezes.
Imagem não aparece
Funcionou vlw :D muitos caras estão me perguntando como fazer isto, daí eu digo que aprendi aqui até mando o endereço da imagem vlw aêw :D
ResponderExcluirFabiano, eu queria saber como faz um efeito no banner do blog que já vi em vários blogs, eu sei que é uma animação em flash (swf), é tipo assim, fica tipo uma luz passando por cima do texto, mas como deu faria, um dos sites que tem isso é o downloadsgratis.org.
ResponderExcluiro flash é um programa, é um pouco complicado de mexer, mas tem sites que criam banners em flash online, tente pesquisar no google
ResponderExcluirOlá..
ResponderExcluirmuito legal o código,
e deu tudo certinho no meu blog..
agora só uma dúvida, como faço para que ao clicar na segunda imagem o link abra na mesma pagina e nao em uma outra?
pq no original se clicar aparece uma nova pagina, eu gostaria de fazer com que continuasse a mesma janela..
para abrir na mesma janela apenas retire o trecho target="_blank"
ResponderExcluirMuito Obrigado Fabiano, este código foi de gradissíma ultilidade..
ResponderExcluirmuito sucesso ao seu blog :D
por favor preciso desesperadamente saber como faço esses efeitos. o endereço é esse
ResponderExcluirhttps://www.comprebouts.com.br/detalhe_produto.php?id=7817.149, onde ao passar o mouse aparece o zoom da parte em que ele esta e ao passar o mouse em cada figura aparece na tela a mesma, por favor me ajudem!!!
concordo que é um efeito interessante, mas ele envolve muitos códigos com hospedagem externa... enfim seria bem complicado usar no blogger pois seria necessário uma pagina separada somente para ele senão o blog todo ficaria lento por causa de um efeito usando em poucas imagens
ResponderExcluirvc naum usa mtos efeitos no seu blog, apesar de saber de tooooooodoooooos
ResponderExcluirusar efeitos no blog depende de qual é o seu publico alvo, o que procuram seus visitantes....
ResponderExcluirnós falamos sobre como modificar e criar blogs então quem nos visita não procura efeitos na pagina mas quer resolver algum problema no blog, por isso não usamos efeitos
E para passar o mouse no texto e selecionar a imagem, igual esse post >>> http://migre.me/3Tazu
ResponderExcluirVocê poderia me sizer como faz? Já procurei muito na net e não encontrei. =(
Ikaelle Aquino
ResponderExcluirvocê fala sobre aparecer os numeros sobre imagem? é um efeito bem legal, mas precisa de programa para criação de html, pois aquilo é mapeamento da imagem, fazer manualmente dá trabalho demais
pesquise sobre programa para editar html e mapeamento de imagem.
Grande Fabiano,
ResponderExcluirparabéns pelo seu trabalho, pois tem me ajudado muito.
quando a este código, me deu o seguinte problema:
criei um gadget e coloquei o código e as imagens, funcionou perfeitamente, mas se tento colocar mais imagens no mesmo gadget repetindo o código, o efeito aparece sempre na primeira. ex.:
banner 1 <código com as imagens e link
banner 2 <código com as imagens e outro link
banner 3 <código com as imagens e outro link
quanto passo o mouse sobre o banner 1 o efeito fica OK, mas ao passar sobre o 2 e 3 a 2ª imagem de cada banner vai aparecendo no primeiro banner.
existe alguma tag ou complemento no código para que os efeitos destes banners funcionem independentes no mesmo gadget?
muito obrigado.
abraços
esse código só faz trocar as imagens, mas só funciona naquela que usou o código, não tem como fazer nada automatico para mais imagens
ResponderExcluirCaro Fabiano,
ResponderExcluirMuito obrigado pelo retorno. tentarei de outra forma.
aproveitando o ensejo, vc saberia como resolver um problema ?
em meu blog quando aberto pelo IE fica um espaço em branco enorme depois que ele termina. vc sabe como resolver ?
abraços
já vi blogs com esse espaço... mas como falou é somente no internet explorer.. então fica complicado alterar os códigos para corrigir pois pode gerar erros em outros navegadores que agora estão aparecendo da forma correta
ResponderExcluirsupeer d+!
ResponderExcluirmais eu queria mesmo saber como faz para eu fazer minha home no blogspot?
pq as minhas postagens vem antes da Pagina Inicial do meu blog(home)
como fazer a Pagina Inicial do meu blog ficar em 1°?
Stefany
ResponderExcluira pagina inicial do blog são as postagens mais recentes... não tem como alterar isso
fabiano você sabe como por paginas numeradas no blogspot?
ResponderExcluirse puder me passa o código porfavor
Stefany
ResponderExcluirveja aqui: Numeração nas Páginas do Blogger - Código Atualizado
fico legal so que eu queria que a imagen abrisse na mesma janela como eu faço ?
ResponderExcluirtipos e fiser esse mesmo efeito ma imagen duas veses ae elas nao funcionan como faz pra fecha o codigo pra poder colocar o mesmo efeito novamente no mesmo gadget
ResponderExcluirJOnathan
ResponderExcluirpara abrir na mesma janela é só retirar o target="_blank"
e sim o código é para cada imagem, ou seja para usar em outra terá que repetir o código, mas se quiser que ao passar o mouse aparece a mesma imagem pode usar o mesmo endereço da primeira
ResponderExcluirOIe crieii um blog mas naum sei mexer direito dei uma fusadinha e posteii umas coisas mas quero botar coisas interesantes
ResponderExcluirEu estou procurando uma forma de colocar um ícone ao invés de um texto no atributo "alt", ou seja, ao invés de aparecer um texto, aparecer uma pequena imagem de um lupa, você saberia me dizer se tem como, sem usar o flash ou qualquer programa? Só no html.
ResponderExcluirValdir Bressane
ResponderExcluirpara fazer isso vai precisar de varios códigos, mas não tenho tutorial sobre esse assunto, e nem sei se funcionará no blog
mas certamente isso deixa a pagina bem mais lenta.
Fabiano Roberto, valeu a dica, eu estava pensando em fazer no flash, mas parei no fato de realmente pesar muito o site. Obrigado! À propósito sou fã do seu site, muito útil e realmente eficiente, parabéns pelo trabalho.
ResponderExcluirNão querendo abusar mas ainda não encontrei resposta para como eliminar o espaço que fica no template depois de removermos a navbar. Você tem alguma dica?
isso depende muito do template, o que causa esse espaço é uma margem... mas como falei varia conforme o template, então precisaria ver o blog para saber em qual parte do html está o problema
ResponderExcluirveja o trecho que modificou para retirar a sidebar e coloque padding:0px;margin:0px;
ResponderExcluirFabiano acho que há um erro nesse seu código ou entaum ele só funciona para 1 imagem a cada Gadget. Pois quando eu adiciono + de 1 imagem, a imagens de nenhum muda ( Ja Olhei se tinha erros nos link da imagem + não tem , até porque quanto eu testo so com 1 imagem no gadget ele pega normalmente). Tem como você dizer como adicionar + que 1, no meu caso é 3 imagens =\.
ResponderExcluirVlws ae
o efeito desta postagem não é para usar com o botão +1 do google... são coisas totalmente diferentes
ResponderExcluirótimo codigo, fiz algumas modificações para atender minhas necessidades especificas e ficou muito bom. Obrigado, abraços.
ResponderExcluirLuiz Alberto
ResponderExcluiré justamente essa a idéia mostrar o código para que as pessoas ajustem as necessidade do blog de cada um...
Olá, eu fiz tudo certinho mas não funciona!
ResponderExcluirPor Favor clica no meu nome ae, e vai pro meu Blog pra você ver como não esta funcionando!
Olhe aquela parte das "Colunas" do Blog foi lá que tentei fazer isso e não consegui!
Tentei colocar o HTML que utilizei la no BLOG aqui neste comentário mas não consegui!
Me Ajude Por Favor!
E-Mail:
o-grandecurioso@hotmail.com
Ah! esqueci de dizer que a primeiro momento o HTML Funcionou com umas imagens que já tinha no meu blog! Fiz só pra ver se ia funcionar e funcionou! Mas quando fiz de novo não consegui,
ResponderExcluirAté testei colocando seu HTML que você deixou la em sima, eu coloquei ele exatamente como você deixou la em sima em um Gedget (HTML/Javascript) separado, sem nada, limpinho e mesmo assim não funcionou!
ME AJUDAAAA!
Olá!!!
ResponderExcluirEu testei a dica e deu certinho,mas eu tenho uma dívuda gostaria de fazer um menu nos gadgets mesmo,sem entrar no html do blog,pq acho mais fácil:) Então ficaria EX:início,contato....
Mas qdo coloco esse codigo duplicado ele não aceita e anula o efeito do primeiro,tem como fazer isso?
Agradeço a atenção.
http://licoisasfemininas.blogspot.com/
Maurício Jr. - O Grande Curioso
ResponderExcluirenvie o código como usou para meu email e vou dar uma olhada...
para usar com mais de um banner tem que trocar o nome myimage no código
ResponderExcluirEu tenho um blog com vários postadores.Isso eu faço bys com imagens.As imagens se mexem mais quando é anexada nao se mexe no blog.
ResponderExcluirPor favor, me responda isso o mais rápido possível.De preferência no tumblr.
Obrigada.
para usar gif animado no blogger tem que hospedar as imagens fora dele.
ResponderExcluirse enviar o gif ao blogger ele converte para outro formato sem a animação do gif
Eu tenho uma pergunta.
ResponderExcluirComo coloca uma imagem no cabeçalho do blogger ai quando passa o mouse aparece outra imagem?
Quem souber responde por favor!!
Blog Do Igor
ResponderExcluirpara fazer isso no cabeçalho o jeito é colocar esse código em um gadget de html/javascript e posicionar no topo da sua pagina
Por favor, eu gostaria de saber como posso colocar um outro visualizador das fotos. Tipo, a pessoa clica na foto a imagem abre no blog. Eu percebi que no blogger falaram que tem isso, mas isso só deu certo pra mim no nootebook, mas no pc quando clico na imagem ele sai do blog pra visualizar a imagem. Queria colocar um visualizador de imagens que seja bom
ResponderExcluirObrigado
Anônimo
ResponderExcluiro efeito lightbox foi ativado e desativado no blogger essa semana... então precisamos aguardar uns dias para ver o que acontece
Eu quero um outro tipo de visualização das imagens também. Por favor me ajude, mas quero um visualizador de imagens que seja bom. Por que ja procurei em muitos locais e não consegui encontrar
ResponderExcluirAnônimo
ResponderExcluirvisualizador de imagens? o que está procurando? programa para ver e editar imagens? ou algum efeito?
Sou eu que fiz a pergunta do visualizador de imagens, tipo, quero um efeito, diferente do que tava automatico no blogger, quando a pessoa clica na imagem ela só almentar de tamanho, mais nada...
ResponderExcluirAnonimo
ResponderExcluirnão tenho esse código... mas efeitos automaticos geralmente deixam a pagina mais lenta.... portanto talvez não seja bom negocio utilizar
Ok, muito obrigado, adoro esse blog, mas se você pudesse conseguir depois esse código...
ResponderExcluirOlá Fabiano :)
ResponderExcluirExcelente dica :D
Será que poderia explicar como fazer um menu com esse efeito,estava tentando fazer por parte,mas esse código ai só vale uma vez :/
Muito obrigada :D
Maquele♥
ResponderExcluiresse efeito tem que ser colocado uma imagem por vez... não tem outro jeito
Gênio!!!! Passei duas semanas atrás de um código que funcionasse, testei códigos e css entre outros, e o seu código foi simples fácil e o único que funcionou, brigado, agora eu vou tentar fazer um menu com imagens ao passar o mouse, mas como faço para colocar um menu com esse código na horizontal, ou seja, lado a lado? Se puder me ajudar!
ResponderExcluirJúnnyor Grigolo
ResponderExcluirvocê poderia usar esse código: Dividir um gadget em duas colunas
mas não exagere nas imagens para não deixar o blog muito lento
Vlw, vc é fera, só tive que arruma o codigo .-.'
ResponderExcluirIsso é realmente muito últil, em vez de trocar a imagem, vc sabe como fazer uma imagem aparecer em baixo de outra ao passar o mouse? Pensei em fazer um menu com submenu usando esse princípio.
ResponderExcluirEu queria saber como que faz , pra tipo , a imagem do banner de parceria tá lá , ai quando a pessoa colocar o mouse em cima aparecer a mesma imagem só que com sombra , que nem nesse site , http://www.oloxa.net quando coloca a seta em cima de uma imagem de um blog parceiro a mesma imagem fica com sombra ! queria saber como que faz isso , muito obrigado desde já !
ResponderExcluiro endereço do site que citou está indisponivel...
ResponderExcluirmas efeitos de sombra não aparecem em todos os navegadores
quando eu coloco uma imagem ao lado da outra o código não funciona,e a url das imagens está certa. O que pode ser?
ResponderExcluirStephani
ResponderExcluirtem que mudar o nome da id para usar em varias imagens na mesma pagina.
veja que no código tem varias vezes myimage, então se for colocar mais de uma coloque com outro nome pode ser myimage2 e se for colocar mais continue a numeração myimage3, myimage4...
Fabiano, me ensina a fazer testes como esse: http://www.trechyteen.com/2012/04/qual-seria-sua-funcao-em-uma-revista.html?m=O
ResponderExcluirpor favoor. Tô precisando muiito.
Junior Mota
ResponderExcluirqual efeito? se for aquela da imagem é gerado pelo site fashiolista.com
Como assim? Eu me refiro a como fazer estes testezinhos, como naquele blog q te mostrei. Que ao clicar em uma imagem, aparece outra no lugar.
ResponderExcluirnão sei sobre qual código está falando.
ResponderExcluirquando clica em uma imagem ela vai para outra pagina
Amigo, me ajuda por favor.
ResponderExcluirPrimeiramente obrigado pelo código, era isso que estava procurando, porém que fazer algo além.
Como faço para colocar mais imagens com este efeito, porém precisa ficar na vertical, eu coloquei dois códigos iguais, mas as imagens ficam um do lado da outra e quando o passa o mouse, nem mudam para outra image.
para ficar uma embaixo da outra use a tag < br/ > para pular uma linha entre as imagens
ResponderExcluirtem como mudar a imagem quando passar o mouse por cima, e ainda, quando clicar, mudar de site?
ResponderExcluiresse código não funciona com o ponteiro do mouse
ResponderExcluirme ajuda fazer igual este site
ResponderExcluirhttp://mangareader.com.br/Online/greenblood-capitulo-25/45463-lions-scan
tipo qnd vc clica na imagem ele vai pro segundo e desaparece o primeiro
e ainda se vc utlizar seta para direita ou esquerda troca de imagem
por favor como faz isso?
esse site usa algum tipo de script para criar slides... mas não é no blogger, ou seja precisa editar os códigos manualmente
ResponderExcluire como faz isso vc sabe? ou existe algum tutorial queria mt faze isso tbm
ResponderExcluirtem que procurar por codigos para fazer slides, mas precisa saber um pouco de html para trabalhar com isso
ResponderExcluirPerfeito!!
ResponderExcluir