Widget Slider galería de imágenes acordeón para blogger

Querías una espectacular galería de imágenes en forma de acordeón que se muestre en tu blog de blogger, Ayudadeblogger.com te ayudara con la implementación del código para que lo utilices en tu blog de blogger. Lo que va a mostrar nuestro widget acordeón son 5 imágenes de nuestro blog, la inserción de las imágenes lo tendremos que hacer de forma manual al igual que los enlaces de nuestros artículos que queramos mostrar en esta nueva y fabulosa galería de imágenes acordeón para blogger. Esta nueva galería de imágenes nos aparecerá después de la cabecera principal de nuestro blog. Tendremos que seguir dos simples pasos para poder insertar el código y así obtener este grandioso truco para blogger.
Widget Slider galería de imágenes acordeón para blogger


A continuación mire su demostración en mi blog de demos


Te gusto verdad! Ahora vamos a trabajar

1 Ira blogger

2 Da un clic en “Plantilla


3 Otro clic en “Editar HTML” 


Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Widget Slider galería de imágenes acordeón para blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Widget Slider galería de imágenes acordeón para blogger


Busca este código ]]></b:skin> y arriba de el inserta las siguientes líneas de código

/* Acordeon Post Slider By Ayudadeblogger.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;
}
/* Acordeon Post Slider By Ayudadeblogger.com */


Y por último busca este código <div id='main-wrapper'>  si no existe ese código en tu plantilla, podrás buscar este otro código type='Header'/>  y inserta las siguientes líneas de código al final de  </div> </div>

<!-- Acordeon Post Slider By Ayudadeblogger.com -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tbi_slider'>
    <ul>
        <li>
            <div id='tbi_title'>
                <a href='http://www.ecuador-turistico.com/'>Ecuador</a>
            </div>
            <a href='http://www.ecuador-turistico.com/'>
                <img src='http://2.bp.blogspot.com/-YZG-RjdYycc/UWR9k0WtRjI/AAAAAAAACy4/L80MojVez7Y/s640/ayudadeblogger.JPG'/>
            </a>
        </li>
        <li>
            <div id='tbi_title'>
                <a href='http://www.ecuador-turistico.com/'>Turismo y aventura en Ecuador</a>
            </div>
            <a href='http://www.ecuador-turistico.com/'>
                <img src='http://1.bp.blogspot.com/-d1uMkjjP6dg/UWR9s9YXvmI/AAAAAAAACzA/LcC2BsklTwg/s640/ayudadeblogger.JPG'/>
            </a>
        </li>
        <li>
            <div id='tbi_title'>
                <a href='http://www.ecuador-turistico.com/'>Ecuador Turístico</a>
            </div>
            <a href='http://www.ecuador-turistico.com/'>
                <img src='http://1.bp.blogspot.com/-hEimTuBS7rc/UWR91sF5bCI/AAAAAAAACzI/-hYhvdfqfZ4/s640/ayudadeblogger.JPG'/>
            </a>
        </li>
        <li>
            <div id='tbi_title'>
                <a href='http://www.ecuador-turistico.com/'>Playas de Ecuador</a>
            </div>
            <a href='http://www.ecuador-turistico.com/'>
                <img src='http://1.bp.blogspot.com/-Hxgu-10GBNw/UWR-AgfainI/AAAAAAAACzQ/Jp3EVEtgAR8/s640/ayudadeblogger.JPG'/>
            </a>
        </li>
        <li>
            <div id='tbi_title'>
                <a href='http://www.ecuador-turistico.com/'>Atractivos Turísticos de Ecuador</a>
            </div>
            <a href='http://www.ecuador-turistico.com/'>
                <img src='http://2.bp.blogspot.com/-9LQHuu4N6Yk/UWR-JKlth8I/AAAAAAAACzY/o0WbsbONOTQ/s640/ayudadeblogger.JPG'/>
            </a>
        </li>
    </ul>
</div>
</b:if>
<!-- Acordeon Post Slider By Ayudadeblogger.com -->

Realiza estos cambios:

Los links que están marcados de color azul deberás borrarlos y poner ahí los links pertenecientes de la paginas de tu blog que quieras mostrar

Las letras que están marcadas de color rojo, deberás cambiarlas por el nombre que tu quieras mostrar en tu galería.

Al igual que los links que están marcados de color verde, deberás borrarlos y poner ahí los links pertenecientes de las imágenes que quieras mostrar en cada uno de ellos.

Ahora si dale un clic en “Guardar plantilla” y disfruta de este nuevo widget de imágenes en acordeón.

Te voy a dejar un ejemplo de lo que explique en como cambiar los links:

Por ejemplo este código:

<a href='http://www.ecuador-turistico.com/'>Ecuador</a>
            </div>
            <a href='http://www.ecuador-turistico.com/'>
                <img src='http://2.bp.blogspot.com/-YZG-RjdYycc/UWR9k0WtRjI/AAAAAAAACy4/L80MojVez7Y/s640/ayudadeblogger.JPG'/>


