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

1 Ir a Blogger

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




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: