Slider para mostrar artículos que elijas.

Vista previa del slider

Hoy les voy a compartir un pequeño slider animado para que puedan mostrar entradas de su blog de una manera mucho mas amigable, su instalación es muy fácil y nos queda un buen efecto en nuestro blog.
Para ver una vista previa puedes observarlo funcionando en el siguiente blog:

Te gusto? entonces empezamos con su instalación...

1. Iniciamos sesión y vamos a la opción Plantilla y despues en Editar HTML

• Bien ahora que estamos en nuestra plantilla buscaremos el siguiente código:

]]></b:skin>

• Justamente arriba de este parte de código pegaremos nuestros estilos css, copiamos y pegas el siguiente código:

/* slide by tutoriales2010.blogspot.com */
#tbi_slider { overflow: hidden; margin: 20px auto; padding: 0; width: 805px; height: 320px; -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } #tbi_slider ul { margin: 0; padding: 0; width: 2000px; } #tbi_slider li { position: relative; display: block; float: left; width: 160px; border-left: 1px solid #888; -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #tbi_slider ul:hover li { width: 40px; } #tbi_slider ul li:hover { width: 640px; } #tbi_slider li img { display: block; width: 640px; } #tbi_title { position: absolute; top: 0; left: 0; padding: 20px; width: 640px; background: rgba(0, 0, 0, 0.5); color: #fff; font: bold 16px 'trebuchet MS', sans-serif; } #tbi_title a { display: block; color: #fff; text-decoration: none; }

 /*  slide by tutoriales2010.blogspot.com */

• Guardamos cambios  y ahora procedemos a agregar un gadget a nuestro blog en la parte de Diseño de tipo HTML/JAVASCRIPT, copiamos y pegamos el siguiente codigo: 

<!-- Acordeon Slider of tutoriales2010.blogspot.com -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tbi_slider'>
 <ul>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.mx/'>Ejemplo1</a>
 </div>
 <a href='http://www.mov-alterado.blogspot.com/'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjckW2aN5TPBdjU0UTHxE0qwwHRB7Scv5NfH_GiwcvtjACm-0v-ukZrag28xaRoJ83ZHKuHFGnigSm4rmkTReYQ64NwsL5fzhQOBJ4KuczwGLsxlLVxVoxrqhGeQifTvlvnpHfuWkpBGyE/w605-h302-no/vb.net4.png'/>
 </a>
 </li>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.mx/'>ejemplo2</a>
 </div>
 <a href='http://www.tutoriales2010.blogspot.mx/'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE4Wz0zwHzITpTvbX_gcZqq9v5tiZx6eYT7VOnfmlKRG0YHcuflMKml8vMFPZ6Ff6oKyUU6jZjkU-vA7pwdcx_ky7-SjQXhd4Pm-bbSy0CloGhHsGX6MiUt0pcZDpDHbA6zj3xFxbqknI/w605-h302-no/vb.net5.png'/>
 </a>
 </li>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.com/'>ejemplo3</a>
 </div>
 <a href='http://www.tutoriales2010.blogspot.com/'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXIAaDxJoh0J70O5uBS17oh1So436A_oMzpdHyg1ymYQwfSSIophoHE2RZNUPSj8usr87Sz2MuEJqGl4NYGBXAWDIGJSQUaKW_T9WpXJKLoN-zoMwdZmTRqAjNwe70A0omwuSveHs8ig/w572-h302-no/vb.net6.png'/>
 </a>
 </li>
 <li>
 <div id='tbi_title'>
 <a href='http://www.tutoriales2010.blogspot.com/'>ejemplo4</a>
 </div>
 <a href='http://www.tutoriales2010.blogspot.com/'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7KRSJuNptK47JdP8C4EGx_XyuAYdbZpROf5DvqUUAyiSPx7u8oxA2WNAZZfi6XMZ1sp7nNJkIVNuBSumegscOTzEpX3qRha7UPysIxzyY-H0wfxGWTc-0VmNeI_x32VVfXusRwmOUBs/w605-h302-no/vb.net7.png'/>
 </a>
 </li>
 </ul>
</div>
</b:if>

 <!-- Acordeon Slider of tutoriales2010.blogspot.mx -->

• Antes de guardar el gadget debes cambiar lo siguiente: 

1. Los links en color rojo por cada una de las entradas que quieras mostrar
2. El texto en colo azul que es lo que se va mostrar en nuestro gadget
3. El link de la imagen que quieres mostrar y que esta marcado con un fondo azul

Para que se te haga mas fácil el editar las imágenes que vas a agregar el gadget o slider te dejo mis proyectos en formado PSD para que los edites a tu manera. 

Descarga los formatos PSD

Es todo por esta ocasión si te quedo alguna duda no dudes en dejarme un comentario.