Cómo crear un template estilo magazine en Blogger.
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Estos días he estado releyendo antiguos posts y buscando información para ponerme al día sobre los acontecimientos ocurridos en la blogosfera durante todo el tiempo que he estado ausente. Mientras rastreaba la red en busca de nuevos themes para Wordpress, blogs sobre recursos, templates para Blogger… pensé en como se podría crear un template para esta plataforma que tuviera un estilo similar al Magazine o revista, tan popular entre los diseños publicados últimamente.
Como se puede observar a simple vista en cualquier theme estilo magazine, la estructura de la página principal suele estar compuesta por un header más o menos amplio con menús de navegación, un post destacado en la página principal, una columna derecha dividida en varias secciones y multitud de apartados situados en la parte inferior del contenido en los que se destacan posts anteriores, artículos populares, tutoriales… En Blogger, a pesar de tener ciertas limitaciones, es posible asemejar el diseño de la plantilla al de un auténtico template estilo magazine haciendo que esos widgets que contienen información adicional, aparezcan en la página principal del blog y se oculten en las de los posts individuales del mismo.
Introduciendo el código HTML.
Para ello, basta con tener algunos conocimientos básicos sobre el manejo HTML de Blogger (si eres nuevo en Blogger o no conoces demasiado su codificación, es aconsejable que le eches un vistazo a esta serie de posts) y utilizar la siguiente línea de código, cuya función es determinar que secciones aparecerán únicamente en la página inicial del blog:
</b:if>
Si te fijas bien en este código, seguramente te darás cuenta de que lo que hace es establecer una condición por la cual, aquello que se encuentre dentro del mismo, sólo se mostrara en la “home page” o página de inicio del blog. Ahora es necesario encontrar la etiqueta div del código HTML (body) que hace referencia a los posts de tu blog, con el fin de añadir las nuevas secciones y condicionarlas con el atributo anterior. En la mayoría de las plantillas, esta etiqueta div suele llevar el nombre de content, main, main-wrapper… y está compuesta por una sección y un widget que contiene las entradas del blog:
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Entradas del blog’ type=’Blog’/>
</b:section>
</div>
Una vez que la hayas encontrado, podrás agregar las nuevas secciones inferiores en las que aparecerán los widgets o elementos de página colocando el código señalado en negrita después de la etiqueta </b:section> y antes de la etiqueta </div>. Observa que cada una de ellas tiene unos id diferentes, utilizados para darles estilo mediante el código CSS:
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Entradas del blog’ type=’Blog’/>
</b:section>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<b:section class=’magazine’ id=’magazine-uno’ showaddelement=’yes’ >
</b:section>
<b:section class=’magazine’ id=’magazine-dos’ showaddelement=’yes’ >
</b:section>
<div style=”clear: both;”></div>
</b:if>
</div>
Si accedes al apartado de elementos de página en Blogger, verás que ahora aparecen dos nuevas secciones bajo las entradas del blog en las que puedes instalar tantos gadgets como quieras para mostrar los últimos artículos, posts más populares, resúmenes y enlaces a otros posts, anuncios…
Añadiendo estilos CSS.
Posteriormente, una vez que hayas insertado los elementos de página será necesario determinar el estilo CSS de las clases y etiquetas utilizadas, con el fin de integrarlos con el diseño y la estructura del resto del blog. En este caso, el nombre de las etiquetas correspondientes a las nuevas secciones son magazine, magazine-uno y magazine-dos, por lo que serán estas las que debamos usar para estilizar el contenido de los widgets instalados, sus títulos, textos, imágenes… Por ejemplo:
line-height: 20px;
text-align: justify;
}
.magazine h2 {
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-transform: uppercase;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
}
.magazine p {
padding: 0px;
margin: 0px;
line-height: 20px;
}
.magazine ul {
list-style: none;
margin:0 0 10px 0;
padding:0;
}
.magazine ul li {
list-style: none;
margin:0;
padding:0 0 0 18px;
}#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}
Sería aconsejable que los widgets de estas secciones tuvieran el mismo estilo que el aplicado al sidebar del blog, por lo que podrías copiar los atributos generales del sidebar y pegarlos en los valores anteriores referentes al texto, las listas o títulos de los widgets.
Por último, si lo que realmente quieres es conseguir un diseño lo más parecido posible al de un theme estilo magazine, puedes modificar la configuración (configuración > formato) de las entradas del blog de forma que sólamente se muestre una entrada en la página principal, incluyendo el resto de ellas en tus nuevas secciones mediante las listas del feed RSS. También puedes optar por mostrar unas 4 ó 5 entradas y delimitar su tamaño en la página principal, usando el enlace de “leer más” explicado paso a paso aquí o aquí.
Aquí puedes ver el resultado obtenido en una de las plantillas para Blogger que están disponibles en este blog, al adherir 3 secciones inferiores con el mismo estilo que las del sidebar.
Si tienes cualquier duda, sugerencia o simplemente deseas compartir tu experiencia no dudes en dejar tus comentarios.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
27 Comentarios
Gracias amigo, me alegro de que te guste 
Hola Iván,
Hay alguna manera de que nos mande la plantilla Revolution, ya creada con los otros artilujos ya puestos? Te agradeceria ya que no se donde o como colocar los demas codigo y no me sale bien.
Muchas gracias
Sendo bem sincera eu não bonito templates estilo magazine.
Fica uma sensação de “bagunça”.
Hola Andres! Si, no hay problema. Puedes enviarme un e-mail a través de la página de contacto para conocer tu dirección y te responderé adjuntando la plantilla con las modificaciones incluidas.
Saludos!
Antes de nada, un gusto volver a leerte y una sorpresa muy agradable saber que vuelves. Estoy de acuerdo con la opnion de un comentario. Es decir, podias tirarte un largo, y colocar la plantilla ya realizada, con algun toque tuyo. Todos estariamos encantados, y todos te invitariamos a un trago. Asi que..ala. a currar. Saludos.
hola mi tesoro nuevamente!!!, que me salgo de mi cuerpo de la alegría de verte!!!
Ahora con lo poquito que he aprendido, puedo entenderte jajaja…aunque hay muchísimas plantillas bellísimas, intento crear la mía despacito, el html me encanta!!!…mis besos 
Kanalla. Muchas gracias. Tendré en cuenta esa opción y reeditaré la plantilla si encuentro un hueco en mi apretadísima agenda.
Graciela. Hola querida amiga! Yo también me alegro mucho de volver a verte. Seguro que ya eres toda una artista sobre todos estos temas jeje. Con paciencia todo se consigue. Un besito!
Saludos!
Muy buen tutorial , saludos!!!
Hola ivan soy Andres desde la Republica Dominicana, hace dias te escribi para que me mandaras esta plantilla y me pediste que te escribiera por otra parte y asi lo hice, te escribi por donde me habias dicho por lo de la plantilla pero aun estoy esperando que me la mandes.
Nuevamente te agradeceria si me ayudas y me puedes mandar esta plantilla ya completada.
Muchas gracias hermano.
Saludos
Andres Enc
Hola Andrés! Siento mucho la tardanza en contestar, estaba dedicando todo mi tiempo a retomar el blog y a publicar la nueva plantilla “Angel”. Tenía pensado hacer un template estilo magazine desde 0 y publicarlo, por eso no te la envié antes pero de momento no dispongo de tiempo suficiente para ello. Así que ya te la he enviado a la dirección de e-mail que me proporcionaste y la incluiré para su descarga en el post de la plantilla.
Saludos!
Esto me sirve para cambiarle la plantilla a mi Blog de noticias deportivas, ahora que tenga un tiempito libre me coloco a modificarla.
En el siguiente blog:
recuerdo que se liberó una plantilla muy “currada” para blogger estilo magazine.
Ahora no está disponible pero supongo que si se “googlea” se encontrará en la red.
hola ivan como estas? te hago una consulta chequeando la plantilla de mi blog, vos decis que que se pueden realizar los cambios tambien con ese?
Hola! Claro, en tu plantilla también se podría hacer. Tan sólo deberías crear una nueva sección donde poder añadir widgets, situada entre el espacio donde acaban tus posts de la página principal y el footer donde muestras los 3 bloques con enlaces.
Un saludo
Otimo… ja tinha visto esse tutorial por ai, mas é bom saber que voce postou tambem!! xD
como siempre no me salio!!
che ivan, me decis cual es problema?
Ves como quedaron las secciones? como lo corrijo?, igual trate de hacer algo para que quede prolijo mientras
Veo que te han quedado alineadas horizontalmente en lugar de en bloques. Puedes solucionarlo estableciendo una clase CSS para cada una de esas secciones e incluyendo en ellas el comando “float” (left o right). Por ejemplo, en el caso de la plantilla Revolution que yo modifiqué, a las 3 secciones les apliqué el ID magazine-left, magazine-mid y magazine-right respectivamente.
En el código CSS, además de utilizar la clase .magazine para personalizar las listas, títulos y el texto de los widgets, añadí lo siguiente:
#magazine-left {
width: 160px;
float: left;
margin: 0 10px 0 0;
}
#magazine-mid {
width: 160px;
float: left;
margin: 0 10px 0 0;
}
#magazine-right {
width: 160px;
float: right;
}
Espero que te sirva de ayuda 
Saludos!
ya no se que hacer conmigo no me funciono!! 
Hola Iván,
Enhorabuena por este espacio tan divulgativo. Quería hacerte una consulta. No domino mucho el código html de blogger, y aunque es un programa sencillo si te basas en una plantilla, a veces resulta difícil de personalizar. Estoy utilizando la plantilla Revolution pero no sé cómo añadir un nuevo elemento (gadget) en el footer. Supongo que hay que añadir algún código en la plantilla, pero no sé dónde. ¿Podrías detallarlo? Gracias por adelantado.
Hola Juan!
Muchas gracias. Seguramente hoy mismo si me da tiempo publique un post para solucionar tu problema, por lo que te agradezco la inspiración
En la plantilla Revolution, el footer únicamente está formateado para alojar los enlaces de los créditos y el texto del pie de página. Aunque si quieres puedes insertar la nueva sección justo encima del div con el id “footerbg”. Para ello, tienes que agregar lo siguiente en el código HTML sin expandir la plantilla de artilugios:
<div id=’tufooter’>
<b:section class=’clasefooter’ id=’clasefooter’ preferred=’yes’ showaddelement=’yes’>
</b:section>
</div>
Tanto el id “tufooter” como la clase y el id de la sección “clasefooter”, puedes reemplazarlos por los nombres que desees, siempre que el del div y el de la sección sean distintos. La clase y el id de la sección en cambio si deben ser iguales.
Si ahora accedes al panel de edición de elementos, verás que aparece una nueva sección por encima del footer en la que podrás añadir más gadgets.
Espero que te sirva de ayuda.
Un saludo!
una consulta maestro, como hago para tener dos columnas en la parte de entradas del post, para q tenga un estilo diario digital
Codigo 1:
codigo 2:
tengo entendido que el codigo 1 solo se va a ver solo en las paginas de las entradas y el codigo 2 solo se ve en la pagina principal, la pregunta es como hago para reemplazar el codigo 2 con el 1 en el ejemplo de la plantilla ya que yo quiero hacer lo inverso al ejemplo??
espero su respuesta de antemano gracias Ivan.
Mejor forma de empezar imposible, muy buen tutorial!