Hoy te traigo una plantilla "diferente" a muchas de las plantillas personalizadas que puedes encontrar; es una plantilla sumamente versátil por dos razones, la primera, es que se puede adaptar fácilmente a muchos temas, aunque está pensada para blogs que ofrecen descargas o que exhiben algo..., y la segunda, es porque prácticamente toda la plantilla se puede personalizar desde el Diseñador de Plantillas, gracias a la maravillosa capacidad de las plantillas de Blogger de usar variables ;)
Además, es compatible con todos los navegadores incluyendo la vieja versión de IE, "Internet Explorer 6", salvo por algunas pequeñeces, que no interrumpen su funcionamiento, por ejemplo, el uso de fondo transparente en el sprite de las flechas del carrusel.
Características:
- Plantilla de tres columnas
- Menú desplegable en el header
- Carrusel infinito con imágenes
- Sección en el header para colocar Banner publicitario de 468x60 pixeles
- Secciones especiales para colocar Banner publicitarios de 125x125 pixeles
- Resumen automático en las entradas
- Botones oficiales de Twitter, facebook y Google+ para compartir tus entradas
- Efecto Hover de sombras en las imágenes de las entradas (no vesiones anteriores de IE8)
- Sección especial para mostrar dos gadgets de forma alterna (en el demo: Lo + nuevo y Archivo)
- Sección especial para mostrar galería de imágenes en miniatura del gadget de "Entradas populares"
- Tres columnas adicionales en el Footer
Personalizar los colores de fondos de la plantilla
Una de las características más interesante en lo que respecta a la apariencia, (diseño) es que puedes cambiar el color de fondo de ciertos elementos clave, desde el Diseñador de Plantillas, como:
- El color de fondo del listón, sección de galería de imágenes miniaturas de entradas populares y crédito.
- Bordes del post-footer (debajo de cada post), debajo del titulo del sidebar y del enlace seleccionado de la sección de gadgets
- El color de fondo o background
De ese modo tu puedes adaptarla a tu gusto, cambiar los colores cada vez que se te antoje, y darle un toqué único ;)
Cambiar el color de fondo o background. La plantilla usa un pattern con transparencia, que parece como tiles de diferentes tonos, y al poner un color de fondo diferente en el background, este se verá distinto, como lo puedes ver en la siguiente imagen:
Para hacer esos cambios, necesitas ir a Plantilla > Personalizar > Diseñador de Plantillas > Avanzado, y elegir los colores de cada sección, en el caso del menú desplegable, pon el puntero encima de cada enlace, para que puedas comprobar el color que selecciones, tanto para el fondo, como para la fuente (tipo y color).
De igual forma, podrás cambiar el color de fondo del carrusel, "el listón", ya que esta hecho con CSS, (borde superior e inferior, los triángulos de las esquinitas que hacen que tenga la apariencia de listón). Esos colores serán aplicados de igual forma al fondo de la galería de imágenes miniaturas de las entradas populares, y la sección de los créditos, que por cierto te pido respetar.
Bueno, mejor ve y comprueba todo esto al diseñador de plantillas, ahí mismo podrás ver los resultados y de paso, te diviertes un rato.
Cómo personalizar el menú desplegable
Necesitarás tener los enlaces a donde quieres que dirija cada texto del menú, y agregarlos en cada "#" para que coincidan respectivamente, los he nombrado de tal forma que puedas identificarlos fácilmente (espero), si te sobra uno sólo quítalo, las puedes identificar porque están dentro de <li>...</li>, y el texto de cada enlace que se ve en el menú esta dentro de una etiqueta a.
<!-- 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 href='#'>Enlace A</a>
<ul>
<li><a href='#'>Enlace A1</a></li>
<li><a href='#'>Enlace A2</a></li>
<li class='submenu'>
<a href='#'>Enlace AB »</a>
<ul>
<li class='noborder'><a href='#'>Enlace AB1</a></li>
<li><a href='#'>Enlace AB2</a></li>
<li><a href='#'>Enlace AB3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Enlace B</a>
<ul>
<li><a href='#'>Enlace B1</a></li>
<li><a href='#'>Enlace B2</a></li>
<li><a href='#'>Enlace B3</a></li>
<li class='submenu'>
<a href='#'>Enlace BC »</a>
<ul>
<li class='noborder'><a href='#'>Enlace BC1</a></li>
<li><a href='#'>Enlace BC2</a></li>
<li><a href='#'>Enlace BC3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Enlace C</a>
<ul>
<li><a href='#'>Enlace C1</a></li>
<li><a href='#'>Enlace C2</a></li>
<li><a href='#'>Enlace C3</a></li>
</ul>
</li>
<li>
<a href='#'>Enlace D</a>
<ul>
<li><a href='#'>Enlace D1</a></li>
<li><a href='#'>Enlace D1</a></li>
<li><a href='#'>Enlace D3</a></li>
</ul>
</li>
<li>
<a class='last' href='#'>Enlace F</a>
<ul>
<li><a href='#'>Enlace F1</a></li>
<li><a href='#'>Enlace F2</a></li>
<li><a href='#'>Enlace F3</a></li>
<li><a href='#'>Enlace F4</a></li>
</ul>
</li>
</ul>
</div>
Grandecito ¿verdad?, pero no es tan difícil como parece, sólo sigue linea por linea al sustituir los enlaces y textos. Ten cuidado de no borrar las comillas entre cada enlace, y verifica en vista previa antes de guardas los cambios, desde la vista previa puedes desplegar el menú. Lo que marque de azul, es el código del caracter Unicode "»" que puedes ver en el menú.
Si no queda muy claro, veamos un ejemplo:
...en la siguiente linea, donde está la almohadilla "#" , es donde debes poner el enlace a donde te dirigirá al hacer click sobre el texto "Enlace A", que tu cambiarás por el texto que necesites.
<a href='#'>Enlace A</a>
Lo mismo para estas lineas de código (elementos de lista)...
<li><a href='#'>Enlace B1</a></li>
Puedes agregar o eliminar enlaces si es que te sobran o te faltan.
Cómo personalizar las imágenes del carrusel y agregar los enlaces
Así es como empieza la estructura del carrusel, y que tendrás que editar para mostrar las imágenes que necesites, está configurado para mostrar imágenes de 90 pixeles de ancho por 125 pixeles de alto:
<!-- Empieza la galería de imágenes del carrusel --><div id='caja-carrusel'>
<div class='infiniteCarousel'>
<div class='wrapper' style='overflow-x: hidden; overflow-y: hidden;'>
<ul>
<li><a href='#'><img alt='' src='URL_DE_LA_IMAGEN' title='Texto del tooltip'/></a></li>
<li><a href='#'><img alt='' src='URL_DE_LA_IMAGEN' title='Texto del tooltip'/></a></li>...
La parte que nos interesa y que corresponde a cada imagen y a su enlace es:
<li><a href='#'><img alt='' src='URL_DE_LA_IMAGEN' title='Texto del Tooltip'/></a></li>
En donde:
- Sustituyes la almohadilla '#' por la URL de la página a donde quieres que se dirija al hacer click sobre la imagen.
- En title='' escribes dentro de las comillas el texto del tooltip (el texto que aparecerá al poner el puntero del ratón sobre la imagen)
- En donde dice URL_DE_LA_IMAGEN pones la dirección web (URL) de la imagen. Para saber como obtener la URL de la imagen, cuando subes las imágenes desde Blogger, échale un vistazo a esta entrada: Cómo obtener la URL de una imagen fácil y rápido.
Y cada vez que queramos que aparezca una imagen, debemos repetir esa linea de código, si una linea sobra la eliminas y si te faltan las pones.
Cómo agregar los banners
Para agregar los Banners, sólo necestitas agregar la imagen en el gadget de "Imagen" en las secciones correspondientes, y agregar el enlace para dicha imagen.
Cómo configurar la fecha de publicación de las entradas
Para ello necesitas ir a Configuración > Idioma y Formato (en la nueva interfaz) y en Formato hora, seleccionarla como se muestra en la imagen:
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 título 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 título del post al poner el puntero encima de la imagen
Necesitas configurar el gadget de "Entradas populares", para que muestre solamente la miniatura, de ese modo se verá el tooltip con el título de la entrada.
Otras Notas
- Puedes eliminar los triángulos inferiores o superiores del listón, eliminando el código correspondiente, te recomiendo ver comentarios en el código de la plantilla.
- Cuando selecciones los colores del listón, (que también se aplica a la galería de miniaturas en el footer) te recomiendo que elijas un tono mas fuerte para los triángulos y para el borde, y uno más claro para la parte frontal, para que se vea mejor.
Siéntete libre de decirme tus inquietudes, preguntas, etc., y no olvides compartirla!
No hay comentarios:
Publicar un comentario