Introduciendo la plantilla Blogin con gadget listo para mostrar SlideShow
Hola, aquí les tengo una nueva plantilla, que esta hecha con detalles de papel y botones, ideal para un blog de manualidades, la he diseñado pensando en mostrar un SlideShow debajo de la cabecera, en la demostración puedes ver como funciona, en este caso, estoy usando un script, que encontré en el Escaparate de Rosa mismo que es muy sencillo de editar y además, no tendrás que ingresar a la edición HTML de tu plantilla para implementarlo.
[DEMO] [BAJARLA]
Características:
- 2 columnas en la parte principal, una pensando en un pequeño espacio para escribir algo sobre ti o sobre tu sitio, y la otra para el slideshow
- Plantilla de dos columnas
- 3 columnas adicionales en el Footer
- Archivo en forma de calendario
Importante:
IMPORTANTE: Para que funcione el Archivo tienes que configurarlo, es muy fácil, para ello tienes que ir a: Diseño►hacer clic en editar el gatget que contiene el archivo, y luego selecciona lo siguiente:
En estilo: Lista .
En Frecuencia de Archivo: Mensualmente .
En Formato de fecha: Enero 2006.
Intrucciones para Personalizar el menú de Navegación:
Para personalizar el menú de navegación tienes que ir a Diseño►Edición de HTLM, y luego identifica el siguiente código:
<div id='menunav'><ul>
<li><a expr:href='data:blog.homepageUrl' title=' Inicio'>Inicio</a></li>
<li><aexpr:href=' data:blog.homepageUrl+"feeds/posts/default"' title: ‘Entradas Rss’>RSS</a></li>
<li><a href=' tu link1 aqui ' title='tu link'>Link1</a></li>
<li><a href='tulink2 aqui' title='tu link2'>Link2</a></li> <li><a href='tu link3 aqui' title='tu link'>Link3</a></li></ul>
*Color Azul = el nombre de los enlaces que aparecerán en el menú de la plantilla.
*Color Verde = La URL o dirección del enlace en cuestión.
*Color Rosa = El texto que aparece al poner el puntero sobre el enlace.
Instrucciones para colocar las imágenes del Slideshow en el gadget correspondiente.
Opción 1. Usar el siguiente Script para el slideshow.
Paso 1 Ir a : Diseño► elementos de la página, y agrega el siguiente script al gatget específico para el slideshow, eligiendo la opción HTML o JavaScript:
<div style="height:340px; text-align:center; width: 100%;">Paso 2. Agrega los enlaces de tus imágenes, para eso tienes que identificar el código que dice:
<div id="slideshow1" class="slide">
<div>
<a href=”URL DEL ENLACE”> <img
src="URL_ DE TU IMAGEN AQUI"/> </a></div>
</div>
<div id="slideshow2" style="display: none;" class="slide">
<div>
<a href="URL DEL ENLACE"> <img
src="URL_ DE TU IMAGEN AQUI"/></a></div>
</div>
<div id="slideshow3" style="display: none;" class="slide">
<div>
<a href="URL DEL ENLACE"> <img
src="URL_DE TU IMAGEN AQUI"/> </a></div>
</div></div>
<script type="text/javascript">
start_slideshow(1, 3, 2000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame,
delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame =
frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame,
delay), delay + 850);
})
}
</script>
<img
src="URL_DE TU IMAGEN AQUI"/>
Sustituye lo marcado con verde por los enlaces de tus imagenes respectivamente.
Ten cuidado con las comillas, no los vayas a borrar.
Paso 3. Después, identifica el código que dice:
<a href="URL DEL ENLACE">
..y pega la URL del enlace a donde te llevará al hacer click sobre la imagen..
El Script de ejemplo, esta listo solo para mostrar 3 imágenes, cada vez que quieras añadir una imágen tendrás que agregar este código completo con sus enlaces correspondientes, para cada imágen que quieras mostrar…, como nos quedamos en la 3, ahora sigue:
<div class="slide" id="slideshow4" style="display: none;">
<div>
<a href="Url del enlace"><img src="url de la imagen" /></a></div>
</div>
Si continuas agregando imágenes, seguirá slideshow5, slideshow6 y así sucesivamente después de cada imágen que agregues.
Importante: para que el slideshow luzca bien, deberás usar imágenes del mismo tamaño. Yo usé imagenes de: 540x292 px, ya que el espacio disponible en el gadget así lo permite.
Paso 4. Muy bien, ahora identifica en el Script el código que dice:
start_slideshow(1, 3, 2000);
El número 3 es una variable que cambiarás según el número de imágenes que tengas en el slideshow, en este caso el script tiene tres, si por ejemplo agregas 10 imágenes, entonces tendrás que cambiar el 3, por el número 10.
Paso 5. Guarda los cambios.
OPCIÓN 2. Si cuentas con una cuenta como Flickr puedes agregar en el gadget el código que te facilitan para el Slideshow, solo tendrás que ajustarlo a la medida del gadget.
Etiquetas:Plantillas