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">Para agregar otra tabla solo debes de agregar lo siguiente
<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>
<dt>Otra Tabla</dt>Listo ya tendríamos nuestra primera tabla creada. Si no te gusto ¡Espera hay mas !
<dd>Tabla</dd>
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 </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>
<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>
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@Carlos PavonGracias a ti por tus comentarios tan alentadores :)
ResponderEliminarHola 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@Carlos Pavon La verdad que no comprendo tu respuesta podrías ser un poco mas especifico
ResponderEliminarEs 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@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 :-?
ResponderEliminarConoces 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@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".
ResponderEliminarCuando 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
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@Carlos Pavon Gracias a ti por tus comentarios. Y seguramente seguiremos siendo amigos.
ResponderEliminarUn saludo desde la distancia
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.
ResponderEliminarHola amigo una pregunta porque la tabla pequeña no se centra en mi blog mira como queda amigo aqui una imagen
ResponderEliminarhttp://3.bp.blogspot.com/-3lsi--rfrIo/UmQsPjankOI/AAAAAAAABtU/I06NHlADyG4/s1600/1.png
@AnónimoSolo tienes que agregar la etiquetas
ResponderEliminar<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
@Fernando SalasOk gracias me funciono te lo agradesco
ResponderEliminar@AnónimoEstoy para servir en lo que puedo :)
ResponderEliminarAmigo a que se debe este problema...
ResponderEliminar1.- 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
@Juan Carlos Mira puede que tenga dos soluciones:
ResponderEliminar1º: 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
Este comentario ha sido eliminado por el autor.
ResponderEliminar