Se trata de unos botones fáciles de adaptar al blog o página de cada uno, y que permiten, al clicar sobre ellos, abrir otras páginas.
Vaya, una chorrada, pero si a alguien le gusta y lo quiere, no tiene más que copiar y pegar el código que adjunto en su blog.
Por supuesto, tendrá que modificar los títulos y los enlaces que quiera mostrar, aunque en el ejemplo he puesto tres, se pueden añadir tantos como se quieran.
Si a un título no le ponéis el enlace correspondiente se convierte en un separador de botones.
En el código también especifico cada variable lo que es, a fin de que sea fácil combinar nuevos colores.
Con vuestra imaginación, seguro que sois capaces de hacer unos botones muy atractivos.
Plaza Mayor Villarreal |
Sobre dos ruedas |
Otras páginas |
Socorro ronco |
<script>
var tit=new Array();
var enl=new Array();
tit[0]='Plaza Mayor Villarreal';
enl[0]='http://plazamayorvillarreal.blogspot.com';
tit[1]='Sobre dos ruedas';
enl[1]='http://sobredosruedas-pfont.blogspot.com';
tit[2]='Otras páginas';
tit[3]='Socorro ronco';
enl[3]='http://socorroronco.blogspot.com';
var ab='2'; // anchura bordes
var cbt='#ffffff'; // Color borde superior
var cbl='#e1e1e1'; // Color borde izquierdo
var cbb='#666666'; // Color borde inferior
var cbr='#7b7b7b'; // Color borde derecho
var cf='#335577'; //Color de la fuente
var bg='#aabbaa'; //Color del fondo de la celda
var ct='#ccddcc'; //Color fondo de la tabla
var at='100%'; // anchura tabla
var tf=12; // tamaño fuente
var abb;
var abl;
var abr;
var abt
function redis(a)
{
documento=document.getElementById(a).style;
abb=document.getElementById(a).style.borderBottom;
abl=document.getElementById(a).style.borderLeft;
abt=document.getElementById(a).style.borderTop;
abr=document.getElementById(a).style.borderRight;
documento.borderBottom=abt;
documento.borderLeft=abr;
documento.borderTop=abb;
documento.borderRight=abl;
}
function clic(e)
{
window.open(enl[e]);
}
function dis(a)
{
documento=document.getElementById(a).style;
documento.borderBottom=abb;
documento.borderLeft=abl;
documento.borderTop=abt;
documento.borderRight=abr;
}
l='<table width='+at+' style="';
l+='padding:0px;';
l+='margin:0px;';
l+='background-color:'+ct+';';
l+='" >';
x=0;
while (x<tit.length)
{
if (enl[x]!=null)
{
l+='<tr><td style="';
l+='padding:0px;';
l+='margin:0px;';
l+='border-top:solid '+ab+'px '+cbt+';';
l+='border-right:solid '+ab+'px '+cbr+';';
l+='border-bottom:solid '+ab+'px '+cbb+';';
l+='border-left:solid '+ab+'px '+cbl+';';
l+='text-align:center;';
l+='font-size:'+tf+'px;';
l+='color:'+cf+';';
l+='font-weight: bold;';
l+='text-decoration: none ;';
l+='background-color:'+bg+';';
l+='cursor:pointer; ';
l+='"';
l+=' id='+x+' onmouseOver=redis('+x+')';
l+=' onmouseOut=dis('+x+')';
l+=' onclick=clic('+x+')';
l+='>';
l+=tit[x];
l+='</td></tr>';
}
else
{
tfr=parseInt(tf+2,10);
l+='<tr><td style="';
l+='padding:0px;';
l+='margin:0px;';
l+='text-align:center;';
l+='font-size:'+tfr+'px;';
l+='color:'+cf+';';
l+='font-weight: bold;';
l+='text-decoration: none ;';
l+='background-color:'+ct+';';
l+='"';
l+='>';
l+=tit[x];
l+='</td></tr>';
}
x++;
}
l+='</table>';
l+='<a href="https://informatica-pfont.blogspot.com/2011/10/botones-para-enlaces.html" ';
l+=' style="font-size:10px; color:#000000; text-decoration:none">';
l+='Created by <strong>Pfont</strong></a>';
document.write(l);
</script>
Por si no sabléis como poner el código en un blog os lo indico en esta otra página
No hay comentarios:
Publicar un comentario
¿Te ha sido útil algo de lo que has visto?, si es así, deja tu comentario, en caso contrario dime que esperabas encontrar, quizá cuando vuelvas ya esté. Gracias.