Tenemos dos links de color azul, el primer link de color azul deberás cambiarlo por el link de la pagina que quieras mostrar, al igual a lado del link tenemos el nombre de “Ecuador”, que esta marcado de color rojo, ese es el titulo de la pagina que vas a mostrar en esta galería. Mas abajo encontramos otro link que esta marcado de color azul, deberás poner el mismo link que pusiste en el primero, este sirve para que cuando le den un clic en la imagen se vaya a la pagina que quieras mostrar de tu blog, y el ultimo link esta marcado de color verde, este sirve para mostrar la imagen en nuestra galería de imágenes, tendrás que copiar todo el link perteneciente de tu imagen que quieras mostrar en tu galería de imágenes, eso debes realizarlo en todas.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

21 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hola, una pregunta como hago para colocarlo en una entrada? gracias!

    ResponderEliminar
    Respuestas
    1. hola, no es posible utilizarlo en una entrada, y en tu codigo html de ley tienes el amin wrapper o el type header. Otra cosa si quieres utilizar un slideshow en tu entrada te recominedo este slider que se encuentra en el siguiente enlace.
      http://www.ayudadeblogger.com/2012/07/como-crear-una-galeria-de-imagenes-para.html
      Saludos.

      Eliminar
    2. Aca te dejo el link con el codigo del que es automatico,pero no se que parte sacar de ahi para ahcerlo automatico y cambiar los tiempos

      http://devsmash.com/projects/kwicks/examples/slideshow

      Eliminar
  3. Muchas gracias, lo vi ese que me enviaste,pero queria poner algo mas lindo y no se como editar cada parte del html :S...

    ResponderEliminar
  4. si ya lo probe,mil gracias, esta buenisimo,pero mira te paso estos links porque yo buscaba algo mas parecido a esto, el tema es que me es imposible colocarlo y no se porque, las imagenes me quedan una al lado de la otra en lugar de quedar como deberia( el tuyo me queda bien,pero buscaba algo mas parecido a estos que te paso)

    http://www.oloblogger.com/2012/12/paneles-deslizantes-jquery-kwicks.html?showComment=1367256256377#c3732743129581938879

    Disculpa que pregunto mucho,pero en la facu me piden un blog y es parte de toda la entrega anual...mil disculpas y mil gracias por tu ayuda y rapida respuestas.

    tambien me gustariaque sea automatico el slide..

    ResponderEliminar
  5. Hola a mi no me salen ninguno de los dos códigos como lo hago?

    ResponderEliminar
    Respuestas
    1. Hola, todas la splantillas de blogger tienen cualquiera de los dos codigos que puese en este post,. Buscalo con tranquilidad..
      Saludos.

      Eliminar
  6. hola que tal, como hago para que quede en vertcal?

    ResponderEliminar
  7. no se porque no salen unidas las imagenes me las tira por individual

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog para poder ver donde puede estar el error.
      Saludos.

      Eliminar
  8. Hola Luis, enhorabuena por tu blog, es de los mejores que he visto para ayudar a crear un blog! Yo estoy intentando poco a poco crear el mío, y he creado unas páginas que se muestran como principales porque quiero hacer de una de ellas la portada. Me gustaría agregar un slideshow acordeón...el que has puesto aquí es para añadir a la plantilla html principal, pero como podría ponerlo en una página o widget??

    ResponderEliminar
    Respuestas
    1. Hola, es muy buena tu pregunta, en mis proximas publicaciones dare a conocer este truco, miestras tanto mantente atenta a mis nuevas actualizaciones.
      Saludos

      Eliminar
  9. Hola Luis

    Una herramienta muy bonita quiero ponerla pero he estado buscando por toda la plantilla y no encuentro este codigo ]]> que me dices, no se si puede ser algún tipo de codigo similar.

    Muchas gracias

    ResponderEliminar
  10. hola , todo me salio ok. gracias solo una pregunta las imagen me sale de mala calidad. uso picasa.

    ResponderEliminar
  11. http://junte2014.blogspot.com/ este es mi blog de ensayo.. del anterior comentario ,, mala calidad de imagenes..??? soy david

    ResponderEliminar
    Respuestas
    1. Hola, el problema es que estas utilizando imagenes muy pequeñas desde picasa, he visto tu blog, carga las imagenes desde tu cuenta de blogger, Saludos..

      Eliminar
  12. Hola, realize el proceso pero no aparecio nada,
    que debe hacer?

    ResponderEliminar
    Respuestas
    1. Algo estas heciendo mal, este truco funciona perfectamente.
      Saludos

      Eliminar
  13. Logré insertar el acordeón. Pero cuando cliqueo en una de las imágenes, el acordeón no se mantiene fijo en el cabecero. Desaparece. Solo está visible en "inicio"
    ¿A qué se debe? No te dejo el enlace porque lo retiré.

    ResponderEliminar