Caricaturas

Nostalgia

El Baúl de los Recuerdos

Rockola

Video Blog

You are here

Estupenda imagen para tu pagina web o para tu blog: Efecto Carrusel

Muchos amigos me han preguntado como hacer una pagina dinámica, no muy pesada y facil de configurar. Un efecto muy especial que además le da personalidad es el efecto carrusel. Glider.js es un sistema de carrousel guidado que nos permite indicar a que sección del carrousel ha de ir mediante un simple enlace. Se trata de un sistema muy interesante para mostrar contenidos horizontales largos. Un ejemplo claro es el Glider que me pidieron para la pagina web de Denima, empresa para la cual laboro.
Lo primero que debemos es descargar el archivo Java Script llamado Glider. En el siguiente enlace puedes descargar uno ya configurado.
Abres la carpeta en ZIP y subes a algun servidor gratuito el archivo Glider.
Pasos:
1. Abre la carpeta glider-0.0.3
2. Abre la carpeta javascripts
3. Sube el archivo Glider
Si quieres tener una referencia momentanea de tu archivo glider puedes utilizar este
<script src='http://web2feel.com/gamezine/wp-content/themes/gamezinealpha/js/glide.js' type='text/javascript'/>
Ya con todo esto listo te vas a tu pestaña Edicion HTML ya sea de tu pagina web o de tu blog.
Busca el siguiente codigo:
.comments img{

margin:4px 4px;
background:#245071;
padding:4px 4px;

}
Si por algun motivo no encuentras el codigo anterior ubica el siguiente codigo despues del html de
Comment. Después de haber encontrado el codigo anterior pega el siguiente codigo:
/*Glider COntent
-----------------------------------------------------*/
#glidercontent{
margin:0px 0 5px 0px;
font-family:Century gothic, Georgia,Arial,Tahoma,sans-serif;
}

.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 650px;
height: 280px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
margin:0px 0px 0px 0px;
background:url(http://2.bp.blogspot.com/_XByc9SCisZM/Sa8DTt3yhDI/AAAAAAAABD0/TNDOL3gbpOM/s1600/gcont.jpg) repeat-y;
}

.glidecontent{ /*style for each glide content DIV within wrapper.*/
position:absolute; /* Do not change this value */
padding:0px 15px 0px 15px;
width:620px;
color:#fff;
margin:0px 0px;
height: 220px;
background:#ec03d9 url() no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
font-size:16px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
}

