Ya tengo lista la primer versión de la plantilla Cocinando con Adela que ya te había mencionado antes, es una plantilla pensada en blogs de cocina, puedes personalizar la imagen de la cabecera con tu logo, con una imagen propia, o bien no poner ninguna.
También es una plantilla versátil como la plantilla Versatile, ya que podrás cambiar los fondos de ciertos elementos, como el color de fondo del menú, fondo de la galería de imágenes miniaturas de tus entradas populares, etc, desde el Diseñador de Plantillas, de ese modo, la plantilla tendrá una apariencia diferente cada vez que lo quieras, y podrás darle tu toque personal fácilmente, sin ingresar a la edición de HTML de la plantilla, así que a divertirse ;)
Para Ingresar al Diseñador de Plantillas, necesitas ir a Plantilla > Personalizar > Avanzado y desde ahí hacer los cambios que desees.
Características
- Plantilla de 2 columnas
- Menú desplegable
- Resumen automático en las entradas
- Buscador Integrado en el header
- Mucho espacio para colocar gadgets
- Sección especial para agregar banner publicitario el el heaer de 468x60 pixeles
- Secciones especiales para agregar banners de 125x125 pixeles (agregas gadget de imagen y pones el enlace)
- Sección especial para mostrar tres gadgets de forma alterna
- Sección especial para mostrar galería de imágenes en miniatura del gadget de Entradas populares
- Tres columnas adicionales en el Footer
Tendrás mucho espacio para colocar gadgets, como puedes ver en la imagen:
Como Personalizar la imagen de la cabecera o header
Lo puedes hacer de dos maneras, la primera, es colocar una imagen en el #outer-wrapper, en donde actualmente muestra esa imagen de los sartencitos que puse en la demostración, la ventaja de ponerla ahí, a diferencia de subirla desde Diseño en la sección de la cabecera, es que la imagen puedes ser tan grande "de alto" como desees, ya que no está limitada al alto del header. En cuanto al ancho, no debería superar los 990 pixeles que tiene definido. Te recomiendo usar como fondo la imagen del body (el pattern), en el editor que uses, o bien usar una imagen con fondo transparente.
La otra forma, es ir a Diseño y subir la imágen que quieras desde la sección de la cabecera, donde puedes elegir que se muestre en lugar del título y la descripción, debajo de estos etc. Puedes mover dicha imagen por medio del #header-inner.
Como editar el Menú de navegación
Esta es la estructura que tiene el menú desplegable, y que necesitas que editar, he resaltado de rojo lo que necesitas cambiar:
<!-- Empieza Menú Desplegable -->
<div class='nav'>
<ul class='menu' id='menu'>
<li class='nodiv'><a class='nodiv' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li>
<a class='desplegable' href='#'>Entradas</a>
<ul>
<li><a href='#'>Ensaladas</a></li>
<li><a href='#'>Aderesos</a></li>
<li class='submenu'>
<a href='#'>Sopas »</a>
<ul>
<li class='noborder'><a href='#'>Sopas 1</a></li>
<li><a href='#'>Sopas 2</a></li>
<li><a href='#'>Sopas 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Platillos</a>
<ul>
<li><a href='#'>Platillo 1</a></li>
<li><a href='#'>Platillo 2</a></li>
<li><a href='#'>Platillo 3</a></li>
<li class='submenu'>
<a href='#'>Guisos »</a>
<ul>
<li class='noborder'><a href='#'>Guiso 1</a></li>
<li><a href='#'>Guiso 2</a></li>
<li><a href='#'>Guiso 3</a></li>
<li><a href='#'>Guiso 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Postres</a>
<ul>
<li><a href='#'>Panes</a></li>
<li><a href='#'>Pasteles</a></li>
<li><a href='#'>Helados</a></li>
<li><a href='#'>Galletas</a></li>
<li><a href='#'>Gelatinas</a></li>
</ul>
</li>
<li>
<a href='#'>Otras</a>
<ul>
<li><a href='#'>Otras 1</a></li>
<li><a href='#'>Otras 2</a></li>
<li><a href='#'>Otras 3</a></li>
</ul>
</li>
<li>
<a class='last' href='#'>Favoritos</a>
<ul>
<li><a href='#'>Favorito 1</a></li>
<li><a href='#'>Favorito 2</a></li>
<li><a href='#'>Favorito 3</a></li>
<li><a href='#'>Favorito 4</a></li>
</ul>
</li>
</ul>
Ya deje el menú con algunos textos para los enlaces que tendrás que editar, poniendo tus propios textos y la dirección web a donde quieres que se dirija al hacer click sobre este.
Simplemente sigue cada linea de código y dentro de la linea debe estar el texto y la dirección web.
Ejemplo:
<li><a href='#'>Favorito 1</a></li>
Donde esta la almohadilla '#' pones el enlace en sustitución a este, recuerda quitar la almohadilla de otro modo no funcionará, sólo debe estar el enlace.
Y donde dice Favorito 1, pones el texto del enlace.
Cómo configurar la fecha de los posts
Necesitas ir a Configuracion > Idioma y Formato (en la nueva interfaz) y en Formato hora, seleccionarla como se muestra en la imagen:
*Varía según la fecha actual.
Cómo agregar los banners publicitarios
Sólo necestitas agregar la imagen en el gadget de "Imagen" en las secciones correspondientes, y agregar el enlace para dicha imagen en la configuración.
Cómo agregar últimas entradas con miniatura
Desde diseño, haz click en el gadget de Lista de Blogs y agrega el siguiente enlace de forma repetitiva, cambiando el número marcado de rojo cada vez que agregues el enlace, (el primer enlace 1, luego 2, después 3...) cada enlace sirve para que se muestre una entrada, y vas a poner tantos enlaces como entradas quieras mostrar.
http://Nombreblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1
Deberás configurarlo para que muestre el titulo y la imagen miniatura. Todas mostrarán el enlace a la entrada que dice: "Ver artículo".
Configurar el gadget de entradas populares (galería de miniaturas) para que muestre el tooltip
Necesitas configurar el gadget de entradas populares, para que muestre solamente la miniatura, no marques la casilla del fragmento, de ese modo se verá el tooltip con el título de la entrada.
Cómo mostrar la Evaluación de Estrellas
Para agregarlo, solo necesitas ir al Diseño de la plantilla y hacer click en la sección de la Entradas y marcar la casilla para que se muestre:
Este elemento estuvo por un tiempo en periodo de prueba desde Blogger in Draft, luego lo pasaron a Blogger, y después lo regresaron, ahora, según compruebo no necesitas ir a Blogger in Draft, si esto cambia otra vez, ya sabes donde encontrarlo ;)
Ahora, lo que sigue es, compartir esas ricas recetas!!
Créditos:
Javascript del menú desarrollado por: scriptiny
No hay comentarios:
Publicar un comentario