Gadget Alinear o centrar gadgets

Hoy he descubierto un gadget que me ha parecido muy útil. Es para poder alinear o centrar los gadgets que por ejemplo en blogger están alineados a la izquierda por defecto. Si puedes acceder a su código HTML sólo tienes que meterlo en medio de dos <div>. Tiene que quedarte asi:

<div align="center">Código que se quiere centrar</div>

<div align="left">Código que se quiere a la izquierda</div>

<div align="right"> Código que se quiere a la derecha </div>

Insertar una tabla en la entrada de tu blog

Si quieres poner una tabla en una entrada sólo tienes que poner este código:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
</tbody>
</table>

Puedes cambiarle el color del fondo cambiando en bgcolor=(aquí pones el código del color que quieres).
También puedes quitarle el borde cambiando en border= (el 1 por 0) o poner un borde más marcado cambiando a un número mayor.
Y si quieres añadir más filas vas repitiendo lo que aparece en negrita entre <tbody> y <tbody>. Por ejemplo:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
</tbody>
</table>

Y si lo que quieres es que tenga más columnas, sólo tienes que añadir <td>Texto o imagen</td> entre </tr> y </tr>

Por ejemplo:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
</tbody>
</table>

Además podrás centrar o alinear la imagen o el texto añadiendo los códigos que ya conocemos para ello:

<div align="center">Código que se quiere centrar</div>

<div align="left">Código que se quiere a la izquierda</div>

<div align="right">Código que se quiere a la derecha </div>

Si en lugar de que aparezca en una entrada, la quieres poner en alguna de las columnas laterales o inferiores, vete a Diseño-añadir gadget-Java Html y hazlo añadiendo el código tal y como lo haces como cualquier ptro gadget. La personalización la podrás hacer igualmente.

Puedes ver como me ha quedado a mí en la columna lateral la tabla de directorios.

Poner una caja para contener códigos HTML

A veces cuando queremos poner en una entrada de nuestro blog un código HTML muy largo, si lo ponemos así sin más ni más la entrada puede quedar un poco deslucida. Para que quede mucho más ordenada lo que podemos hacer es meter el código en una caja. Y es muy sencillo...Vamos a la entrada donde queremos ponerlo, pinchamos en HTML y colocamos este código:

<textarea rows="5" cols="18">
AQUÍ EL CODIGO QUE QUEREIS PONER EN LA CAJA
</textarea>

Donde pone AQUÍ EL CODIGO QUE QUEREIS PONER EN LA CAJA, ponemos el código Html que queremos que aparezca dentro de la caja. Y te quedará así

<script type="text/javascript"> //Configure below to change URL path to the snow image var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqchb5WiqnoUTpN_IeDOH3F4pNVtfabpLMijjJZ5tNEj8oSmuROk7xP4u0ySWjdGcC1aBLl94jpzZRtfZz-m1A6NClG8-UCtDS5ph4B2E_Thb3PXaO_I1wjtgZw_NTk5MTKJO2OcmYDEE/s400/snow.gif" // Configure below to change number of snow to render var no = 30; // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0; // Configure how much snow should drop down before fading ("windowheight" or "pageheight") var snowdistance = "pageheight"; ///////////Stop Config////////////////////////////////// var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "http://2.bp.blogspot.com/-MsCdyoGtGdA/UX5gk72qNoI/AAAAAAAAAfQ/LaKTmUG-aJM/s1600/snow+falling+effect.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"> <img src='"+snowsrc+"' border=\"0\"><\/div>"); } } } function snowIE_NS6() { // IE and NS6 main animation function doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script>

Puedes centrarlo o alinearlo como cualquier otro gadget y cambiar el tamaño de la caja cambiando los números 5 y 18 por el tamaño que quieras.

Espero que te sea útil