Archivo de la categoría ‘Plantillas para Blogger’
Template Framework ZC, el primer framework para Blogger
Blogger Framework es un template para Blogger que he transformado a partir de la plantilla original Minima diseñada por Douglas Bowman. Un framework es una estructura predefinida que sirve como base, patrón o modelo sobre el que comenzar a diseñar un proyecto, una página o el aspecto de un blog de Blogger en este caso, pues esta plantilla prácticamente en “blanco” sin widgets, variables, colores, bordes y objetos complementarios, es la que he utilizado hasta el momento para ahorrar tiempo al adaptar todas y cada una de las plantillas para Blogger publicadas.
Si empleas este framework en la construcción de tu plantilla, no es necesario que incluyas ningún enlace hacia este blog, aunque sería una buena forma de agradecimiento por compartirla de forma desinteresada.
Descarga
Actualmente, estoy preparando un tutorial relacionado con el diseño en Blogger que quizás tarde varios días en terminar, en el que también usaré esta plantilla como base.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Conservative American
Tras las interrupciones de trabajo producidas por la Semana Santa y otras circunstancias laborales, al fin consigo publicar esta plantilla para Blogger de 2 columnas basada en el theme Conservative American diseñado por Jeremy Buff. A pesar de tener un título con el que no me siento identificado (americano conservador), tengo que decir en favor del autor que me fascinó su estructura, funcionalidad y personalizable aspecto.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Cambios en Zona Cerebral: slideshow y página de plantillas adaptadas
Esta semana he estado trabajando sobre dos tareas que tenía pendientes desde hace algún tiempo: crear una sección deslizante y una página individual en las que catalogar todas las plantillas para Blogger adaptadas durante estos dos años. El objetivo de estas modificaciones es el de facilitar la búsqueda, visualización y descarga de las plantillas a los usuarios que acceden al blog en busca de plantillas para Blogger y en general, mejorar la usabilidad de la página.
El nuevo slideshow situado debajo del título del blog se basa en la combinación del slider desarrollado por Chris Coyier Moving Boxes con uno de los formatos de galerías de imágenes CSS publicados en Web Designer Wall. La verdad es que no ha sido fácil adaptar el script al contenido que pretendía mostrar, aunque con tiempo y paciencia todo es posible. En los próximos días compartiré con todos vosotros los pasos seguidos para obtener este resultado.
De paso, aproveché la ocasión para renovar el menu de navegación y darle un estilo más acorde a los cambios del diseño que iré llevando a cabo en los próximos meses, con el fin de reducir el tiempo de carga de la página, ahora ligeramente incrementado tras la incorporación del script anterior. El código y las imágenes originales del menu proceden de la página de stilos CSS gratuitos 13Styles.
Por supuesto, vuestra opinión es esencial para mejorar cada día, así que os agradezco enormemente cualquier crítica, sugerencia o comentario que hagáis al respecto. Si lees este post a través del lector de feeds, no te olvides de echar un vistazo y compartir tus impresiones. ¡Gracias!
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Magazeen
Smashing Magazine, el blog sobre diseño y recursos conocido por toda la blogosfera, publicó el pasado 23 de febrero el precioso theme para WordPress estilo magazine diseñado por WeFunction titulado Magazeen. Tras superar algunas dificultades en la adaptación y después de bastantes horas de trabajo, Magazeen ya está disponible para ser usada como plantilla en Blogger.
El template se comparte de forma gratuita bajo licencia Creative Commons, lo que significa que el único requisito para utilizarla consiste en mantener los créditos o enlaces correspondientes a Smashing Magazine, WeFunction y Zona Cerebral situados en el pie de página del diseño, como reconocimiento de los derechos de autor de los mismos.
Descarga
Edicion
Entra en el modo de edición HTML de la plantilla en Blogger y edita las zonas del diseño señaladas a continuación:
Header. Sustituye el texto de la descripción (h2) y el texto y enlace del título (h1) en este bloque de código situado bajo la etiqueta <body> de tu plantilla:
<div id='logo'> <h2>Amarás esta plantilla. ¡Te lo prometo!</h2> <h1><span/><a href='http://magazeenzc.blogspot.com/' title='Magazeenzc'>Magazeen</a></h1> </div><!-- End logo -->
Buscador. Por debajo del código anterior, añade la dirección url de tu blog terminada en /search/ en el atributo “form action” correspondiente a la caja de búsqueda mostrada en el header del diseño:
<form action='http://magazeenzc.blogspot.com/search/' class='clearfix' id='searchform-header' method='get'>
<input id='s' name='q' onblur='if (this.value == '') {this.value = 'Search';}' onfocus='if (this.value == 'Search') {this.value = '';}' type='text' value='Search'/>
<input alt='Search' id='go' src='http://img156.imageshack.us/img156/7381/search.gif' title='Search' type='image'/>
</form><!-- End searchform -->
Menu. Un poco más abajo, en el div con el id “navigation”, reemplaza cada enlace señalado con el símbolo # en los elementos de lista “li” por las direcciones url de tus enlaces. No olvides modificar también la dirección url del vínculo con la clase “rss”, insertando la dirección del feed RSS de tu blog.
Artículos destacados. Por defecto, el diseño original cuenta con una sección que muestra los ultimos artículos publicados representados en pequeñas imágenes, construido mediante algunos scripts y varias líneas de código php. En Blogger no cabe esta última opción, por lo que decidí añadir los scripts y crear un código similar que igualmente muestre los artículos e imágenes del blog de tu elección. Las instrucciones de instalación son:
- Descarga los archivos en formato Javascript contenidos en el archivo comprimido en formato RAR disponible en los enlaces de descarga.
- Entra en GooglePages (crea una cuenta si aún no estás registrado) y sube allí los 4 archivos.
- Vuelve al panel de edición HTML en Blogger y justo encima de la etiqueta </head>, pega las direcciones de los scripts alojados en GooglePages. Por ejemplo: <script src=’http://tu.googlepages.com/pngfix.js’/>
- Busca el div con el id “latest-dock”. Si lo consideras necesario, puedes editar el título de la sección cambiando el texto delimitado por <div class=’latest’>Visita nuestros artículos destacados:</div>. Cada elemento de lista “li” de los códigos siguientes, incluye un enlace indicado con el símbolo # (sustitúyelos por los enlaces de tus posts), una descripción del enlace que se muestra al pasar el ratón por encima (atributo title), una imagen de 69 píxeles de ancho por 54 píxeles de alto (cambia las direcciones del atributo src por las de tus imágenes) y un título que aparece en la parte superior al colocar el ratón encima de las imágenes, delimitado por la etiqueta <span>.
Leer más. El diseño de los artículos cuenta con un enlace “Continuar leyendo” y con un sistema para mostrar sólo una parte del texto al visualizarse en la página inicial, encontrándose el post completo en las página individual del mismo. Para utilizarlo en tus entradas, basta con que delimites la parte del post que quieras ocultar con la etiqueta <span class=”fullpost”></span>. Por ejemplo:
<span class="fullpost">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent id enim rhoncus libero interdum luctus. Nam id nunc. Nullam pharetra elit quis ipsum. Phasellus sed enim. Nulla facilisi. Ut pellentesque risus eget felis. Aliquam egestas nibh id metus. Phasellus eleifend nisi at ante. In hac habitasse platea dictumst. Nunc auctor ligula eget felis. Phasellus posuere, tellus nec nonummy venenatis, felis elit porttitor mauris, vitae tincidunt enim magna a eros. Mauris elit est, aliquam et, porttitor eu, dapibus interdum, augue. Morbi aliquet rutrum sem.</span>
Footer. Busca el div con el id “footer” casi al final de la plantilla. Dentro de este, puedes modificar el título de la sección izquierda editando el texto comprendido entre las etiquetas <h4></h4> del div con la clase “categories”, y por supuesto los enlaces señalados con el símbolo # de los elementos de lista “li” inferiores. La sección derecha está constituida por un título delimitado por las etiquetas <h4></h4> igual que en el caso anterior, situado en el div con la clase “about” y seguido de un párrafo de texto descriptivo.
Ocho líneas por encima del final de la plantilla, hay un nuevo enlace con la clase “rss” vinculado al feed RSS del blog en el que has de insertar la dirección del tuyo en la posición indicada con el símbolo #.
Entradas del blog
Dirígete al panel de elementos de página en Blogger y selecciona las siguientes opciones y alineaciones editando el elemento correspondiente a las entradas del blog:
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Compositio
A comienzos de este mes, DesignDisease nos sorprendía una vez más con el fantástico diseño de Compositio, un theme para WordPress que ahora también puedes disfrutar en Blogger descargando la plantilla a través de los enlaces de este post. El diseño está inspirado en un estilo pixelado y estructurado en 2 columnas con varias secciones diferenciadas, decorado con una preciosa combinación de tonos azulados.
Al igual que el resto de plantillas publicadas en el blog, esta también puedes descargarla de forma gratuita bajo licencia Creative Commons. Es decir, que puedes usarla de forma totalmente gratuita siempre y cuando no la uses con fines exclusivamente comerciales y mantengas los enlaces del pie de página correspondientes a los créditos, como reconocimiento de los derechos de autor de DesignDisease, Zona Cerebral y Premium Themes.
Descarga
Edicion
Menu. Accede al modo de edición HTML de la plantilla en Blogger y, en el body de la misma, modifica los enlaces señalados con el símbolo “#” de la capa div con la clase “menu”.
Header. El autor del diseño ha previsto dos posibilidades sobre esta sección, permitiendo mostrar o bien una imagen de título o bien un título de texto junto con la descripción. En la plantilla, he optado por la primera opción, que puedes personalizar sustituyendo el enlace indicado con el símbolo “#” hacia la página inicial de tu blog y la dirección url de tu imagen (puedes descargar el logo en formato PSD en los enlaces de descarga) situados ambos en el div con la clase “img”, dentro del div con la clase “logo”. Por el contrario, si quieres mostrar el título mediante texto, has de eliminar el div “img” y pegar lo siguiente en su lugar:
<div class="txt"> <h1><a href="http://direccióndetublog">Título de tu blog</a></h1> <p class="desc">Descripción de tu blog</p> </div>
Fecha. En el panel de Blogger, dirígete a Configuración > Formato > Formato de cabecera de fecha y selecciona la penúltima opción, para ajustar el formato de la fecha de los posts al prediseñado en la plantilla.
Sidebar. La estructura de la columna derecha es algo más compleja que la establecida en otros diseños, ya que está formada por 6 secciones con diferentes imágenes de fondo desde las que añadir elementos de página o widgets, divididas en 3 divs con los ID SR, SR2 y SR3 cuyos contenidos se detallan a continuación.
Buscador. Entra en el panel de edición de elementos de página e inserta un widget HTML/Javascript en la primera sección situada en la parte superior del sidebar. Copia y pega el siguiente código, sustituyendo la url del form por la de tu blog terminada en /search/ (importante) y los símbolos “#” por los enlaces del feed de tus posts y de los comentarios del blog:
<form action="http://compositiozc.blogspot.com/search/" method="get"> <fieldset> <input value="search" name="q" type="text"/><button type="submit">Search</button> </fieldset> </form> <div class="syn"> <ul> <li><a href="#">Entradas</a> (RSS)</li> <li><a href="#">Comentarios</a> (RSS)</li> </ul> </div>
Sobre mi. En la segunda sección del panel de elementos de página, agrega un gadget HTML/Javascript e introduce el contenido de texto que desees, delimitado por las etiquetas de párrafo <p> y </p>. También puede ser un buen lugar en el que incluir tu perfil de Blogger o una descripción del blog.
Photostream. Si quieres que el diseño de la plantilla se asemeje todo lo posible al del theme original, añade un elemento de página HTML/Javascript en la tercera sección del sidebar, pegando el siguiente bloque de código correspondiente a una galería de imágenes procedentes de Flickr:
<table id="flickr_badge_uber_wrapper" border="0" cellpadding="0" cellspacing="10"> <table border="0" id="flickr_badge_wrapper" cellpadding="0" cellspacing="10"> <tr> <script src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=4&display=latest&size=s&layout=h&source=all_tag&tag=wordpress&user=34521973%40N04" type="text/javascript"></script> <td id="flickr_badge_source" valign="center" align="center"> </td> </tr> </table> </table>
Por defecto, instalando este código se mostrarán imágenes de Flickr filtradas con el tag “wordpress”. No obstante, si deseas mostrar imágenes filtradas con una etiqueta diferente tienes que reemplazar la etiqueta “wordpress” de la línea del script anterior. Si por el contrario, tu intención es mostrar únicamente tus propias imágenes de usuario en Flickr has de reemplazar la línea del script por la siguiente, modificando el valor correspondiente al usuario (user=…”) por el que obtengas en el último paso del servicio de instalación de badges en la web:
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=s&layout=h&source=user&user=34521973%40N04"></script>
A pesar de todo, si sigues teniendo problemas en relación con este código puedes echarle un vistazo a esta entrada explicativa sobre cómo insertar y personalizar una galería de imágenes de Flickr en Blogger.
Categorías y Archivos. A diferencia de las anteriores, la cuarta y la quinta sección del sidebar se encuentran agrupadas dentro de una misma capa div con el ID “SR2″. Ambas están optimizadas para albergar listas de enlaces o contenidos similares, como por ejemplo los archivos del blog o el blogroll.
Tabs. Antes de insertar el código HTML relativo al recuadro de pestañas, es necesario que descargues el script contenido en el archivo con el formato RAR disponible en los enlaces de descarga y lo alojes en cualquier servicio de hosting (gratuito o de pago) que te permita enlazarlo y activarlo de forma externa, como Google Pages por ejemplo (recomendado). Hecho esto, en el panel de edición HTML busca el script situado justo encima de la etiqueta </head> y sustituye la dirección url del script por aquella en la que hayas subido el archivo tabs.js. Por ejemplo:
<script src='http://tu.googlepages.com/tabs.js' type='text/javascript'/>
En la sexta y última sección de la columna lateral derecha, instala un nuevo elemento de página HTML/Javascript y pega este bloque de código:
<ul class="tabs"> <li><a class="active" href="#tab-comments">Enlaces</a></li> <li><a href="#tab-posts">Sponsors</a></li> <li><a style="margin-right:0px;" href="#tab-tags">Tags</a></li> </ul> <ul id="tab-comments"> <li><a href="http://zonacerebral.com">Plantillas para Blogger</a></li> <li><a href="http://videoblogic.com">Videos musicales</a></li> <li><a href="http://blogsindependientes.com">Blogs independientes</a></li> <li><a href="http://forosdelblog.com">Foros del blog</a></li> </ul> <ul id="tab-posts"> <li><a href="http://tinyurl.com/33p4pq">Text-Link-Ads</a></li> <li><a href="http://www.linklift.es/?ref=a98a7a64399">Linklift</a></li> <li><a href="http://www.bidvertiser.com/bdv/bidvertiser/bdv_ref.dbm?Ref_Option=adv&Ref_PID=66840">Bidvertiser</a></li> <li><a href="http://www.linkworth.com/?a=4171">LinkWorth</a></li> </ul> <div id="tab-tags"> Aquí puedes instalar un script con tu nube de tags </div>
Los tabs o las pestañas del recuadro están construidas mediante dos listas ul y un div con los ids tab-comments, tab-posts y tab-tags (señalados en negrita). Puedes modificar a tu gusto los enlaces contenidos en cada uno de estos tres bloques, así como los títulos de las pestañas establecidos en la lista ul superior con la clase “tabs”.
Entradas del blog. Edita el elemento de página correspondiente a las entradas del blog en el panel de elementos de página y establece las siguientes opciones y alineaciones de las etiquetas:
Última actualización:
- 17-03-2009. Solucionado el problema de visualización de la fecha únicamente en el último artículo publicado. Gracias a Ocell por el aporte.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Blogger Buzz comparte el amor por los templates
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Esta tarde, mientras leía algunos artículos que tenía pendientes en Google Reader, me llevé una grata sorpresa al detenerme en el blog de Claudia, la Chica Blogger que escribió para Zona Cerebral el mes pasado durante mi ausencia. Resulta que Rick Klau, uno de los miembros del equipo de Blogger en Google, ha publicado en el blog oficial de esta plataforma una lista con los 12 sitios más recomendados por los usuarios desde los que descargar plantillas para Blogger. Quisiera compartir con todos vosotros el honor y la gran satisfacción que ha sido para mi comprobar que Zona Cerebral se encuentra en esa lista (mostrada a continuación) junto con grandes compañer@s y amig@s como son BTemplates y Chica Blogger, a la que agradezco de todo corazón que recomendara este blog en los comentarios del post de Rick Klau.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!