SlideShow con control deslizante para blogger
Luego de haver publicado un
exitoso Slideshow modificado para ser visible con sus Entradas populares, hoy
le voy a presentar otro tipo de Slideshow el cual funciona con sus Entradas
populares. El Slideshow esta adaptado para funcionar con sus Entradas populares
y tiene como características mostrar un control deslizante, con eso se muestra
las Entradas populares mas vistas de la semana o del mes. La insersion del código
es muy fácil.
Mire su demostración:
A continuación vamos a trabajar
2 Dirigite a “Diseño”
3 Añadir un Gadget, y busca “Entradas populares”, si ya tienes activado tus entradas populares, sáltate este paso.
4 Ubica el widget de tus Entradas populares en la parte superior de tu blog para que sea visible.
5 Ahora necesitaras “Añadir un Gadget” y busca un widget que dice “HTML/Javascript”, ábrelo y pega el siguiente código.
<style>
* {
margin: 0;
padding: 0;
}
/***********by www.ayudadeblogger.com**************/
body {
font: 11px Helvetica, Arial,
sans-serif;
}
#wrapper {
width: 800px;
margin: 60px auto;
}
#intro {
padding-bottom: 10px;
}
#slider {
width: 800px;
margin: 0 auto;
position: relative;
border: 10px
solid #ccc;
}
.scroll {
overflow: hidden;
width: 800px;
margin: 0 auto;
position: relative;
}
.scrollContainer {
position:
relative;
}
.scrollContainer div.panel {
padding: 10px;
width: 274px;
height: 318px;
}
#left-shadow {
position:
absolute;
top: 0;
left: 0;
width: 12px;
bottom: 0;
background:
url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png)
repeat-y;
}
#right-shadow {
position:
absolute;
top: 0;
right: 0;
width: 12px;
bottom: 0;
background:
url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png)
repeat-y;
}
.inside {
padding: 10px;
border: 1px solid
#999;
}
.inside img {
display: block;
border: 1px solid
#666;
margin: 0 0 10px
0;
width: 250px;
}
.inside h2 {
font-weight:
normal;
color: #111;
font-size: 16px;
margin: 0 0 8px
0;
}
.inside p {
font-size: 11px;
color: #ccc;
}
a {
color: #999;
text-decoration:
none;
border-bottom:
1px dotted #ccc;
}
a:hover {
border-bottom:
1px solid #999;
}
.scrollButtons {
position: absolute;
top: 127px;
cursor: pointer;
}
.scrollButtons.left {
left: -45px;
}
.scrollButtons.right {
right: -45px;
}
.hide {
display: none;
}
</style>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script
src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js"
type="text/javascript" charset="utf-8"></script>
|
Ahora da un clic en guardar y
listo, mira los cambios en tu blog y disfurta de este espectualar Slideshow con
un solo widget.
A continuación les voy a dejar
una imagen en el cual muestra como debe
de quedarles al realizar el paso 4 y el paso 5:
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber
Saludos
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Este trabaja muy bien
ResponderEliminarhay alguna forma de usarlo como visor de imágenes? En ves de solo ver las entradas populares? Gracias
ResponderEliminar