
Entre na pagina designer, adicionar gadget, html/javascript e coloque o código abaixo:
<style type="text/css">
<!--
#tt {
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
position:absolute;
display:block;
}
#tttop {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
#ttcont {
display:block;
padding:2px 7px 3px 7px;
margin-left:5px;
background:#1F164C;
color:#FFF;
}
#ttbot {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
-->
</style>
<script language='javascript' type='text/javascript'>
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>
Depois é só alterar os links das imagens usando esse modelo de código:
<a href="endereço da pagina" target="_blank" onmouseover="tooltip.show('Anúncie Aqui!');" onmouseout="tooltip.hide();" ><img src="endereço da imagem" border="0" /></a>
Veja quais alterações você pode fazer neste código:
Mudar a cor do texto e fundo da tag alt, veja neste trecho do código:
#ttcont {
display:block;
padding:2px 7px 3px 7px;
margin-left:5px;
background:#1F164C; - Mudar a cor de fundo
color:#FFF; - Trocar a cor da letra (fonte)
Aqui você pode ver o código das cores e alterar como desejar. Na outra parte do código aquela que vai na imagem só troque o endereço da pagina e da imagem e o texto anuncie aqui, mas cuidado para não apagar os sinais '' que estão junto do texto senão o código não funcionará.
Lembre-se esse efeito só funciona nas imagens que alterar o código da imagem, ele não funciona automaticamente para todas as imagens. A primeira parte do codigo só precisa ser colocada uma vez depois pode alterar e colocar o código em quantas imagens desejar.
Demonstração do efeito da tag alt seguindo o ponteiro do mouse
Esse código pedimos e tivemos autorização para retirar do blog Mundo Curioso, o video para demonstração do código também fizemos no mesmo site.
cara, ficou muito bom, ótima dica!
ResponderExcluiragora queria saber o que fazer para, quando passar o cursor em alguma imagem linkada, aparecer uma borda.
Tuma
ResponderExcluirvocê quer a borda na imagem? como fazemos aqui no dicas para blogs?
passe o mouse sobre a imagem que publicamos nesta postagem e verá que a borda muda, o código para fazer isso é:
.post img{border: 1px solid #6699FF;padding: 1px;}
.post a:hover img{border: 1px dashed #000000;}
se quiser que apareça a borda somente quando passar o mouse sobre a imagem, use uma borda de cor igual ao fundo da sua pagina, porque se colocar somente borda no estilo ahover, a imagem dá um "pulo" quando passa o mouse, devido ao espaço que a borda ocupa, veja aqui outros estilos de bordas
Muito bom o Tutorial :D
ResponderExcluirRafael Belomo.
uma otima dicas. cara voce poderia me ajudr sabe tipo queria por um texto dentro de uma imagem tem como? ja vi muito blog fazerem isso e quera saber como ele fazem. obrigado
ResponderExcluirAnônimo, para escrever sobre uma imagem você precisa de um programa para editar imagens, veja aqui:
ResponderExcluirProgramas Gratuitos para Edição de Imagens
Noossa etava procurando muito esse código...
ResponderExcluirObrigado Dicas para Blogs e valew ae pro Rafael por ter cedido o código.
Vou emplementar esse código em meu blog...
*Uma dúvida esse código deixa mais lenta a pagina?
Morcegando
ResponderExcluirqualquer código que colocar no seu blog deixa a pagina mais lenta, precisa fazer o teste e ver se acha que vale a pena.
mas esse código não parece dar diferença na velocidade da pagina
Que beleza essa dica.Vou tentar!Obrigado,chica
ResponderExcluiraff nem gostei pois eu tambem uso esse codigo agora vou ter que modifica-lo mais boa idéi a
ResponderExcluir¬¬ e ele não deixa a pagina pesada não oq deixa sua página pesada é o conteudo que vc coloca nela as imagens
então boa sorte
valeu fabiano, era isso que eu queria, mas como coloco somente na sidebar?
ResponderExcluirTuma
ResponderExcluirdo mesmo jeito que coloca em qualquer outro lugar, precisa inserir os códigos em cada imagem que for utilizar esse código, como mostramos no modelo
não cara, eu estava falando a respeito do meu outro comentário! (o primeiro comentário postado, por um acaso):
ResponderExcluir"cara, ficou muito bom, ótima dica!
agora queria saber o que fazer para, quando passar o cursor em alguma imagem linkada, aparecer uma borda."
eu queria saber como fazer isso somente na sidebar.
é aquilo que respondemos alguns comentários antes deste, sobre criar o estilo .post img, mas se quiser para a sidebar use; .sidebar img
ResponderExcluireu bem que tinha tentado isso, mas eu estava errando um pouco no código, agora eu consegui. valeu cara, você e seu blog são dez!
ResponderExcluirEu estava procurando algo assim...
ResponderExcluirMuito obrigado !
no elemento HTML/JavaScrip deu tudo certo. Mas e se for numa DIV dentro do código HTML, como poderia fazer?
ResponderExcluirdentro do código html do blogger seria muito dificil aceitar esse código todo
ResponderExcluirpara fazer com link de texto use title em vez de alt, assim:
ResponderExcluir<a href='http://www.dicasparablogs.com.br/2010/08/efeito-na-tag-alt-personalizar-cor-da.html' title='Efeito na tag Alt - Personalizar texto sobre a imagem'>Efeito na tag Alt - Personalizar texto sobre a imagem</a>
vlww Fabianooo....certinhoo...abraços
ResponderExcluirCaramba faz um tempão q esotu procurando isso !
ResponderExcluirMe ajudou muito !
Muito Obrigado !
Parabéns pelo Blog
Muito obrigado, Sempre quis isso mais nunca vi, ou achava mais dava errado, em fim esse tutorial me ajudou e deu certo no meu Blog Abraços.
ResponderExcluirCarlos Felipe
queria saber que cor fica bom para o meu blog.: http://blogcodigos.blogspot.com
ResponderExcluire se da dechar redondo
felipe
ResponderExcluirquais cores usar no blog é uma escolha pessoal.... não tenho como dar opinião sobre isso.
isso não é "alt" isso é a title ¬¬
ResponderExcluiralt e title tem função parecida... escolhemos usar o nome alt por ser utilizado em imagens
ResponderExcluirPow gostei muito, além de aparecer exatamente na hora em que o ponteiro fica sobre o texto ou imagem, ainda da um estilo mais UP para o site :D
ResponderExcluirwww.helpaki.com
Olá! Eu achei ótimo o codigo já coloquei no meu blog, foi fácil, fácil.
ResponderExcluirMas eu queria tirar a borda quadrada do nome, pois, quando coloco o mouse o fundo onde o nome tá escrito fica quadrado, e eu queria que ficasse com a borda redonda.
como faz?
Geano Souza
vou pesquisar se é possivel a caixinha com o texto aparecer arredondada
ResponderExcluirOK!
ResponderExcluirAgora, esse período do código: "display:block;" muda o que no aplicativo? Por exemplo: poderia muda a palavra "block"? Pra que outra palavra?
Saudações!
Geano Souza
o display block é o modo que é feita a exibição... existem outras formas, mas precisa entender de CSS para alterar isso mas no caso deste tutorial o block é o mais indicado
ResponderExcluirGostaria de saber como fazer para a imagem dá um "pulo" quando passa o mouse nela. E onde colocar o código.
ResponderExcluirSaudações!
Geano Souza
veja esse código:
ResponderExcluirColocar bordas nas imagens do blog
lá fala em bordas, mas se usar tamanhos diferentes de bordas a imagem pode se mover (pulo) ao passar o mouse ou estão usar margin-top:2px no trecho a:hover
Eu não sei como acho o código da imagem, para coocar os efeitos de estrelinha no cursor do mouse
ResponderExcluiro efeito de estrelinhas caindo não são imagens... só códigos, veja aqui: Efeitos Estrelinhas Caindo do Ponteiro do Mouse
ResponderExcluirGostei muito Fabiano agora me
ResponderExcluire como faço para mudar o tamanho da imagem não tem como colocala menor não?
paulinhorodrigues
ResponderExcluiro melhor é usar um programa para editar a imagem e já enviar no tamanho certo...
mas na hora de enviar ao blog tem opções de tamanho, veja quando for fazer o upload da imagem
E se quiser que toque um som quando passar o mouse sobre a foto, como eu faço? Obrigada.
ResponderExcluirnão tenho o código de efeito de som ao passar o mouse, mas vou pesquisar sobre isso
ResponderExcluirmuito obrigado, vai me dar muito jeito para os links de parceiros :)
ResponderExcluirOlá, gostaria de saber se no lugar de aparecer um texto eu consigo fazer aparecer a mesma imagem, só que ampliada.
ResponderExcluirAí, assim como o texto se move junto ao cursor, a imagem também se moveria..
Sei que tem algo parecido com isso que quero, que se chama TOOLTIP, mas não sei usar ainda.
Rick
ResponderExcluirnão fiz testes sobre isso... mas acho que seria possível mas inviável....
seria necessário usar todo esse código com nomes de estilos diferentes para cada imagem...
se eu achar um outro código melhor para fazer isso farei um tutorial sobre o assunto
Adorei muito o site! parabéns
ResponderExcluirQuando publico a primeira vez no Blogger(na pagina X)o código funciona beleza, porém, quando volto a mesma pagina o - onmouseover="tooltip.show('Anúncie Aqui!');" onmouseout="tooltip.hide();" - sumiu, me obrigando a ter que coloca-lo novamente caso eu venha a salvar. Imagine se eu tiver 50 links na mesma pagina, toda vez que inserir um novo link terei que editar os outros novamente! Como solucionar? Mesmo com este problema eu gostei muito do código. Valeu!!
ResponderExcluirUilmer
ResponderExcluirisso já aconteceu comigo com outros códigos... o jeito é salvar o código e colar novamente quando for fazer uma edição
Fabiano, esse trecho da postagem
ResponderExcluir#tt {
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
position:absolute;
display:block;
}
Na parte de " position:absolute; ", qual o nome que pode-se colocar em vez do "absolute", para que o nome fique sob o mouse?
Mano
ResponderExcluirficar sob o mouse? não entendi o que está querendo fazer.
se trocar o absolute ou pagar aquela linha o texto ficará fora de lugar
Bom, no "absolute", o nome do do banner ou imagem que se utiliza o código, fica em cima do ponteiro do mouse. Queria saber qual um outro nome,que substitua o "absolute", para que o nome dique em baixo do ponteiro do mouse.
ResponderExcluirnão é neste trecho o posicionamento, veja aqui:
ResponderExcluirvar top = 3;
var left = 3;
e altere esses valores mas não o nome das varias. se precisa pode usar valor negativo, por exemplo:
var top = -30;
Ei você pode me dizer como colocar u mtitulo clicavél no titulo da postagem com so o titulo dele ai quando clica ta o conteudo me ajuda por favor
ResponderExcluirentre na pagina editar html e procure por
ResponderExcluir< data:post.title/ >
então só só alterar dessa forma
< a expr:href='data:post.url' >< /a >
Dá para usar esse efeito em banners ?//// ou seja na lateral do blog
ResponderExcluirdá para usar esse código em qualquer imagem que você puder editar o html
ResponderExcluir