Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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.

- - 18 Comentarios
Tag

Comentarios (18)

  1. Gracias Amigo me sirvió para ordenar mis entradas ya que le quería poner un estilo chulo y este me sirve gracias de nuevo

    ResponderEliminar
  2. @Carlos PavonGracias a ti por tus comentarios tan alentadores :)

    ResponderEliminar
  3. Hola amigo sobre la separacion de contenido en las entradas hay que utilizar la opcion que nos da blogger sobre las "Plantillas de las entradas" que esta en la opcion de configuraciones y entradas y comentarios lo malo que no se hacer codigos html para esa parte podrias hacer un post relacionado con las plantillas de la entrada en blogger te lo agradeceria un monton

    ResponderEliminar
  4. @Carlos Pavon La verdad que no comprendo tu respuesta podrías ser un poco mas especifico

    ResponderEliminar
  5. Es sobre la "Plantilla de Entrada" en la cual insertas un codigo html, es una opcion de blogger para personalizar las entradas a tu estilo, te lo comento ya que mi blog es de descarga de programas y quiero darle un estilo mas profesional a mis entradas dividiendo el contenido saludos

    ResponderEliminar
  6. @Carlos Pavon Ahora si entendí, la verdad exactamente que quieres mostrar, recuerda que lo escribas en plantillas de entradas aparecerán obviamente en todas las entradas, mas o menos dame una idea de que exactamente quieres agregar :-?

    ResponderEliminar
  7. Conoces una pagina aqui en internet que se llama Intercambios Virtuales, asi como esa pagina yo publico mis entradas, quisiera tener un diseño casi igual que las entradas de esa pagina ya que asi se ve mas organizada.... Por Datos, Descripción, Caracteristicas, Capturas, Link de descarga no se si tu me podrias ayudar saludos y gracias

    ResponderEliminar
  8. @Carlos Pavon OK! Mira si te estas refiriendo a separar el contenido en celdas, no creo que sea necesario agregar HTML en "Plantillas de entradas".

    Cuando vallas a crear una entrada solo agrega el siguiente código HTML

    <fieldset style="background-color: white; font-size: 12px; line-height: 24px; margin: 20px;">
    <legend style="border: 1px solid rgb(204, 204, 204); font-family: 'trebuchet ms', Verdana, Arial, Helvetica, sans-serif; font-weight: bold; margin: 0px 0px 0px -40px; padding: 5px 10px; text-transform: uppercase;"><span style="font-family: 'trebuchet ms';">DATOS TÉCNICOS</span></legend><div style="padding: 0px 10px 10px 0px;">
    <div align="center" style="padding: 0px 10px 10px 0px;">
    <span style="font-family: trebuchet ms;"><b>Informacion Aqui</b></span></div>
    </div>
    </fieldset>


    Recuerda agrega el código HTML y luego dale en Redactar, no necesitas seguir escribiendo en HTML

    Solo debes de cambiar Datos Tecnicos que seria el titulo de la celda e Información Aquí que seria la descripción

    Te dejo una demostración si es exactamente lo que estabas buscando
    Clic Aqui

    Espero que me hallas entendido y te halla solucionada ese problema

    Bye

    ResponderEliminar
  9. Desde este momento te declaro mi mejor amigo en internet, gracias eres el mejor me has ayudado un montón por cierto no te eh dicho de donde soy, bueno soy ecuatoriano saludos

    ResponderEliminar
  10. @Carlos Pavon Gracias a ti por tus comentarios. Y seguramente seguiremos siendo amigos.
    Un saludo desde la distancia

    ResponderEliminar
  11. Grax amigo, ya lo implemente en mi blog y quedo estupendamente :). Cada dia me meto aver si has puesto algo nuevo ya que desde que descubri tu blog, me ha sido de mucha ayuda.

    ResponderEliminar
  12. Hola amigo una pregunta porque la tabla pequeña no se centra en mi blog mira como queda amigo aqui una imagen

    http://3.bp.blogspot.com/-3lsi--rfrIo/UmQsPjankOI/AAAAAAAABtU/I06NHlADyG4/s1600/1.png

    ResponderEliminar
  13. @AnónimoSolo tienes que agregar la etiquetas

    <center> Codigo de tabla </center>

    dentro de las etiquetas center agrega el código html de las tablas

    Espero que me hallas entendido
    Un saludo

    ResponderEliminar
  14. @Fernando SalasOk gracias me funciono te lo agradesco

    ResponderEliminar
  15. Amigo a que se debe este problema...
    1.- Porque pongo las letras centradas y salen como lo apuedes apreciar en la imagen
    2.- el alto de cada tabla esta muy grande quiero que quede como lo tuya

    Aqui una imagen para que puedas apreciar
    http://2.bp.blogspot.com/-Kf7flYi0VSo/UmvZjy05X2I/AAAAAAAABxQ/pfkXnR9bMo0/s1600/sshot-2.png

    Te lo agradeceria un monton si me pudieras solucionar mi problema

    ResponderEliminar
  16. @Juan Carlos Mira puede que tenga dos soluciones:

    1º: Busca es tu plantilla css esta linea
    Table
    y borralo

    2º Yo no veo que sea muy grande las tablas veo que no están centradas.

    Agrega
    <center></center


    delante de Plantilla Black Style
    agrega <center> y al final de Plantilla Black Style agrega de </center>

    Dime si se te soluciono es inconveniente

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar