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.




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: