add

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

emailEnviar por correo

2 comentarios:

  1. hay alguna forma de usarlo como visor de imágenes? En ves de solo ver las entradas populares? Gracias

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios