Tutoriales Sobre Blogger: Diseño de tablas para Blogger con CSS

En este tutorial veremos como agregar dos estilos de tablas para blogger con CSS. Este tutorial va dedicado  para Carlos Pavon que me pidió sobre este tutorial. Aunque no se si es exactamente esto lo
que me pidió, ya tenia para crear esta entrada así que vamos al tutorial.

Antes de comenzar veremos una demostración: 

Comencemos: 

• Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML.
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

►<b:skin></b:skin>

• Paso 3: Desplegamos el código que ahí dentro.
• Paso 4: Buscamos la siguiente linea dentro de ►<b:skin></b:skin>

]]></b:skin>

• Paso 5: Justo por encima de  ]]></b:skin> pegamos el siguiente código CSS.

Primera tabla 

/*--------- Tabla Tutoriales-Blogger.info  ----------*/
.member-details {
  margin:0 0 1.7em 0;
  padding:0 0;
  overflow:hidden;
}
.member-details dt,
.member-details dd {
  margin:0 0 2px 136px;
  padding:5px 7px;
  background-color:#eee;
}
.member-details dt {
  background-color:#538cd6;
  float:left;
  font-weight:bold;
  width:120px;
  clear:left;
  margin-left:0;
}
/*--------- Tabla Tutoriales-Blogger.info  ----------*/ 

• Paso 6: Guardamos los cambios realizados en la Plantilla.

Ahora agregaremos el codigo HTML de las tablas en una entrada

• Paso 7: Dentro de una entrada pegamos el siguiente codigo HTML

<dl class="member-details">
<dt>Nombre:</dt>
<dd>Fernando Salas</dd>
<dt>Edad:</dt>
<dd>21</dd>
<dt>Pais:</dt>
<dd>Argentina</dd>
<dt>Provincia:</dt>
<dd>Buenos Aires</dd>
<dt>Sexo:</dt>
<dd><i>Masculino</i></dd>
<dt>Información:</dt>
<dd>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.</dd>

Para agregar otra tabla solo  debes de agregar lo siguiente

<dt>Otra Tabla</dt>
<dd>Tabla</dd>

Listo ya tendríamos nuestra primera tabla creada. Si no te gusto ¡Espera hay mas !

Segunda Tabla

• Paso 1: Dentro de una Tabla pegamos el siguiente código HTML.

<table align="center" border="1" cellpadding="1" cellspacing="0" style="width: 472px;"><tbody>
<tr> <td align="center" bgcolor="#316b94" style="font-weight: bold; text-shadow: 0 1px 0 #000;" valign="middle" width="470"><span style="color: white;">Plantilla Black Style&nbsp;</span><span style="color: white;"></span></td></tr>
<tr> <td align="center" bgcolor="#DEDEDE" style="text-shadow: 0 1px 0 #FFF;" valign="middle" width="470">By: Tutoriales-Blogger.info</td></tr>
<tr> <td align="center" bgcolor="#CFCFCF" style="text-shadow: 0 1px 0 #FFF;" valign="middle" width="470">Tamaño 146.56 KB</td></tr>
<tr> <td align="center" bgcolor="#DEDEDE" style="text-shadow: 0 1px 0 #FFF;" valign="middle" width="470"><a href="http://www.mediafire.com/download/nsf4mx42oskzht9/Blogger-tutoriales.xml" target="_blank">Links</a></td></tr>
</tbody></table>

Para agregar una tabla mas solo debes de agregar lo siguiente.

<tr> <td align="center" bgcolor="#DEDEDE" style="text-shadow: 0 1px 0 #FFF;" valign="middle" width="470">Nueva Tabla</td></tr>

Para agregar una tabla con enlace solo debes de agregar los siguiente 

<tr> <td align="center" bgcolor="#DEDEDE" style="text-shadow: 0 1px 0 #FFF;" valign="middle" width="470"><a href="URL" target="_blank">Links</a></td></tr>

Aunque este resulte mas duro de comprender una ves que vallas jugando con los códigos se ara mas fácil.