Wayback Machine; el Pasado de una Web

Si quieres saber como era una web en el pasado, ahora puedes saberlo gracias a esta interesante aplicación llamada WayBack Machine. Lo que hace es guardar en una base de datos una imagen caché de una gran cantidad de webs, para poder saber como eran en el pasado. El número de webs disponibles es muy amplio, y probablemente te sorprendas con algunas búsquedas.

Podrás notar la mejora en los diseños y aplicaciones utilizadas en internet desde hace unos años.

Una herramienta sin duda muy interesante para poder conocer algunos datos del pasado de una web.

Fuente: WayBack Machine

Los 50 Mejores Blog de Diseño

Una buena recopilación que acabo de encontrar en El50 de los 50 mejores blogs de diseño gráfico en español. Probablemente hayas encontrado muchas listas como esta con blogs en inglés, pero la verdad es que en español no se encuentran facilmente listas con blogs dedicados a un tema. Y en esta ocasión la lista es amplia y variada. Si necesitas más información para tus diseños, te aconsejo que la consultes.

Los blogs tratan diversos temas que van desde el software libre hasta la serigrafía, pasando por packaging, diseño vectorial, briefs, marketing y un largo etc. Eso si, están totalmente orientados a diseñadores gráficos. Quizás conozcas algunos de estos blogs, y los que no conozcas probablemente te resulten muy interesantes. Están los más importantes y otros menos conocidos pero de muy buena calidad. Todos los blogs incluyen una descripción, un resumen con las palabras clave principales y el enlace directo al blog. Además incluye la fuente para que puedas añadirlos directamente a tu lector de feeds y el pagerank que tiene cada blog para que puedas saber la influencia del mismo en la red. La selección es totalmente personal y no tiene que coincidir con otros criterios, pero sirve para orientarse en los blogs de diseño gráfico en español. Si conoces algún blog que no aparezca en esta lista tambien lo puedes comentar para que sea incluido.

Ver la lista completa

Fuente: El50.com

Sorteo en BarraGeek

Una interesante propuesta parte de La Barra del Geek. Un sorteo para bloggers. No abundan este tipo de iniciativas, y por eso queremos comentaros esta.

Los premios son;

1.- 10 € abonados vía paypal / transferencia bancaria

2.- Dominio + Alojamiento Web en mi servidor privado para un año

Para poder participar tienes que:

Crear una entrada en tu blog hablando de este sorteo e insertando minimo 1 enlace a la entrada del sorteo de barrageek. Después os pasais por barrageek y comentais en el post y colgais la url de la entrada que habeis creado para participar en el concurso.

El método para el sorteo se realizará de la siguiente forma:

A cada persona que participe se le asignará un número y se publicará en esta entrada. Una vez cerradas las participaciones, el sorteo se realizará en random.org el que dará un número aleatorio de los asignados a los participantes del concurso (este proceso será grabado para que no haya ninguna confusión). La fecha límite para participar es hasta el dia 15/Junio/2009.

A apuntarse, y que tengas suerte...

Vía: Colordeu.es

Fuente: Barrageek.com

Tutorial Plantillas Blogger; Modulos de Entrada Inferiores

Vamos a continuar con el Tutorial de Plantillas para Blogger, modificando el código para poder añadir más módulos a los que trae por defecto la plantilla. En este caso añadiremos hasta un máximo de cuatro módulos debajo del espacio de cada entrada del blog. Puedes ver el resultado al final del ejercicio.

Para empezar, y como ya hemos hecho en otras ocasiones, utilizaremos la plantilla por defecto que se instala con Blogger, la denominada Mínima. Antes de nada haz copia de tu plantilla actual y utiliza un blog de pruebas preferentemente.

1.- Para insertar los módulos inferiores debajo de cada entrada, buscaremos el siguiente código:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

2.-  A continuación debemos de añadir el siguiente código marcado en verde para añadir una única columna en el espacio inferior de la entrada: 

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

3.-  Para añadir dos columnas utilizaremos el siguiente código destacado en color verde:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>

</div>

<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

4.- Si lo que queremos es añadir tres columnas lo haremos añadiendo el siguiente código;

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

5.- Y si preferimos cuatro columnas en la parte inferior de cada entrada, entonces añadimos el siguiente código marcado en color verde:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

6.- Tambien puedes añadir todas las columnas como en el siguiente ejemplo:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->

<div id='main-footer-contenedor'>

<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->

<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main2-1' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main2-2' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->

<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->

<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->

</div>

Puedes modificar varios parámetros de configuración de las columnas, como son el ancho de las mismas (modificando el valor de width:) y la alineación (modificando el valor de float y text-aling).

El resultado de añadir todos los códigos sería algo similar a esto:

Esperamos que con estos ejercicios entiendas mejor el funcionamiento de los módulos superiores e inferiores de las plantillas de blogger. Si tienes alguna duda déjanos un comentario.

Tambien puedes descargar la Plantilla utilizada para este ejemplo con todas las modificaciones realizadas. Recuerda hacer una copia de tu plantilla original y utilizar tu blog de pruebas.

 Descargar Plantilla de Ejemplo

Tambien te puede interesar:

