Botones para enlaces.

Harto de los enlaces que presenta Blogspot, y dispuesto a darle un poco más de vidilla a los mismos, me puse a desarrollar una pequeña aplicación que me sirviera para mi blog Plaza Mayor Villarreal y para todos los blogueros que quisieran usarla.

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.





<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