]
TooLBoXBLoG

martes, 4 de noviembre de 2014

CODIGO ACORDEÓN 2x5 MODIFICADO

Acordeon de Imagenes CHULAS

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

NO QUIERO VERLO

Como se hace:

Primero poner en html el siguiente código en el html de la plantilla del blogger, hay que colocarlo después del primer  <head> que aparece al principio en el html:
<link href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css'>
<script src='http://code.jquery.com/jquery-1.9.1.js'/>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'/> <link/>
(si la plantilla ya tiene otro código jquery, entonces no hace falta ponerlo, pero en todo caso probar y si da problemas omitir este primer paso)


A continuación poner el siguiente código en una página, entrada, o donde se quiere que aparezca el slider:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
 background: #e2e2e2 url(https://lh4.googleusercontent.com/-5lq26FE8Q08/T14X6urDoHI/AAAAAAAAAYc/HxOCtz028-A/s6/bg.png) repeat;
 margin:0;
}

/* for the tables version */

.acordeon {
 border-collapse:collapse;
 padding:0px;
 margin:0px auto;
 width:555px;
 height:400px;
 box-shadow: 0 0 5px #333;
}
.acordeon td {
 padding:0;
 width:136px;
 height:117px;
 border:2px solid #fff;
 -moz-transition: 0.7s;
 -ms-transition: 0.7s;
 -o-transition: 0.7s;
 -webkit-transition: 0.7s;
 transition: 0.7s;
}
.acordeon td.p1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}
.acordeon td.p2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-YohPFHNFyj52k-VtK2lcbhB_kEKAMCqyx1egvrUVp7WULk732jsDyy_l6j93K72CiTiQpLOP8yoJFHAczMj_zB_DcDbt2kVbMMrufWe8VpkxmfOeotn_f9V7kPL5n9J8cMVkvhYBUg/s1600/18+LLUVIA+CON+NIEVE.jpg) no-repeat center center;}
.acordeon td.p3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p5 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-YohPFHNFyj52k-VtK2lcbhB_kEKAMCqyx1egvrUVp7WULk732jsDyy_l6j93K72CiTiQpLOP8yoJFHAczMj_zB_DcDbt2kVbMMrufWe8VpkxmfOeotn_f9V7kPL5n9J8cMVkvhYBUg/s1600/18+LLUVIA+CON+NIEVE.jpg) no-repeat center center;}
.acordeon td.p6 {background:url(https://lh6.googleusercontent.com/-_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p7 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p8 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEXL0zLDKrRFKEVgGJZvqz_3GwR2L5u-frKh7ZvSdseGnNt4QKBECfsyoqv_Kv7TvpJYu9NmXNOH4Dr9cym8BLZzkEsgs9RB04tPoPuFjkQyRc2ftCaByveTKzYlkzPdZufIxx_EOBfTR/s1600/24+TRABAJO+FINAL+X.jpg) no-repeat center center;}
.acordeon td.p9 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p10 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}


.acordeon td {width:50px; height:50px;}
.acordeon tr:hover td {height:320px;}
.acordeon td:hover {width:480px; height:320px;}

h1 {
 font-family:consolas, arial, sans-serif;
 font-size:50px;
 color:#999999;
 text-shadow:#fff 0px 1px 0, #333 0 -1px 0;
 font-weight: bold;
 margin: 20px 0;
 letter-spacing:-1px;
}
-->
</style></head>

<body>
 <h1 align="center">Acordeon de Imagenes GUAPAS O CHULAS</h1>
 <table class="acordeon">
  <tbody><tr><td class="p1 c1"></td><td class="p2 "></td><td class="p3"></td><td class="p4"></td><td class="p5"></td></tr>
  <tr><td class="p6 c1"></td><td class="p7"></td><td class="p8"></td><td class="p9"></td><td class="p10"></td></tr>
 </tbody></table>
</body>
</html>

Por último ya solo queda cambiar lo que está en color:
  • sustituir las direcciones (url) de las imágenes dentro de los paréntesis (url de la imagen), 
  • y cambiar el título del acordeón.

He comprobado que se puede omitir el paso de la plantilla (en especial si ya hay otro jquery en el html), pero en todo caso probar primero a poner directamente el código siguiente en un página o entrada directamente.

<style type="text/css">
<!--
body {
 background: #e2e2e2 url(https://lh4.googleusercontent.com/-5lq26FE8Q08/T14X6urDoHI/AAAAAAAAAYc/HxOCtz028-A/s6/bg.png) repeat;
 margin:0;
}

/* for the tables version */

.acordeon {
 border-collapse:collapse;
 padding:0px;
 margin:0px auto;
 width:555px;
 height:400px;
 box-shadow: 0 0 5px #333;
}
.acordeon td {
 padding:0;
 width:136px;
 height:117px;
 border:2px solid #fff;
 -moz-transition: 0.7s;
 -ms-transition: 0.7s;
 -o-transition: 0.7s;
 -webkit-transition: 0.7s;
 transition: 0.7s;
}
.acordeon td.p1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}
.acordeon td.p2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-YohPFHNFyj52k-VtK2lcbhB_kEKAMCqyx1egvrUVp7WULk732jsDyy_l6j93K72CiTiQpLOP8yoJFHAczMj_zB_DcDbt2kVbMMrufWe8VpkxmfOeotn_f9V7kPL5n9J8cMVkvhYBUg/s1600/18+LLUVIA+CON+NIEVE.jpg) no-repeat center center;}
.acordeon td.p3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p5 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-YohPFHNFyj52k-VtK2lcbhB_kEKAMCqyx1egvrUVp7WULk732jsDyy_l6j93K72CiTiQpLOP8yoJFHAczMj_zB_DcDbt2kVbMMrufWe8VpkxmfOeotn_f9V7kPL5n9J8cMVkvhYBUg/s1600/18+LLUVIA+CON+NIEVE.jpg) no-repeat center center;}
.acordeon td.p6 {background:url(https://lh6.googleusercontent.com/-_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p7 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p8 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEXL0zLDKrRFKEVgGJZvqz_3GwR2L5u-frKh7ZvSdseGnNt4QKBECfsyoqv_Kv7TvpJYu9NmXNOH4Dr9cym8BLZzkEsgs9RB04tPoPuFjkQyRc2ftCaByveTKzYlkzPdZufIxx_EOBfTR/s1600/24+TRABAJO+FINAL+X.jpg) no-repeat center center;}
.acordeon td.p9 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p10 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}


.acordeon td {width:50px; height:50px;}
.acordeon tr:hover td {height:320px;}
.acordeon td:hover {width:480px; height:320px;}

h1 {
 font-family:consolas, arial, sans-serif;
 font-size:50px;
 color:#999999;
 text-shadow:#fff 0px 1px 0, #333 0 -1px 0;
 font-weight: bold;
 margin: 20px 0;
 letter-spacing:-1px;
}
-->
</style></head>

<body>
 <h1 align="center">Acordeon de Imagenes GUAPAS O CHULAS</h1>
 <table class="acordeon">
  <tbody><tr><td class="p1 c1"></td><td class="p2 "></td><td class="p3"></td><td class="p4"></td><td class="p5"></td></tr>
  <tr><td class="p6 c1"></td><td class="p7"></td><td class="p8"></td><td class="p9"></td><td class="p10"></td></tr>
 </tbody></table>
</body>
</html>






MODIFICACIONES:
Este slider solo muestra el conjunto de imágenes que colocamos pero sin hacer ninguna función.
Pero si se quieren direccionar las imágenes a otra pagina, o entrada, habrá que pegar este otro código (omito el primer script , como en el caso anterior), y luego cambiar las direccones que he marcado

  • en azul está el titulo
  • en purpura se pega la dirección de la imagen
  • y en rojo se pega la dirección del enlace


<style type="text/css">
<!--
body {
 background: #e2e2e2 url(https://lh4.googleusercontent.com/-5lq26FE8Q08/T14X6urDoHI/AAAAAAAAAYc/HxOCtz028-A/s6/bg.png) repeat;
 margin:0;
}

/* for the tables version */

.acordeon {
 border-collapse:collapse;
 padding:0px;
 margin:0px auto;
 width:555px;
 height:400px;
 box-shadow: 0 0 5px #333;
}
.acordeon td {
 padding:0;
 width:136px;
 height:117px;
 border:2px solid #fff;
 -moz-transition: 0.7s;
 -ms-transition: 0.7s;
 -o-transition: 0.7s;
 -webkit-transition: 0.7s;
 transition: 0.7s;
}
.acordeon td.p1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}
.acordeon td.p2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-YohPFHNFyj52k-VtK2lcbhB_kEKAMCqyx1egvrUVp7WULk732jsDyy_l6j93K72CiTiQpLOP8yoJFHAczMj_zB_DcDbt2kVbMMrufWe8VpkxmfOeotn_f9V7kPL5n9J8cMVkvhYBUg/s1600/18+LLUVIA+CON+NIEVE.jpg) no-repeat center center;}
.acordeon td.p3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p5 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-YohPFHNFyj52k-VtK2lcbhB_kEKAMCqyx1egvrUVp7WULk732jsDyy_l6j93K72CiTiQpLOP8yoJFHAczMj_zB_DcDbt2kVbMMrufWe8VpkxmfOeotn_f9V7kPL5n9J8cMVkvhYBUg/s1600/18+LLUVIA+CON+NIEVE.jpg) no-repeat center center;}
.acordeon td.p6 {background:url(https://lh6.googleusercontent.com/-_dtMmSY3rgA/T2UU0ffbRhI/AAAAAAAAAaw/5K4uGfS9_SU/s500/nice-abstract.jpg) no-repeat center center;}
.acordeon td.p7 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_14tgya8lrA8er3OoXTp1YhHuuYOpQ1TbV5UgJ_3YNBTsTw1WIMhjkYEACSVHPgR4kn63kqTR_RaSIC3eXdAIL6QXaUSSQ1l3vNsr7ud_EYuycYZ75Pcstil3z-MsYYrLXXeflr4mlVw/s1600/07+EFECTO+POP+ART+EVA2222.jpg) no-repeat center center;}
.acordeon td.p8 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEXL0zLDKrRFKEVgGJZvqz_3GwR2L5u-frKh7ZvSdseGnNt4QKBECfsyoqv_Kv7TvpJYu9NmXNOH4Dr9cym8BLZzkEsgs9RB04tPoPuFjkQyRc2ftCaByveTKzYlkzPdZufIxx_EOBfTR/s1600/24+TRABAJO+FINAL+X.jpg) no-repeat center center;}
.acordeon td.p9 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhiSrA969Y8-hSoExrckfBdFK-pFEaFxWLNI7MD8vjq0S7ou10VDh4NPnC9SqKrNb08d5RxLyCPiZgRj5reAxfVUt5Iv-vCZyzn4kl4iLnrsq1upSm3dqxT1ib4YLXhnXxYvX_AHSWDU/s1600/85548112_My3am0y_1401174606.jpg) no-repeat center center;}
.acordeon td.p10 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHcy59qx-a8N5kgWy9eOnK1ZK00KInCGc6L88innSRfdtaQftIuMkyTA7a0FjgVxRoa-Ps4LiGx6iogHFtmLiVvFXHSeUKuP5QsAQoC3AC4mokhIyx_yMSotnfReeGwvmDydTMkaU9Lma/s1600/TRABAJO+FINAL+FINAL.jpg) no-repeat center center;}