.glidemeta{
height: 70px;
width: 610px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(line-height:14px;color:%20#fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}

.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */

height:50px;
z-index:150;
width: 650px;
background: url( background:url( display:block; position:absolute; right:35px; top:15px;.glidecontenttoggler >
}
color: #E4EFFA;
background: a:hover{
text-decoration: bold;
font-weight: 2e6ab1;
display: -moz-inline-box;
http://3.bp.blogspot.com/_XByc9SCisZM/Sa8DH_AKwtI/AAAAAAAAA_k/SJdNVuHn-OE/s1600/lefta.png) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(http://1.bp.blogspot.com/_XByc9SCisZM/Sa8DLCijToI/AAAAAAAABAs/Mn1dMubmzgE/s1600/righta.png) bottom;
width:36px;
height:25px;
position:absolute;
top:15px;
right:5px;
}
.glidecontenttoggler a.prev:hover {
top:15px;
right:35px;
position:absolute;
display:block;
background:url(http://4.bp.blogspot.com/_XByc9SCisZM/Sa8HyfA1i1I/AAAAAAAABFM/s-53U4kqDt0/s1600/left.png) bottom;
width:36px;
height:25px

}

.glidecontenttoggler a.next:hover{

float:right;
display:block;
background:url(http://1.bp.blogspot.com/_XByc9SCisZM/Sa8IWHPbPwI/AAAAAAAABFU/8oYTKC7UIAs/s1600/right.png) bottom;
width:36px;
height:25px;
position:absolute;
top:15px;
right:5px;

}
Algunos links son para bordes, las flechas en formato .png. Si tu quieres modificar bordes, color, fondo, etc. Cambias los links. (Este solo es un breve ejemplo, respetamos los derechos de autor)
Posterior a esto buscas lo siguiente dentro del HTML
]]></b:skin>
Y pegas el directorio de donde subiste tu archivo Glider.js o puedes tomar este como referencia
<script src='http://web2feel.com/gamezine/wp-content/themes/gamezinealpha/js/glide.js' type='text/javascript'/>
Despues de esto busca lo siguiente:
<b:if cond='data:blog.pageType != "item"'>
Inmediatamente despues de esto pegas esto:
<b:section class='cahayabiru1' id='cahayabiru1' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='Glider Content' type='HTML'>
<b:includable id='main'>
Ahora le das Guardar. Si en dado caso te da error revisa que el valor HTML1 no lo tenga ningun Gadget mas. Si es asi verifica y si no es importante borralo. Debido a que el Glider no puede darsele otro valor que no sea HTML1. Y listo. Te vas a Diseño y encontraras una nueva caja que dice Glider Content. Aqui pegas este codigo:
<!-- start copy -->
<div class="glidecontent">
<div class="glidemeta">
<h2><a href="AQUI EL LINK DE TU PRIMER CUADRO" title="Nombre del primer cuadro">Nombre del primer cuadro</a></h2>
Aqui el texo </div>
<a href="AQUI EL LINK DE TU PRIMER CUADRO" title="Nombre del primer cuadro"> <img width="620" alt="Nombre del primer cuadro" src="Direccion donde esta alojada tu imagen" height="220"/> </a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="AQUI EL LINK DE TU SEGUNDO CUADRO" title="Titulo segundo cuadro">Titulo segundo cuadro</a></h2>
Si esta en internet existe!!!! Como diría Lance Fortnow en una de sus citas. La Página Web es un tema de crucial importancia estratégica para su negocio. Considerando que la mayoría de los responsables de compras en los principales mercados internacionales utilizan Internet ...</div>
<a href="http://denimagt.blogspot.com/2009/05/alternativas-empresariales.html" title="Tu propia web"> <img width="620" alt="Tu propia web" src="http://www.ferloweb.com/img/disseny.jpg" height="220"/> </a>
</div>

<!-- end copy -->
Y listo. Cualquier duda me puedes escribir. Suerte
Ver ejemplo: CLICK AQUI

Juan Pablo Mata

Especialista en Recuerdos y Música. Todo lo que te produzca Nostalgia aquí lo encuentras. En insta y twitter @juanpaguatemala

No hay comentarios:

Leave a Reply

Labels

60's 70's 80's 90's Abuso de PMT Administracion Moderna Alimentación Altavista Amigos Anime Anthony Cymerys Aplicaciones Apollo 11 Apollo 16 Apple Astronomía Audio Automatización Aviacion Ayuda Bill Cosby Biografia Blog Blogger Broma CANSAT Caricaturas Carlos Rivas Carlos Slim Charles Duke Chavorrucos Chile Chucherías Ciencia Cine Clase Coaching Compu Comunicación Correo CPM Cuestionarios Curioso Dante Denuncia Desagradable Descenso Dia del locutor Dialogo Diario Dieta Dieta de 1 Semana Dinero Dios es bello Diversión Don Leo Economia Educación EEI Email Español Estacion Espacial Internacional Exito Facebook Farandula Feature Finanzas Forrest Gump Fotos Friends Gamegear Gasolinera Generación 80's Generación 90's Gmail Google Google Labs Google Maps Grabación Guate Guatemala Hack Herramienta Herzio Historia Hotmail Html Idioma Informatica Insolito Interesante Internet Japon Java John Young Juan Pablo Mata Juegos Juguetes Las 100 mejores comidas rapidas del mundo Listado Llavero Locutor Luna Mapacho Matrimonio McPatatas Medicina Memorias Mentoring Mercadotecnia Merk Meteorito Microsoft Mitos sobre las dietas Motivación Mozilla MTV Multimedia Mundo Muñecas Musica Música Nasa Navidad Nerds Nintendo Nivea Nombre Nostalgia Noticia Noticias Novedoso Opinión Ortografía Outlook Padres Pajaro Loco Panchito el Avioncito Papa Francisco Papas Fritas Pelicula Perfil Personal Peru Peso Piscologia Planeacion Estrategica Pleonasmo Podcast Power Point Prevención Progra Programas Promocion Prypiat Psicología Que significa tu nombre Radio Recuerdos Redes Sociales Reingenieria Remi Repollito Retro Revista Rolling Stones Ringtone Ruleteros Rusia Salud Sega Seguridad Seminario de Gerencia Seminario de Informatica Seminarios Series de Televisión Servicio al cliente Servicio Social Shows Significado Sismos Sistemas de Información Skyppe Social Solidaridad Sony Spotify Superación Tecnología Teléfono Televisión Teoria Gerencial Terapia Toma de Decisiones Tour Transporte Tristeza TV Twitter Uka Uka Universidad Universo URL Venganza de los Nerds Vida Video Videojuegos Viral Virus Walkman Wikipedia Ya Estamos Viernes Yahoo Yosi Sideral Yosinews You Tube Youtube Zapatos