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 imagen en la cabecera del blog

Cada vez hay más cosas para ir añadiendo a nuestro blog y personalizarlo a nuestro gusto y mejorarlo. Esta vez voy a dejar aqui como personalizar la cabecera poniendo una imagen.

Lo primero que tenemos que hacer es elegir la imagen que queremos poner, y adecuarla al tamaño que queremos que ocupe según el ancho de la cabecera, etc...

Luego vamos a Diseño-cabecera-editar

Se abrirá una ventana desde que la que tendremos que subir la imagen, bien desde nuestro ordenador o bien poniendo la URL de la misma. Es importante marcar el REDUCIR HASTA AJUSTAR para que la imagen quede perfecta.

Ahora dale a GUARDAR.

El siguiente paso es ajustar la imagen. Para ello nos vamos a Diseño de plantilla-avanzado-agregar CSS

Y añade esto: #header-inner img {margin: 0 auto;} en el cuadro blanco que te saldrá a la derecha. Y por último pincha en APLICAR AL BLOG

Y ya está, ahora tu imagen estará perfectamente colocada. Puedes cambiar el tamaño haciéndola más pequeña o más grande para que ocupe lo que tú quieras.poniendo en lugar del código anterior este: #header-inner img {width: 960px; height: 220px;}. 

Los números azules son los pixeles que quieres que mida la imagen: ancho 960 y alto 220. Tú pon los que tú quieras. Luego sólo tienes que dar a APLICAR AL BLOG.

En el caso de que quieras que la imagen no ocupe todo el espacio sustituyendo al título y la descripción, sino que vaya detrás de ellos, tienes que marcar esa opción.  

Marca también REDUCIR HASTA AJUSTAR y guarda los cambios.

Puede que quieras mover un poco el título y la descripción. Sólo tienes que ir  a Plantilla-personalizar-avanzado-agregar CSS y añadir este código en el cuadro: 

.header h1{margin: 10px 0 0 40px; }.header .description {margin:-20px 0 0 0;}

Ahora solo tienes que poner las medidas para que quede como tú quieres. El código se lee así:

.header h1{margin: 10px 0 0 40px; } Es el margen del título donde 10px es ariiba, 0 a la derecha, 0 abajo y 40px a la izquierda. 

.header .description {margin:-20px 0 0 0;}Este es el margen para la descripción y la lectura es como la del título.

Poner nieve cayendo en tu blog

Ahora que estamos en invierno quizás te apetezca decorar tu blog con un ambiente más acorde a la estación. Por ejemplo puedes poner un gadget para que caiga nieve. Es muy fácil, vamos a Diseño-añadir gadget-código HTML y ponemos este código 

<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 cambiar el número 30 que está en negrita por cualquier otro según los copos que quieres que caigan.

Centrar las pestañas de las páginas

Normalmente la barra con las pestañas de las páginas está alineada hacia la izquierda por defecto. Pero si prefieres tenerla centrada es muy fácil.

Vamos a Diseño-diseñador de plantillas-avanzado-añadir Css



Y ponemos lo siguiente en el cuadro blanco que sale a la derecha:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

 

En caso de que ya tengas algún código anterior, por ejemplo para alinear una imagen en la cabecera, deja dos espacios entre ambos códigos, es decir, colojusto después de la llave que marca el final del primer código pulsamos dos veces intro y colocamos el segundo código.

 

Luego ya sólo queda clickar en APLICAR AL BLOG

 

 

En caso de que lo quieras alineado a la derecha en lugar de centrado, el código que tienes que poner es el siguiente:

 

.PageList {text-align:right !important;}

.PageList li {display:inline !important; float:none !important;}

Poner un buscador

Para poner un buscador en el blog tienes dos opciones, la primera es poner el que viene con blogger directamente desde Diseño-añadir gadget-buscador, pero que no se porqué a veces no funciona, y la segunda es ir a Diseño-añadir gadget-código Html java y poner este código

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text"/>
<input id="search-btn" value="Buscar" type="submit"/>
</form>

le das a guardar y ya está.