Como Añadir Slideshow Con Efecto Opaco A Tu Blogger

En este tutorial te ensenare el truco para anadir un simpatico y atractivo, fade slider con el uso de Css3 y HTML.Tu presentación de diapositivas mas atractivo, puedes añadir imagenes que tengan que ver con tu blog Este ademas el titulo se mueve con cada presentacion de una imagen.te invito a que lo integres a tu pagina de blog.

Ejemplo:Da Clic En Imagen Para Ver Demostracion.

Pasos para anadir el slideshow con titulo movible a tu blog.
 1.Entra en cuenta de blogger.

2. Ahora selecciona "Plantilla" .

3.Da Click en boton de EDITAR HTML"

4. Da Clic en Proceder.
   
5. Encuentre la siguiente etiqueta  ]]></b:skin>  usando Ctrl+F  

6. Pegue el codigo de abajo antes de la siguiente etiqueta  ]]></b:skin> 

/* fade slider www.ciudadblogger.info*/
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {left:100%;
        opacity:0;}
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation www.ciudadblogger.info*/
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

7. Entra en blogger y da clic  Diseno

8. Clic en Aanadir un Gadget y selecciona 'HTML/Javascript

9. Pega el codigo de abajo.

<div class="slides">
            <ul> <!-- slides -->
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9veG2dNf-6wWWpnJqrd1742xa733qD7MgiPht01kyIdojnlx_y-I-65jKb_hm9WqEMqJL7uakoqY7JmfVQhVehYfBxLpEgynOAq9JvOyJcNEkj-2sMr8tfUm-QivgzfnKnydGBfc9dQ/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Titulo 1</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwuenaogZOWXoHjIf-tXMcG9BqcSf6q35lz5u-1iSeHRDDBs-bgF2tplJW0dIiMYLAHjXJ5BLnjJ7eOkrKdjQBgD_OiVNLWhp8R9Z4LkDZltn59Ot0SFJlFiDqHuJRJXHbktHvnEiFhjo/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Titulo2</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYecp1yraFJqLA3VJUGXKlpXp4gxlZAHgdFN8yPpTsCcp3qZIO6wvBvX09SYbEU0o3aVnECzsS22rSgwCmV1m7TAzUZ5vQJXEaznLuI9T0I3vGccDNKCYSdT3wSVDfQChHrwg5cWGAPI/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Titulo 3</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4AzgoB5wNpLMgftp69QNn-lK6_VKUQJ6rSXPzAs329jN2poyFlg_sUSd0CcWYv4ucWfhMlxoLeiGmaSrSc-QNpYYzZv35lgc_crAFemq2CanPT0FVefhho3E4XcdJaiW0FD2hzheblo/s1600/bloggertrix-pic4.jpg" alt="image04" />
                    <div>Titulo 4</div>
                </li>
            </ul>
        </div>

Reemplace  enlaces de Titulo y imagen

 10.Guarda Html/Javascript'.

    Todo Listo...

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati