18 de febrero de 2013

SlideShow en Blogger


¡Hola Bloggeras! ¿Cómo están  En esta oportunidad les traigo un nuevo tutorial que me lo han pedido muchas personas. No se si se acordarán, pero un SlideShow es como una diapositiva de imágenes dentro de un blog. En diseños pasado lo hemos utilizado y por fin les traigo el tutorial.
Nota: Este slideshow funciona para plantillas actualizadas y antiguas de blogger.

Haz click en "Leer esta nota completa" para ver el tutorial.
1) Primero tenemos que cargar la última version de  jQuery, que es un plugin  que nos permitirá poner nuestro Slider. Con control+F buscamos </body> y antes del cierre de esta etiqueta colocaremos el siguiente código.




3) Ahora, añade los estilos justo antes de ]]></b:skin> en las plantillas antiguas de Blogger o en Diseño/Avanzado/Añadir CSS en el Diseñador de las nuevas plantillas Blogger:



Habrás notado que las dimensiones del slider son 560px de ancho por 280px de alto. Puedes modificar dichas dimensiones a tu gusto, así como otras propiedades que estimes conveniente.

4) Puedes poner el slider en la columna principal, justo antes de los artículos. En las plantillas viejas de Blogger, esto es justo bajo <div id='main-wrapper'>, y en las nuevas, bajo
<div class='main-outer'>.




5) Este código con condicionales mostrará el slider sólo en la página principal, con 5 diapositivas. Puedes quitar o añadir más, aunque no es recomendable tener más de 6 porque puede retardar demasiado la carga de tu blog.

Para el código de cada diapositiva, tienes que modificar: (1) el enlace que dirige al post que quieras destacar; (2) el título (title) de dicho post; (3) El enlace directo (URL) a la imagen que quieras poner, que debe ser acorde a las dimensiones del slider (560×280 en este caso).


3 comentarios:

  1. hola. no entiendo. donde se tiene que poner eso de jQuerry?

    ResponderBorrar
    Respuestas
    1. Arriba dice, antes de la etiqueta body(no te la puedo poner como comentario porque no me deja), sino le pones eso, no se va a visualizar el Slider. Por eso es FUNDAMENTAL colocárselo.

      Borrar
  2. Muchas gracias por el SliderShow ;_; cuanto tiempo he estado buscando uno como ese

    ResponderBorrar

¡ATENCIÓN: LEE LO SIGUIENTE ANTES DE COMENTAR!

*Si vas a comentar, puedes usar tu cuenta de Google, OpenID, Nombre/Web, y Anónimo
*No Insultar
*No hagas SPAM, Números telefónicos ni Emails
No dejes enlaces a otros blogs, números telefónicos ni correos electrónicos.

¡Gracias!
Att: Staff Club Bloggeras

Categorías

- AgusSweet' -Karii ♥ -SuzettStronger♥' 'Bloggeras' "Personaliza tu Twitter" adelanto Adele aniversario avisos awards BA Bases Bella Thorne bg Biblioteca Blends Blogger Bloggera Del Mes Britney Spears By *.* Memii By Angie By AriiCa'' By Bale By Cata By Deanase By Fatiima By Nievely By Paaz By ProdigyApple By Sweet Perfect By Vale By Venusita By: Ana Laura-JBMFC By: Ayee♥ By: Emii By: Venusita By:Ali♥ By:Leslye Diaz Cyrus Cami Carteles celulares Chicas Color Complementos Concurso coral Crea renders Cursores Demi Lovato Descargas Diana Gu' diseño Ecodesigners Entrega de Pedidos escritoras Especial Famosos Facebook Famosos Flash fonts Foro Fotos GIF gratis Header header psd Header PSD Ariana Grande header psd Demi Lovato hellow iconos Imágenes Imagenes PNG IsOnee Jessie J Katy Perry Laura layout blogger Magazine Manchas Maquillaje Marceliita ♥ Max Rodriguez Me Presento AriiCa'' Me Presento Deanase Me Presento Fatiima Me Presento Paulaah Mega Regalo Mickey Miika♥ Miley Cyrus Minnie Musica navidad NickTVUP Noticias Nueva Coweb Olivia Holt Pack Pandita Para tu blog Para tu Pc Pequeñas Mentirosas Personalizando tu blog PhotoPack photoscape photoshop PhotoshopHQ Piensa verde Pngs Por Cris*-*-* Portadas Post Premades premios Presentacion Programas proximamente Proyecto Verde PSC PSD Psd GomezLove Recursos Regalazos Regalos Reglas Retos rush-designs.fangalaxy.org saarah´ SaaRaH´ Me presento Regalazos samii Keller Screenshots shara marie Sicóloga Rossana Sidebar skins Sofía Dreamer sorpresas Styles Team telenovelas Textos PNG Texturas Themes Tips Tips. Moda Top Tutoriales TV twitter v-blog Vacaciones Video Tutorial videoblog Videos Vídeos votaciones voten por IsOnee para Bloggera del Mes. wallpapers walls Wordpress

LinkWithin

Related Posts Plugin for WordPress, Blogger...