Los anuncios que encontrará en esta página provienen todos del programa Adsense de Google, con la garantía que ello supone. Puede curiosear en ellos sin ningún problema y riesgo.

martes, 25 de octubre de 2011

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="http://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.

Ni un ciclista más fallecido en accidente de tráfcio

Añada un gadget a su blog

Casi todo lo que se muestra en este blog es susceptible de ser usado en otras páginas o blogs. Si Ud. necesita saber como implementarlo, siga el enlace de este título.

Si no encontró lo que quería, proponga otra búsqueda.