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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkF74sjPcoAQxQ08h-MYaVqeWKik6hrX3AN1he1aqVS2b19XFC6M_zlmJZN4NDawsIuDb8KVipK9QwLWrzOU8dsb5FC4IYhYKOa6G0escjTsZqGY8jEYxizC9T_OQObq4MmPHxy9X9ATC/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;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-sWPJhMy4LtJvjOtp9fyB7Udcx6IbdTAqU4PGIZjpG_PBzwBNex9Wp67iWQp2KhSHjjGLc2_p_k71S3KqqyLGVRYf-Cr98LU7au7wyl20sBSh_VEnMl6HF80Bc3emET0L4RWLY42-6ErT/s1600/lefta.png) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhik_yQ6VbLXY0v8vpBRnA6KmH0RUMeIwMov4m6-MZ6UcL8OP5hlXwp6ybvQaHbPg9EjZBtbT4YaKl-qIOQvgBPY_N5hDJCo3ZjaF9CPNRe3plf7jfYGuhP-byjAvVd3Ld6uXD-hRsMewXn/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoti6yMQbna_WgpjdnRMbbIhaHSg8mwpDi94DxaUIU1n2OIXH9C-vkFfsOSSO3I1tJ60ALUnks5Vjb4RDqif8uvMNkZUIiGsob9Tslq3PCxR0JSe-x2Uuv3vUYI8QLr5q-m7eNEQcyMJjd/s1600/left.png) bottom;
width:36px;
height:25px
}
.glidecontenttoggler a.next:hover{
float:right;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS80RiCMiTvxlLf_pjpvgIKc_vr6_mYQGrBcwNwXInKxSGLxXaD9SqPcbiTMwI3O-Zb9q-vIlVDeXmVf4zlFe5qJrlBG7_o7lJmYY1LiwEbHQY1sxwkn9TRhxa4yLTOSqxqEWVDhv0lC_4/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. SuerteVer ejemplo: CLICK AQUI