.acordeon td {width:50px; height:50px;}
.acordeon tr:hover td {height:320px;}
.acordeon td:hover {width:480px; height:320px;}

h1 {
 font-family:consolas, arial, sans-serif;
 font-size:50px;
 color:#999999;
 text-shadow:#fff 0px 1px 0, #333 0 -1px 0;
 font-weight: bold;
 margin: 20px 0;
 letter-spacing:-1px;
}

h2 {
position: relative;
visibility: hidden
}

-->
</style></head>

<body>
 <h1 align="center">
Acordeon de Imagenes CHULAS</h1>
<table class="acordeon">
<tbody>
<tr>
<td class="p1 c1"><a href="http://toolboxxblog.blogspot.com.es/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p2"><a href="http://laboratoryrealyty.blogspot.com.es/p/aqui-su-texto-la-muestra-del-poder-de.html" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p3"><a href="http://www.colorhexa.com/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p4"><a href="http://www.colorhexa.com/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p5"><a href="http://toolboxxblog.blogspot.com.es/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td></tr>
<tr><td class="p6 c1"><a href="https://laboratoryrealyty.blogspot.com.es/p/aqui-su-texto-la-muestra-del-poder-de.html" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p7"><a href="https://laboratoryrealyty.blogspot.com.es/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p8"><a href="http://toolboxxblog.blogspot.com.es/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p9"><a href="http://www.colorhexa.com/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td>
<td class="p10"><a href="http://toolboxxblog.blogspot.com.es/" target="_blank"><h2>
NO QUIERO VERLO</h2>
</a></td></tr>
</tbody></table>
</body>
</html>

En este código hemos añadido también target="_blank" después de una dirección para que abra el enlace en otra página. Ejemplo;
<a href="http://toolboxxblog.blogspot.com.es/" target="_blank">
Pero si se quiere que se abra en la misma página entonces solo hay que suprimirlo.
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)