Hoy os traigo algo diferente a mi contenido habitual, pero me ha encantado como ha quedado en mi blog y quiero compartirlo con vosotros. Es un tip de cómo crear una tabla que puede ser usado como menú o como listado de contenidos, etc. Os dejo por aquí un ejemplo de como quedaría:
|
Título 1 Título 1.1 Título 1.2 Título 1.3 |
Título 2 Título 2.1 Título 2.2 Título 2.3 |
Título 3 Título 3.1 Título 3.2 Título 3.3 |
Título 4 Título 4.1 Título 4.2 Título 4.3 |
Título 5 Título 5.1 Título 5.2 Título 5.3 |
Paso 1: Añadir un nuevo gadget
- Ve a Diseño
- Añades un nuevo gadget en la zona de Cross-column
- Selecciona la opción: HTML/JavaScript - Añade funciones de terceros u otro código a tu blog.
Paso 2: Configuración menú
- En la parte del código escribe esto:
- Modifica '#' por la dirección a la que quieres enlazar y el nombre de cada enlace
- Por último queda asignar los colores y el despliegue del menú cuando se pase el cursor por encima. Esto se hace con el siguiente texto, que se coloca debajo de la lista del menú, en el mismo sitio.
- Si alguna columna tenéis menos filas basta con colocar la etiqueta:
- Modifica '#' por la dirección a la que quieres enlazar y el nombre de cada enlace
- Por último queda ver los colores (Elegir una cabecera y un pie) y el rombo que va en la segunda parte del texto, podéis modificar la altura (height) y la anchura (width) en cada una de las secciones
<div style="text-align: center;">
<table>
<tbody>
<tr>
<td>
<div class="cabecera_Verde">Título 1</div><br />
<div class="rombo"></div>Título 1.1<br /><br />
<div class="rombo"></div>Título 1.2<br /><br />
<div class="rombo"></div>Título 1.3
</td>
<td>
<div class="cabecera_Azul">Título 2</div><br />
<div class="rombo"></div>Título 2.1<br /><br />
<div class="rombo"></div>Título 2.2<br /><br />
<div class="rombo"></div>Título 2.3
</td>
<td>
<div class="cabecera_Naranja">Título 3</div><br />
<div class="rombo"></div>Título 3.1<br /><br />
<div class="rombo"></div>Título 3.2<br /><br />
<div class="rombo"></div>Título 3.3
</td>
<td>
<div class="cabecera_Rosa">Título 4</div><br />
<div class="rombo"></div>Título 4.1<br /><br />
<div class="rombo"></div>Título 4.2<br /><br />
<div class="rombo"></div>Título 4.3
</td>
<td>
<div class="cabecera_Violeta">Título 5</div><br />
<div class="rombo"></div>Título 5.1<br /><br />
<div class="rombo"></div>Título 5.2<br /><br />
<div class="rombo"></div>Título 5.3
</td>
</tr>
</tbody>
</table>
<div class="pie_Arcoiris"></div>
</div>
</br>
<style type="text/css">
.rombo{width: 5px;display:inline-block;height: 5px;background:
#d24fab;-webkit-transform: rotate(45deg);-moz-transform:
rotate(45deg);-ms-transform: rotate(45deg);-o-transform:
rotate(45deg);transform:
rotate(45deg);padding:1px;margin-top:2px;margin-left:3px;}
.cabecera_Verde{width:100px;height:30px;text-align:center;font-family:satisfy;
padding:1px;vertical-align: middle;font-size:20px;background:
rgba(210,255,82,1);background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%,
rgba(145,232,66,1) 53%, rgba(39,191,25,1) 100%);background:
-webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,255,82,1)),
color-stop(53%, rgba(145,232,66,1)), color-stop(100%,
rgba(39,191,25,1)));background: -webkit-linear-gradient(top, rgba(210,255,82,1)
0%, rgba(145,232,66,1) 53%, rgba(39,191,25,1) 100%);background:
-o-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 53%,
rgba(39,191,25,1) 100%);background: -ms-linear-gradient(top, rgba(210,255,82,1)
0%, rgba(145,232,66,1) 53%, rgba(39,191,25,1) 100%);background:
linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 53%,
rgba(39,191,25,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#d2ff52', endColorstr='#27bf19', GradientType=0 );}
.pie_Verde{height:30px;width:600px;background: rgba(39,191,25,1); background:
-moz-linear-gradient(top, rgba(39,191,25,1) 0%, rgba(145,232,66,1) 47%,
rgba(210,255,82,1) 100%); background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(39,191,25,1)), color-stop(47%, rgba(145,232,66,1)),
color-stop(100%, rgba(210,255,82,1))); background: -webkit-linear-gradient(top,
rgba(39,191,25,1) 0%, rgba(145,232,66,1) 47%, rgba(210,255,82,1) 100%);
background: -o-linear-gradient(top, rgba(39,191,25,1) 0%, rgba(145,232,66,1)
47%, rgba(210,255,82,1) 100%); background: -ms-linear-gradient(top,
rgba(39,191,25,1) 0%, rgba(145,232,66,1) 47%, rgba(210,255,82,1) 100%);
background: linear-gradient(to bottom, rgba(39,191,25,1) 0%, rgba(145,232,66,1)
47%, rgba(210,255,82,1) 100%); filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#27bf19',
endColorstr='#d2ff52', GradientType=0 );}
.cabecera_Azul{width:100px;height:30px;text-align:center;font-family:satisfy;
padding:1px;font-size:20px;background: rgba(32,124,229,1);background:
-moz-linear-gradient(top, rgba(32,124,229,1) 0%, rgba(112,169,219,1) 47%,
rgba(26,84,138,1) 100%);background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(32,124,229,1)), color-stop(47%, rgba(112,169,219,1)),
color-stop(100%, rgba(26,84,138,1)));background: -webkit-linear-gradient(top,
rgba(32,124,229,1) 0%, rgba(112,169,219,1) 47%, rgba(26,84,138,1)
100%);background: -o-linear-gradient(top, rgba(32,124,229,1) 0%,
rgba(112,169,219,1) 47%, rgba(26,84,138,1) 100%);background:
-ms-linear-gradient(top, rgba(32,124,229,1) 0%, rgba(112,169,219,1) 47%,
rgba(26,84,138,1) 100%);background: linear-gradient(to bottom,
rgba(32,124,229,1) 0%, rgba(112,169,219,1) 47%, rgba(26,84,138,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#207ce5',
endColorstr='#1a548a', GradientType=0 );}
.pie_Azul{height:30px;width:600px;background: rgba(26,84,138,1);background:
-moz-linear-gradient(top, rgba(26,84,138,1) 0%, rgba(112,169,219,1) 53%,
rgba(32,124,229,1) 100%);background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(26,84,138,1)), color-stop(53%, rgba(112,169,219,1)),
color-stop(100%, rgba(32,124,229,1)));background: -webkit-linear-gradient(top,
rgba(26,84,138,1) 0%, rgba(112,169,219,1) 53%, rgba(32,124,229,1)
100%);background: -o-linear-gradient(top, rgba(26,84,138,1) 0%,
rgba(112,169,219,1) 53%, rgba(32,124,229,1) 100%);background:
-ms-linear-gradient(top, rgba(26,84,138,1) 0%, rgba(112,169,219,1) 53%,
rgba(32,124,229,1) 100%);background: linear-gradient(to bottom,
rgba(26,84,138,1) 0%, rgba(112,169,219,1) 53%, rgba(32,124,229,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a548a',
endColorstr='#207ce5', GradientType=0 );}
.cabecera_Naranja{width:100px;height:30px;text-align:center;font-family:satisfy;
padding:1px;font-size:20px;background: rgba(241,231,103,1);background:
-moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1)
100%);background: -webkit-gradient(left top, left bottom, color-stop(0%,
rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));background:
-webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1)
100%);background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,
rgba(254,182,69,1) 100%);background: -ms-linear-gradient(top,
rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);background: linear-gradient(to
bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767',
endColorstr='#feb645', GradientType=0 );}
.pie_Naranja{height:30px;width:600px;background: rgba(254,182,69,1); background:
-moz-linear-gradient(top, rgba(254,182,69,1) 0%, rgba(241,231,103,1)
100%);background: -webkit-gradient(left top, left bottom, color-stop(0%,
rgba(254,182,69,1)), color-stop(100%, rgba(241,231,103,1)));background:
-webkit-linear-gradient(top, rgba(254,182,69,1) 0%, rgba(241,231,103,1)
100%);background: -o-linear-gradient(top, rgba(254,182,69,1) 0%,
rgba(241,231,103,1) 100%);background: -ms-linear-gradient(top,
rgba(254,182,69,1) 0%, rgba(241,231,103,1) 100%);background: linear-gradient(to
bottom, rgba(254,182,69,1) 0%, rgba(241,231,103,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb645',
endColorstr='#f1e767', GradientType=0 );}
.cabecera_Rosa{width:100px;height:30px;text-align:center;font-family:satisfy;
padding:1px;font-size:20px;background: rgba(239,1,124,1);background:
-moz-linear-gradient(top, rgba(239,1,124,1) 0%, rgba(247,156,205,1) 80%,
rgba(247,156,205,1) 100%);background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(239,1,124,1)), color-stop(80%, rgba(247,156,205,1)),
color-stop(100%, rgba(247,156,205,1)));background: -webkit-linear-gradient(top,
rgba(239,1,124,1) 0%, rgba(247,156,205,1) 80%, rgba(247,156,205,1)
100%);background: -o-linear-gradient(top, rgba(239,1,124,1) 0%,
rgba(247,156,205,1) 80%, rgba(247,156,205,1) 100%);background:
-ms-linear-gradient(top, rgba(239,1,124,1) 0%, rgba(247,156,205,1) 80%,
rgba(247,156,205,1) 100%);background: linear-gradient(to bottom,
rgba(239,1,124,1) 0%, rgba(247,156,205,1) 80%, rgba(247,156,205,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef017c',
endColorstr='#f79ccd', GradientType=0 );}
.pie_Rosa{height:30px;width:600px;background: rgba(247,156,205,1);background:
-moz-linear-gradient(top, rgba(247,156,205,1) 0%, rgba(247,156,205,1) 20%,
rgba(239,1,124,1) 100%);background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(247,156,205,1)), color-stop(20%, rgba(247,156,205,1)),
color-stop(100%, rgba(239,1,124,1)));background: -webkit-linear-gradient(top,
rgba(247,156,205,1) 0%, rgba(247,156,205,1) 20%, rgba(239,1,124,1)
100%);background: -o-linear-gradient(top, rgba(247,156,205,1) 0%,
rgba(247,156,205,1) 20%, rgba(239,1,124,1) 100%);background:
-ms-linear-gradient(top, rgba(247,156,205,1) 0%, rgba(247,156,205,1) 20%,
rgba(239,1,124,1) 100%);background: linear-gradient(to bottom,
rgba(247,156,205,1) 0%, rgba(247,156,205,1) 20%, rgba(239,1,124,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79ccd',
endColorstr='#ef017c', GradientType=0 );}
.cabecera_Violeta{width:100px;height:30px;text-align:center;font-family:satisfy;
padding:1px;font-size:20px;background:
rgba(210,79,171,1);background:-moz-linear-gradient(top, rgba(210,79,171,1) 0%,
rgba(166,169,177,1) 100%);background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(210,79,171,1)), color-stop(100%,
rgba(166,169,177,1)));background: -webkit-linear-gradient(top,
rgba(210,79,171,1) 0%, rgba(166,169,177,1) 100%);background:
-o-linear-gradient(top, rgba(210,79,171,1) 0%, rgba(166,169,177,1)
100%);background: -ms-linear-gradient(top, rgba(210,79,171,1) 0%,
rgba(166,169,177,1) 100%);background: linear-gradient(to bottom,
rgba(210,79,171,1) 0%, rgba(166,169,177,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#d24fab',
endColorstr='#a6a9b1', GradientType=0 );}
.pie_Violeta{height:30px;width:600px;background:rgba(166,169,177,1);background:-moz-linear-gradient(top,
rgba(166,169,177,1) 0%, rgba(210,79,171,1) 100%);background:
-webkit-gradient(left top, left bottom, color-stop(0%, rgba(166,169,177,1)),
color-stop(100%, rgba(210,79,171,1)));background: -webkit-linear-gradient(top,
rgba(166,169,177,1) 0%, rgba(210,79,171,1) 100%);background:
-o-linear-gradient(top, rgba(166,169,177,1) 0%, rgba(210,79,171,1)
100%);background: -ms-linear-gradient(top, rgba(166,169,177,1) 0%,
rgba(210,79,171,1) 100%);background: linear-gradient(to bottom,
rgba(166,169,177,1) 0%, rgba(210,79,171,1)
100%);filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#a6a9b1', endColorstr='#d24fab', GradientType=0 );}
.cabecera_Arcoiris{width:100px;height:30px;text-align:center;font-family:satisfy;
padding:1px;font-size:20px;background: rgba(34,255,0,1);background:
-moz-linear-gradient(top, rgba(34,255,0,1) 0%, rgba(237,255,163,1) 7%,
rgba(255,183,0,1) 24%, rgba(255,0,0,1) 41%, rgba(255,0,225,1) 56%,
rgba(211,32,227,1) 73%, rgba(32,124,229,1) 86%, rgba(235,233,249,1)
100%);background: -webkit-gradient(left top, left bottom, color-stop(0%,
rgba(34,255,0,1)), color-stop(7%, rgba(237,255,163,1)), color-stop(24%,
rgba(255,183,0,1)), color-stop(41%, rgba(255,0,0,1)), color-stop(56%,
rgba(255,0,225,1)), color-stop(73%, rgba(211,32,227,1)), color-stop(86%,
rgba(32,124,229,1)), color-stop(100%, rgba(235,233,249,1)));background:
-webkit-linear-gradient(top, rgba(34,255,0,1) 0%, rgba(237,255,163,1) 7%,
rgba(255,183,0,1) 24%, rgba(255,0,0,1) 41%, rgba(255,0,225,1) 56%,
rgba(211,32,227,1) 73%, rgba(32,124,229,1) 86%, rgba(235,233,249,1)
100%);background: -o-linear-gradient(top, rgba(34,255,0,1) 0%,
rgba(237,255,163,1) 7%, rgba(255,183,0,1) 24%, rgba(255,0,0,1) 41%,
rgba(255,0,225,1) 56%, rgba(211,32,227,1) 73%, rgba(32,124,229,1) 86%,
rgba(235,233,249,1) 100%);background: -ms-linear-gradient(top, rgba(34,255,0,1)
0%, rgba(237,255,163,1) 7%, rgba(255,183,0,1) 24%, rgba(255,0,0,1) 41%,
rgba(255,0,225,1) 56%, rgba(211,32,227,1) 73%, rgba(32,124,229,1) 86%,
rgba(235,233,249,1) 100%);background: linear-gradient(to bottom,
rgba(34,255,0,1) 0%, rgba(237,255,163,1) 7%, rgba(255,183,0,1) 24%,
rgba(255,0,0,1) 41%, rgba(255,0,225,1) 56%, rgba(211,32,227,1) 73%,
rgba(32,124,229,1) 86%, rgba(235,233,249,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#22ff00',
endColorstr='#ebe9f9', GradientType=0 );}
.pie_Arcoiris{height:30px;width:520px;background:
rgba(235,233,249,1);background: -moz-linear-gradient(top, rgba(235,233,249,1)
0%, rgba(32,124,229,1) 14%, rgba(211,32,227,1) 27%, rgba(255,0,225,1) 44%,
rgba(255,0,0,1) 59%, rgba(255,183,0,1) 76%, rgba(237,255,163,1) 93%,
rgba(34,255,0,1) 100%);background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(235,233,249,1)), color-stop(14%, rgba(32,124,229,1)),
color-stop(27%, rgba(211,32,227,1)), color-stop(44%, rgba(255,0,225,1)),
color-stop(59%, rgba(255,0,0,1)), color-stop(76%, rgba(255,183,0,1)),
color-stop(93%, rgba(237,255,163,1)), color-stop(100%,
rgba(34,255,0,1)));background: -webkit-linear-gradient(top, rgba(235,233,249,1)
0%, rgba(32,124,229,1) 14%, rgba(211,32,227,1) 27%, rgba(255,0,225,1) 44%,
rgba(255,0,0,1) 59%, rgba(255,183,0,1) 76%, rgba(237,255,163,1) 93%,
rgba(34,255,0,1) 100%);background: -o-linear-gradient(top, rgba(235,233,249,1)
0%, rgba(32,124,229,1) 14%, rgba(211,32,227,1) 27%, rgba(255,0,225,1) 44%,
rgba(255,0,0,1) 59%, rgba(255,183,0,1) 76%, rgba(237,255,163,1) 93%,
rgba(34,255,0,1) 100%);background: -ms-linear-gradient(top, rgba(235,233,249,1)
0%, rgba(32,124,229,1) 14%, rgba(211,32,227,1) 27%, rgba(255,0,225,1) 44%,
rgba(255,0,0,1) 59%, rgba(255,183,0,1) 76%, rgba(237,255,163,1) 93%,
rgba(34,255,0,1) 100%);background: linear-gradient(to bottom,
rgba(235,233,249,1) 0%, rgba(32,124,229,1) 14%, rgba(211,32,227,1) 27%,
rgba(255,0,225,1) 44%, rgba(255,0,0,1) 59%, rgba(255,183,0,1) 76%,
rgba(237,255,163,1) 93%, rgba(34,255,0,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9',
endColorstr='#22ff00', GradientType=0 );}
</style>
¡Listo!
Si quieres leer más tips
No hay comentarios:
Publicar un comentario