TOOLBOXBLOG: ACORDEÓN DE BEGO 1x4

CÓDIGO: SLIDER ACORDEÓN BEGO (1x4)

(http://tympanus.net/Tutorials/ElegantAccordion/)

El código entero lo vamos a insertar en tres pasos:

1º) Primer paso:

Primero vamos a poner las columnas con el texto, rotulo y el enlace al que queremos que se dirijan al clikar. Este es el código que hay que poner tantas veces como imágenes se quieran poner, pero pensando que todo está diseñado para soportar 4 imágenes y habría que modificar parámetros para que entren más o menos de las previstas.

Este primer código se ha de ubicar:

a) en una página o una entrada,
b) (o directamente, si se quiere y se sabe exactamente donde se quiere que aparezca, en la plantilla editando en html, acordaros en este caso de encerrar el código con una señal como esta /*** MENU ACORDEON */. Pero para evitar líos es mejor ubicar este código en la opción a)

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat

nulla pariatur.</p>

</div>

</li>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo. </p>

<a href="http://socialrealyty.blogspot.com.es/p/pagina-principal-de-inicio.html">sigue leyendo→</a>

</div>

</li>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat

nulla pariatur.</p>

<a href="http://visualrealyty.blogspot.com.es/p/musica-en-vivo.html">VISUALIZA→</a>

</div>

</li>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

sit aspernatur aut odit aut fugit, sed quia consequuntur magni

dolores eos qui ratione voluptatem sequi nesciunt.</p>

</div>

</li>

</ul>

Después de colocar este código en su sitio hay que personalizar sustituyendo el texto de color por el que se quiera poner

El texto rojo à corresponde al Rotulo o titulo.

El texto azul à corresponde al texto que lleva el enlace

El texto verde à corresponde a la dirección del enlace de una página web o blog.

2º) segundo paso:

Ahora Continuamos en el CSS

A continuación insertamos este código en el CSS (aunque luego aparecerá automáticamente delante de ]]></b:skin> ):

<div class="heading">Heading</div>

<h2>Heading</h2>

<p>Some descriptive text</p>

</div>

</li>

</ul>

<div class="heading">Heading</div>

<h2>Heading</h2>

<p>Some descriptive text</p>

</div>

</li>

</ul>

<div class="heading">Heading</div>

<h2>Heading</h2>

<p>Some descriptive text</p>

</div>

</li>

</ul>

<div class="heading">Heading</div>

<h2>Heading</h2>

<p>Some descriptive text</p>

</div>

</li>

</ul>

ul.accordion{

list-style:none;

position:absolute;

right:80px;

top:0px;

font-family: Cambria, serif;

font-size: 16px;

font-style: italic;

line-height: 1.5em;

}

ul.accordion li{

float:right;

width:115px;

height:480px;

display:block;

border-right:2px solid #fff;

border-bottom:2px solid #fff;

background-color:#fff;

background-repeat:no-repeat;

background-position:center center;

position:relative;

overflow:hidden;

cursor:pointer;

-moz-box-shadow:1px 3px 15px #555;

-webkit-box-shadow:1px 3px 15px #555;

box-shadow:1px 3px 15px #555;

}

ul.accordion li.bg1{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg);

}

ul.accordion li.bg2{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSkwZ1rLLDoPD3qaWTyI5Ag3Yb7sno3B9VI-DO3sBFqzIb6pviJmIzS0IVSx6_vzo_bgMyuxZ9SKaLzJr8iy1yfhetReEOA1mCUNUQeJ7_RVZbxuRBe3iL1CHwXOK1xbsY4t6Kb6BphR4/s1600/24+TRABAJO+FINAL+X.jpg);

}

ul.accordion li.bg3{

}

ul.accordion li.bg4{

}

ul.accordion li.bleft{

border-left:2px solid #fff;

}

ul.accordion li .heading{

background-color:#fff;

padding:10px;

margin-top:60px;

opacity:0.9;

text-transform:uppercase;

font-style:normal;

font-weight:bold;

letter-spacing:1px;

font-size:14px;

color:#444;

text-align:center;

text-shadow:-1px -1px 1px #ccc;

}

ul.accordion li .description{

position:absolute;

width:480px;

height:175px;

bottom:0px;

left:0px;

display:none;

}

ul.accordion li .description h2{

text-transform:uppercase;

font-style:normal;

font-weight:bold;

letter-spacing:1px;

font-size:45px;

color:#444;

text-align:left;

margin:0px 0px 15px 20px;

text-shadow:-1px -1px 1px #ccc;

}

ul.accordion li .description p{

line-height:14px;

margin:10px 22px;

font-family: "Trebuchet MS", sans-serif;

font-size: 12px;

font-style: italic;

font-weight: normal;

text-transform: none;

letter-spacing: normal;

line-height: 1.6em;

}

ul.accordion li .description a{

position:absolute;

bottom:5px;

left:20px;

text-transform:uppercase;

font-style:normal;

font-size:11px;

text-decoration:none;

color:#888;

}

ul.accordion li .description a:hover{

color:#333;

text-decoration:underline;

}

ul.accordion li .bgDescription{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2LawQ4DggCBrgOwqt3i3Vjaat268lC7XKPd2znHwePjYIudqQoY1X2OnkbFoDAKC0XXowctbbEWdKW91Uyin7CG5ZG0-lrhgqR4XL8ltsdvg5mM4l6R6U1j1i5BJk_1LqVh11S63sJ1k/s1600/fondo3.png) repeat-x top left;

height:340px;

position:absolute;

bottom:0px;

left:0px;

width:100%;

display:none;

}

Ahora hay que sustituir las direcciones de las imágenes que aquí he puesto en rojo por las direcciones de las imágenes que se quieran poner.

Y En el espacio en verde hay que poner la dirección, o url, de una imagen con formato png. Esta imagen tiene que ser un degradado de transparente a blanco hecha con Photoshop o similar y guardada en png. para que se funda con la imagen (Se puede utilizar la que he puesto ya en el código, pero se puede cambiar por otro png si se prefiere otro color en lugar del blanco ).

3º) Tercer paso.

THE JAVASCRIPT

Ahora vamos a plantilla à html: y En primer lugar, incluimos la librería jQuery antes de la etiqueta final del cuerpo:

Buscar este código en la plantilla

</head>

E Insertar el siguiente código arriba del </head> que encontraste

<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
type='text/javascript'/><script type='text/javascript'>

$(function() {

   
$(&#39;#accordion &gt; li&#39;).hover(

        function
() {

            var
$this = $(this);

$this.stop().animate({'width':'480px'},500);

           
$(&#39;.heading&#39;,$this).stop(true,true).fadeOut();

           
$(&#39;.bgDescription&#39;,$this).stop(true,true).slideDown(500);

           
$(&#39;.description&#39;,$this).stop(true,true).fadeIn();

},

        function
() {

            var
$this = $(this);

           
$this.stop().animate({&#39;width&#39;:&#39;115px&#39;},1000);

           
$(&#39;.heading&#39;,$this).stop(true,true).fadeIn();

           
$(&#39;.description&#39;,$this).stop(true,true).fadeOut(500);

           
$(&#39;.bgDescription&#39;,$this).stop(true,true).slideUp(700);

}

);

});

</script>

Finalmente guardar todo.

NOTAZA:

si el ancho del blog es inferior al ancho que ocupa el acordeón cuando se abre, la foto bajará a la línea de abajo, por lo tanto hay que ensanchar el blog (plantilla à personalizar à ajustar ancho)

Cambiando la cifra que está en rojo, 500 por 1000 parece que se soluciona el problema, pero puede depender del ancho de la plantilla del blog, por lo tanto es cuestión de probar y variar esta cifra o ajustar el ancho en la plantilla del blog

HOLA

HOLA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
mira mas→
QUE TAL

QUE TAL
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
sigue leyendo→
TE VA

TE VA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
VISUALIZA→
LA LIFE

LA LIFE
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
more→

Páginas

ACORDEÓN DE BEGO 1x4

CÓDIGO: SLIDER ACORDEÓN BEGO (1x4)

(http://tympanus.net/Tutorials/ElegantAccordion/)

NOTAZA:

si el ancho del blog es inferior al ancho que ocupa el acordeón cuando se abre, la foto bajará a la línea de abajo, por lo tanto hay que ensanchar el blog (plantilla à personalizar à ajustar ancho)

Cambiando la cifra que está en rojo, 500 por 1000 parece que se soluciona el problema, pero puede depender del ancho de la plantilla del blog, por lo tanto es cuestión de probar y variar esta cifra o ajustar el ancho en la plantilla del blog

HOLA

QUE TAL

TE VA

LA LIFE

No hay comentarios:

Publicar un comentario

flecha