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 2
|
Título 3
|
Título 4
|
Título 5
|
Puedes colocarlo de dos formas:
- La primera como menú en la opción de diseño, añades un nuevo gadget en la zona de Cross-column, y añades el texto te voy a poner más abajo.
- La segunda opción es colocarla en una entrada o pagina del blog, para ello basta con cambiar de Redactar a HTML
En la primera parte, se configura los textos, de la siguiente manera:
<table><tbody>
<tr><td>
<div class="cabecera_Verde">Título 1</div>
<div class="rombo"></div>Título 1.1
<div class="rombo"></div>Título 1.2
<div class="rombo"></div>Título 1.3
</td>
<td>
<div class="cabecera_Azul">Título 2</div>
<div class="rombo"></div>Título 2.1
<div class="rombo"></div>Título 2.2
<div class="rombo"></div>Título 2.3
</td>
<td>
<div class="cabecera_Naranja">Título 3</div>
<div class="rombo"></div>Título 3.1
<div class="rombo"></div>Título 3.2
<div class="rombo"></div>Título 3.3
</td>
<td>
<div class="cabecera_Rosa">Título 4</div>
<div class="rombo"></div>Título 4.1
<div class="rombo"></div>Título 4.2
<div class="rombo"></div>Título 4.3
</td>
<td>
<div class="cabecera_Violeta">Título 5</div>
<div class="rombo"></div>Título 5.1
<div class="rombo"></div>Título 5.2
<div class="rombo"></div>Título 5.3
</td>
</tr>
</tbody></table>
<div class="pie_Arcoiris"></div>
</div>
Si alguna columna tenéis menos filas basta con colocar la etiqueta
<br />
y si queréis colocar un enlace en cada uno de ellos para enlazarlo a una pagina o entrada, cambiar el nombre del titulo por lo siguiente:
<a href='LINK'>Título</a>
Por último queda ver los colores 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
<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></center>
Si tenéis alguna duda decírmelo en los comentarios e intento solucionarlo.
No hay comentarios:
Publicar un comentario