Tutorial Plantillas Blogger; Módulos de Entrada Superiores

Indice del Tutorial Plantillas Blogger

Te esperamos en la próxima entrega del Tutorial de Plantillas para Blogger.

36 Ejemplos de Buen Packaging

No es fácil encontrar buenas colecciones de diseños en packaging, por eso queríamos hacernos eco de esta recopilación que contiene un total de 36 buenos ejemplos de packaging que te inspirarán en tus trabajos.

El packaging es una de las principales característifcas de marketing y diseño; la originalidad del packaging define al producto. Un buen producto con un mal packaging es como una tortilla sin huevo. Los soportes de esta colección varían desde cajas de leche, briks, bolsas, botellas, etc.

Muchos de estos diseños te sorprenderán por su calidad.  

Vía: Frogx3.com

Fuente: Dzineblog.com

21 Packs de Iconos Sociales

Si estás necesitado de iconos para mostrar las redes sociales en las que participas, o si simplemente te apetece cambiar el aspecto de tu blog o web, aquí tienes una completa colección de 21 packs de iconos de redes sociales atrevidos y originales, esperando a ser descargados.

Aquí puedes consultar la colección completa.

Vía: Conectablog.blogspot.com

Fuente: Wpzoom.com

Congreso de Webmasters 2009

El próximo mes de octubre, entre los días 2, 3 y 4 se celebra en el IFEMA de Madrid una edición más del Congreso de Webmasters, esta vez la III Edición 2009. En la última edición acudieron más de 3000 visitantes, convirtiéndose en uno de los eventos más importantes del sector en nuestro país. Esperamos que en esta nueva edición el número de visitantes sea superado.

En esta nueva edición se pretende una participación más activa de los visitantes exponiendo sus dudas y opiniones a los expertos y haciendo uso de un sistema de votación que permite escoger lo que se quiere ver y aprender. La lista y calidad de los ponentes es extensa y variada, pudiendo encontrar desde cargos de las principales empresas de la red, hasta reconocidos bloggers y webmasters de proxectos exitosos.

Y la oferta de contenidos para esta edición ofrece servicios imprescindibles como Talleres de Posicionamiento en Buscadores, Herramientas Web, Web 2.0, Gestión Publicitaria, Blogs, Casos de sitios con éxito, Metodologías, Ecommerce, Seguridad, Legislación…. todo con talleres y charlas prácticas, y con casos reales en directo expuestos por los principales webmasters del país.

La asistencia al congreso tiene un importe de 60 euros, abonables de diferentes formas. El plazo de inscripción ya está abierto. En ese importe se incluyen las asistencias a conferencias y talleres. Si quieres aprender y conocer a profesionales del sector, esta es la mejor oportunidad, un congreso que ya se ha convertido en el más importante del sector en el país. Nos vemos el 1, 2 y 3 de octubre en el Congreso para Webmasters 2009.

Consulta el programa para conocer más sobre este congreso:

Programa Congreso de Webmasters 2009

Tambien puedes seguir el congreso a través de su cuenta en Twitter

Y si tienes alguna duda puedes resolverla en el Foro del Congreso de Webmasters.

Fuente: Congreso de Webmasters

Formularios Online

Si estás buscando para tus webs un servicio online de formularios, aquí tienes uno con una excelente calidad. Se llama FormLogix y en la versión gratuita te permite crear formularios a partir de una plantilla o de una forma personalizada con tu propia tipografía, insertar enlaces, imágenes, cuadros de texto, opciones para permitir HTML, calendarios, casillas de verificación y opción, protección contra spam y otras funciones que lo hacen muy interesante y personalizable. Además tiene soporte en español, soporte para gadgets, y multiples tutoriales para aprender a utilizarlo de forma fácil. 

Con FormLogix podrás crear formularios y bases de datos como formularios de contacto, buzón de sugerencias, formularios de registro, formularios de encuestas, formularios de votación, de compra, formularios web y cualquier otro que se te ocurra.

Y cabe destacar la compatibilidad con la gran mayoría de versiones de los navegadores más usados entre los que se encuentran Firefox, Internet Explorer, Opera, Safari y Chrome. 

Sin duda es uno de los mejores generadores de formularios que se pueden encontrar online.

Entre otras funciones encontrarás la posibilidad de

• permiten 20 sumisiones por formulario creado, los cuales se entregan en un email. 
  
• permite un aviso de correo electrónico por cada sumisión recibida, con su formulario detallado.
  
• dispone de cinco métodos diferentes para publicar formularios, como URL, Iframe, Script, link y email.
  
• puedes crear una cantidad limitada de formularios y agregar elementos en forma ilimitada.
  

A pesar de la calidad de este servicio hay que destacar algo que no juega a su favor; no es del todo gratuito, pues la versión gratuita tiene una serie de limitaciones que consisten en que al finalizar el periodo de 30 días de prueba, se anulará la opción de formularios enlazados, se eliminan las cajas de herramientas para administración de información (filtros especiales, gráficos e importación de datos) y se deshabilitarán herramientas como la impresión de reportes, restauración de admisión de datos y las opciones del submenú (editar, eliminar, añadir un comentario y visualizar en información o formato del email). Eso si, no se insertanrán avisos de publicidad por el lapso de los 30 días de prueba.

