Mira mi [blog de prueba]
Este es un truco muy bonito, donde podemos ponerle un cartelito a un link, que diga de qué se trata antes de visitarlo.
Para hacerlo solo tenemos que poner dos códigos, uno después de <head>
y el otro desde elementos de página.
1) Este como te decía, va después de <head>
[+/-]Abrir para copiar código 1
<style type='text/css'>
#fixedtipdiv{
position:absolute;
padding: 2px;
border:2px Ridge #640000;
font:normal 12px Verdana;
color: #640000;
line-height:18px;
z-index:150;
}
</style>
Aca podemos tocar para cambiar el color del texto del recuadro, tamaño de letra, borde, color y forma, etc.
Después guardamos plantilla y vamos a "añadir un elemento de página" y abrimos HTML/Javascript para pegar lo siguiente:
[+/-]Abrir para copiar código 2
<script type="text/javascript">
var tipwidth='100px' //default tooltip width
var tipbgcolor='#FFD600' //tooltip bgcolor
var disappeardelay=250 //tooltip disappear speed onMouseout (in miliseconds)
var vertical_offset="0px" //horizontal offset of tooltip from anchor link
var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
/////No tocar
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, tipwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie4 &amp;amp;amp;& !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
return edgeoffset
}
function fixedtooltip(menucontents, obj, e, tipwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidetip()
dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
dropmenuobj.innerHTML=menucontents
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", tipwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
}
function hidetip(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidetip(){
if (ie4||ns6)
delayhide=setTimeout("hidetip()",disappeardelay)
}
function clearhidetip(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
<a onmouseover="fixedtooltip('El mejor buscador', this, event, '150px')" onmouseout="delayhidetip()" href="http://www.google.com.ar/" target="_blank">Google</a>
<br/>
<a onmouseover="fixedtooltip('Encontrá muchos programas gratis', this, event, '150px')" onmouseout="delayhidetip()" href="http://www.softonic.com/" target="_blank">Descargas</a>
Vas a ver que, donde está resaltado, se puede configurar lo que pones dentro del cuadro, el tamaño del mismo y el link.
Espero te sea útil
Gracias por seguir viniendo después de tanto tiempo sin publicar.
5 comentarios :
Hola master!!! ¿Como va? Deseo de corazón que todo bien ;)
Yo sigo pasando ya ves, a veces la espera merece la pena y este es el caso...
¡Besotes desde Spain!
Hola Rosa!
Como te va linda.
Muchas gracias por estar por aca.
Te mando muchos besos
Cesar no aparecio nada...
Hola crack. Estoy haciendo mi blog y quiero poner este truquillo. El caso es que pongo todo según dices y no me aparece la descripcion de la pagina al pasar el mouse... (uno de los links que quiero poner es el de tu blog;) Pasate por mi blog y échame una mano http://nirryy.blogspot.com/
Muy buenas Cesar:
Antes que nada enhorabuena por el gran blog que tiene.
Mi pregunta es como saco el dichoso banner o marquesina este?
http://www.fotazas.com/v2_photo_3b8fb1.jpg
lo he subido a una web para que lo pueda ver es la marquesina que el blog de google pone en la portada arriba al entrar, buscar blog, marcar blog,siguiente blog,nueva entrada, personalizar, salir, como hago para sacar esa marquesina dichosa? muchas gracias un abrazo.