 | |
 descargas |  |
| Nombre: | Bloggerest |
| Diseñador: | El Potro |
| Compatibilidad: | Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer |
| Características: | Plantilla para Blogger, 2 columnas, 980px de ancho, Entradas estilo Pinterest, Cabecera flotante, Colores minimalistas, Comentarios del autor destacados, Botones para compartir. |
| Incluye: | Plantilla XML, Instrucciones de instalación, Licencia |
Hace ya mucho tiempo que no creaba una plantilla gratuita para Blogger, así que esta vez quise darme un tiempo para poder diseñar una plantilla que pudieran descargar y usar libremente.
Bloggerest es una plantilla gratuita inspirada en Pinterest, aunque no es una réplica (ni pretende serla), ideal para blogs de fotografia, o blogs donde las imágenes juegan un rol importante.
El diseño de la plantilla es un tanto minimalista, predominan los colores rojo y blanco con un toque de gris. El título del blog así como los títulos de los gadgets usan una fuente tipo caligrafía para darle un aire elegante.
La cabecera ocupa el 100% del ancho de la página al mismo tiempo de ser flotante. Las imágenes en la portada tienen opacidad al pasar el cursor y éstas conducen a la entrada al dar click sobre ellas, también muestra la miniatura del video cuando están alojados en YouTube y cuando no hay una imagen que lo antecede.
Este es un ejemplo de una entrada donde se puede apreciar cómo se visualizan los bloques entrecomillados, las listas numeradas, las listas con viñetas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.
La cabecera ocupa el 100% del ancho de la página al mismo tiempo de ser flotante. Las imágenes en la portada tienen opacidad al pasar el cursor y éstas conducen a la entrada al dar click sobre ellas, también muestra la miniatura del video cuando están alojados en YouTube y cuando no hay una imagen que lo antecede.
Este es un ejemplo de una entrada donde se puede apreciar cómo se visualizan los bloques entrecomillados, las listas numeradas, las listas con viñetas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.
Personalización:
La cabecera tiene un alto de 124px por lo que se recomienda usar un logotipo que no exceda esa medida.
El menú de la plantilla es el menú horizontal con subpestañas y buscador integrado, por lo que en esa entrada podrás ver un poco más sobre su personalización. En la plantilla puedes identificar el menú por la etiqueta <div id='menuWrapper'>
La forma de redactar las entradas es igual que como lo harías siempre, sin embargo, en caso de que tu entrada sólo contenga una imagen, o un video, sin nada de texto, tendrás que dar uno o más saltos de línea (ENTER) al final del código de tu imagen o de tu video, ya que si no lo haces la imagen no se formará en miniatura y se distorcionará.
El menú de la plantilla es el menú horizontal con subpestañas y buscador integrado, por lo que en esa entrada podrás ver un poco más sobre su personalización. En la plantilla puedes identificar el menú por la etiqueta <div id='menuWrapper'>
La forma de redactar las entradas es igual que como lo harías siempre, sin embargo, en caso de que tu entrada sólo contenga una imagen, o un video, sin nada de texto, tendrás que dar uno o más saltos de línea (ENTER) al final del código de tu imagen o de tu video, ya que si no lo haces la imagen no se formará en miniatura y se distorcionará.
Es compatible con todos los navegadores más conocidos (arriba se especifica cuáles) según la última versión actual de cada uno de ellos.
El sistema magazine que utiliza permite mostrar muchas entradas en la portada ya que en la portada las entradas no cargan de forma completa, permitiendo agilizar la carga del blog. Las pocas imágenes que usa la plantilla están alojadas directamente en base 64 por lo que no dependerás de ningún servicio externo para cargarlas.
Espero que sea de su entero agrado, que la disfruten, y que no retiren los créditos :P
ACTUALIZACIÓN 4/abr/2013
Si en la pestaña Diseño no ves la sidebar, entra en Plantilla | Edición de HTML y elimina estas partes en color rojo:
<b:if cond='data:blog.pageType != "index"'>Eso hará que la sidebar aparezca en la sección Diseño. Si notaras que con ese cambio tarda un poco más en cargar la portada del blog, o si aparecen menos entradas, pon de nuevo ese código después de haber hecho todas las modificaciones deseadas en la sidebar.
<b:if cond='data:blog.pageType != "archive"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' mobile='yes' title='Categorías' type='Label'/>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div>
</b:if>
</b:if>
</b:if>
ACTUALIZACIÓN 12/abr/2013
Se ha modificado la plantilla para resolver el problema de las entradas que tenían añadido el salto de línea (Leer más) manualmente. También se ha agregado un enlace a la imagen predeterminada para las entradas que no tienen una imagen.
No hay comentarios:
Publicar un comentario