Pero a pesar de estas limitaciones es muy probable que te interese esta aplicación para administrar tus formularios online.

Para más información puedes consultar Cómo crear tu propio formulario, además de otros tutoriales sobre esta aplicación.

Fuente: FormLogix

Google Web Elements

Google dispone de un interesante servicio para insertar varias de sus aplicaciones de forma rápida y efectiva. Se denomina Google Web Elements. y nos ofrece algunas posibilidades más para mejorar nuestras webs utilizando algunos de los servicios del buscador.

Entre los 8 servicios disponibles hasta este momento tenemos Calendar, Conversation, Custom Search, Maps, News, Presentations, Spreadsheets y YouTube News. De esta foma puedes utilizar en tu web o blog cualquiera de estos servicios con solo copiar y pegar el código que se proporciona en la parte de tu diseño que creas conveniente. Puedes configurar el tamaño, el título y otras opciones similares. 

Entre los servicios disponibles tenemos

• News; que inserta las últimas noticias clasificadas por palabra clave
  
• Maps; que insertará la dirección que indiquemos
  
• Presentations; que inserta la presentación que hayamos realizado con la propia herramienta de Google
  
• Conversation; para poder mantener conversaciones sin instalar aplicaciones de chat
  
• Calendar; que inserta un calendaio indicando la URL proporcionada por el mismo
  
• Custom Search; que nos permite insertar un motor de búsqueda de una forma más rápida que el clásico que ofrecía hasta ahora Google
• SpreadSheets; que permite insertar hojas de cálculo
• Youtube News; que permite insertar videos de noticias de la plataforma Youtube

Todos estos servicios utilizan otras aplicaciones de Google, por lo cual en muchos casos es necesario estar registrado como usuario en estas otras aplicaciones.

De esta manera con Google Web Elements tenemos de forma centralizada algunos de los servicios que ofrece Google para poder empezar a utilizarlos de inmediato. Es de suponer que la lista de servicios se irá aumentando, y esperemos que traduciendo a otros idiomas.

Fuente: Google Web Elements

25 Webs con Efectos de Luz

Sin duda uno de los efectos más característicos de la llamada Web 2.0 han sido la incorporación de brillos y efectos luminosos a los diseños graficos y web en general. Y es que hay muy buenos diseñadores maestros del photoshop y dispuestos a aprovechar todas las posibilidades técnicas para llegar de una forma más original y efectiva a los usuarios de sus aplicaciones. Y es que esta tendencia visual pervivirá algún tiempo en la web. Para muestra un botón:

* Prasanna Angara Jathan

* Tim Adler

* Design Phunk

* Logo Fury

Vía: Vandelay Design

Tutorial Plantillas Blogger; Modulos de Entrada Superiores

Para iniciar nuestro tutorial sobre plantillas para Blogger, empezaremos por realizar algunos cambios básicos en la estructura principal de la plantilla. Estos cambios consisten en añadir a la estructura de nuestra plantilla una serie de módulos en la parte superior de la estructura, de tal forma que el resultado sería este:

Vamos a utilizar para este ejercicio la plantilla Mínima que viene por defecto cuando creamos un nuevo blog en blogger. Si vamos a la pestaña de Diseño y despues a Elementos de la Página, tendremos algo muy similar a esto:

1.- Para comenzar, vamos a la edición de HTML de nuestra plantilla en blogger (Diseño>Edición de HTML). Una vez allí marcamos la pestaña de Expandir Plantillas de Artilugios. Y buscamos el siguiente código

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

2.-  A partir de la línea marcada en rojo añadimos el siguiente código marcado en verde;

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top1-1' style='width: 100%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

3.-  El resultado sería el siguiente;

4.- Si lo que queremos es añadir dos columnas en lugar de una al módulo, entonces el código que deberíamos de introducir es el siguiente (buscar la línea en rojo y a continuación pegar el código en verde):

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top2-1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2-2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

El resultado para el código de dos columnas sería el siguiente:

5.- Para introducir tres columnas el código sería este:

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

6.- Y por último para introducir cuatro columnas el código que debemos de insertar es el siguiente:

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

7.- Si lo que prefieres es añadir de una sola vez todos los códigos para optimizar al máximo el diseño de tu blog, entonces hazlo añadiendo el siguiente código en verde a continuación de la linea roja;

<div id='main-wrapper'>

<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->

<div id='main-top-contenedor'>

<div id='main-top1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->

    

<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top2-1' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2-2' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->

<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->

<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

 

Puedes descargar la plantilla de ejemplo utilizada para este tutorial con todos los códigos insertados. Haz una copia de la plantilla actual y preferiblemente utiliza tu blog de pruebas.

 Descargar Plantilla de Ejemplo

Ahora solo depende de ti escoger cual es el diseño que más se adapta a tus necesidades para poder mejorar el diseño de tu blog.

Si quieres aprender más visita el Índice de nuestro

 Tutorial de Plantillas para Blogger

Te esperamos en la siguiente entrega del Tutorial de Plantillas para Blogger