ABANICO DE IMÁGENES

  

Para consguir este efecto de imagenes apiladas y que se abren como un abanico, empezaremos de la siguiente manera:
1 Paso: ir a plantilla --> editar en html --> y buscar con CTRL+F) esta clave  ]]></b:skin> .Y acontinuacion  PEGAR EL SIGUIENTE CODIGO ARRIBA.

#content-rotate-two {

    height: 280px;

    margin: 50px auto;

    padding: 0 50px;

    position: relative;

    width: 280px;

}

.foto-uno, .foto-dos, .foto-tres, .foto-cuatro, .foto-cinco {

    -moz-transition: all 400ms ease;

    -ms-transition: all 400ms ease;

    -o-transition: all 400ms ease;

    -webkit-transition: all 400ms ease;

    transition: all 400ms ease;

    background-color: rgba(0, 0, 0, 0.3);

    float: left;

    padding: 1px;

    position: absolute;

}

.foto-uno img, .foto-dos img, .foto-tres img, .foto-cuatro img, .foto-cinco img {

    border: 5px solid #FFFFFF;

    height: 250px;

    width: 250px;

}

.foto-uno a, .foto-dos a, .foto-tres a, .foto-cuatro a, .foto-cinco a {

    display: block;

    line-height: 0;

}

 

#content-rotate-two:hover .foto-uno {

    -moz-transform: rotate(-20deg);

    -o-transform: rotate(-20deg);

    -webkit-transform: rotate(-20deg);

    -ms-transform: rotate(-20deg));

    transform: rotate(-20deg);

    margin-left: -100px !important;

    margin-top: 20px !important;

}

 

#content-rotate-two:hover .foto-dos {

    -moz-transform: rotate(-10deg);

    -o-transform: rotate(-10deg);

    -webkit-transform: rotate(-10deg);

    -ms-transform: rotate(-10deg);

    transform: rotate(-10deg));

    margin-left: -50px !important;

    margin-top: 10px !important;

}

 

#content-rotate-two:hover .foto-tres {

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    transform: rotate(0deg);

    margin-left: 0 !important;

}

 

#content-rotate-two:hover .foto-cuatro {

    -moz-transform: rotate(15deg);

    -o-transform: rotate(15deg);

    -webkit-transform: rotate(15deg);

    -ms-transform: rotate(15deg);

    transform: rotate(15deg);

    margin-left: 50px !important;

    margin-top: 25px !important;

}

 

#content-rotate-two:hover .foto-cinco {

    -moz-transform: rotate(30deg);

    -o-transform: rotate(30deg);

    -webkit-transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    transform: rotate(30deg);

    margin-left: 100px !important;

    margin-top: 50px !important;

}

2:Paso: Pegar donde se quiera que aparezca  este efecto en cualquier lugar, puede ser en un gadget de la plantilla o en una entrada o página:

 

<div id="content-rotate-two">
    <div class="foto-uno">
        <a href=" LINK DONDE APUNTA LA IMAGEN ">
            <img src=" DIRECCION DE LA IMAGEN 1 ">
        </a>
    </div>
    <div class="foto-dos" style="margin: 4px 0 0 4px;">
        <a href=" LINK DONDE APUNTA LA IMAGEN ">
            <img src=" DIRECCION DE LA IMAGEN  2">
        </a>
    </div>
    <div class="foto-tres" style="margin: 8px 0 0 8px;">
        <a href="LINK DONDE APUNTA LA IMAGEN">
            <img src=" DIRECCION DE LA IMAGEN  3">
        </a>
    </div>
    <div class="foto-cuatro" style="margin: 12px 0 0 12px;">
        <a href=" LINK DONDE APUNTA LA IMAGEN ">
            <img src=" DIRECCION DE LA IMAGEN  4">
        </a>
    </div>
    <div class="foto-cinco" style="margin: 16px 0 0 16px;">
        <a href=" LINK DONDE APUNTA LA IMAGEN ">
            <img src="DIRECCION DE LA IMAGEN 5">
        </a>
    </div>
</div>

En este código debemos cambiar dos frases, donde dice "Link donde apunta la imagen" debemos ingresar la URL de la pagina a donde quieren que lleve la imagen, puede ser una entrada, pagina externa o la misma imagen pero que se vea a mayor tamaño. y donde dice "Dirección de a imagen x" deben poner la url de la imagen, no importa el tamaño de esta, ya que automáticamente se redimensionará.

Notas importantes a considerar:

1.     Las dimensiones que resalté con azul en el primer código son el tamaño de la imagen con y sin el marco, por lo que si quieren que aparezcan más grandes o más pequeñas deben cambiar esas medidas de acuerdo a las características de su plantilla. Pero tengan presente que siempre el ancho y alto deben tener las mismas medidas y que las primeras dimensiones (donde aparecen 280px) debe ser mayor que la segunda (donde aparece 250px)

2.     Lo resaltado en color naranja, es decir, #FFFFFF, es el color del margen o borde de las imágenes, por defecto viene en blanco pero pueden cambiarlo por el que deseen. 

3.     Si quieren agregar o quitar imágenes del efecto deben hacerlo agregando un párrafo extra de código (como se muestra en el vídeo) pero además en las partes del código que he dejado en púrpura, por ejemplo al agregar una sexta imagen agregar en cada una.foto-seis , .foto-seis img , .foto-seis a, esto además del ultimo párrafo. Por el contrario si lo que quieren es tener menos imágenes basta con borrar las sobrantes, por ejemplo si quieren tener solo tres borrar el rastro de la 4ta y 5ta.

Y si quieres tener 2 acordeones de imágenes en una sola entrada basta con que copies el código de nuevo y cambies las imágenes. Recuerda hacerlo siempre en html y pegalo al final de todo.

 

si quieres tener 2 acordeones de imágenes en una sola entrada basta con que copies el código de nuevo y cambies las imágenes. Recuerda hacerlo siempre en html y pegalo al final de todo.
http://blogtutoriales-plantillasbloggers.blogspot.com/2014/04/efecto-acordeon-2.html