Cómo hacer un menú con etiquetas

Hoy os voy a enseñar a hacer un menú con vuestras etiquetas, es muy fácil y lo único que hay que hacer es añadir un CSS. Podéis hacerlo ya sea para sustituir al menú que os he enseñado anteriormente o para hacer un segundo menú con las secciones que tenéis en vuestro blog. Lo he probado y funciona perfectamente así que no creo que tengáis problemas para instalarlo. 

Lo primero que tenéis que hacer es ir a diseño, añadir nuevo gadget y seleccionar Etiquetas. Es importante que pongáis que esté en nube porque de otra forma este código no sirve para nada, ¿vale? para personalizarlo tenéis que hacer lo de siempre: Tema, personalizar, avanzado y añadir CSS. 

Pegad este código:

.cloud-label-widget-content {
text-align: center; /*Donde queréis que quede alineado el texto*/
float:center;
font: normal normal 12px Open Sans; /*Tipografía*/
text-transform: uppercase; /*Para que quede en mayúsculas, si no borrar esta línea*/
}
.label-size a {
display: block;
margin: 2px 2px 0 0;
padding: 4px;
border-left: 5px solid #C0392B; /*Si queremos borde, si no borrar esta línea*/
color:#212121; /*color del texto*/
background: #EFEBE9;  /*color de fondo, si lo queréis transparente poned none o transparent*/
text-decoration:none;
letter-spacing: 2px;
transition: all 0.4s ease-in-out 0s;
}
.label-size a:hover {
border-left: 15px solid #DC7F9B; /*Si queremos borde, si no borrar esta línea*/
color:#757575; /*Color del texto al pasar el ratón por encima*/
background: transparent; /*Color del fondo al pasar el ratón por encima, podéis ponerle color*/
text-decoration:none;
letter-spacing: 4px;
transition: all 0.4s ease-in-out 0s;
}
.label-size-1 a {font-size: 12px;}
.label-size-2 a {font-size: 12px;}
.label-size-3 a {font-size: 12px;}
.label-size-4 a {font-size: 12px;}
.label-size-5 a {font-size: 12px;}

.label-size-1 {opacity:1;}
.label-size-2 {opacity:1;}
.label-size-3 {opacity:1;}
.label-size-4 {opacity:1;}
.label-size-5 {opacity:1;}

Como siempre, lo de rojo lo podéis personalizar y lo que está en verde es lo que podéis borrar si no lo queréis. Espero que os sea útil y lo utilicéis mucho, si tenéis algún problema podéis contactar conmigo.

De dónde lo he sacado: el código me lo ha pasado Gema del blog Delirios a máquina porque no lo encontraba.

Cómo poner en el pie de página que esto es mío

¿Habéis visto mi pie de página? Ahí tengo puesto que el diseño y las entradas son mías y que si te quieres llevar algo menciones, porque está un poco feo llevarte cosas sin mencionar. ¿Queréis aprender a hacerlo? 

---

Lo primero que tenéis que hacer es ir a tema y al html, abrir el ctrl+f y buscar: </body> y justo encima tenéis que pegar esto:

 <div class='footer-wrapper'>Tu nombre&#169; Nombre del blog<br/><a href='URL'>Mensaje para dejar claro que está mal</a><br/></div>

Como siempre, lo rojo y lo azul lo podéis cambiar. Y ahora vamos a ponerlo bonito, añadiendo este CC. Tenéis que ir a Tema, personalizar, avanzado y añadir CC:

.footer-wrapper {
background: none; /*Color de fondo del pie de página*/
padding-top: 30px; /*Con esta línea y la siguiente ajustamos la altura, para que quede bien, los dos valores deben ser iguales*/
padding-bottom: 30px;
width: 100%;
text-align: center;
font: normal normal 11px Arial; /*Tamaño y tipografía*/
color: #333333; /*Color del texto*/
letter-spacing: 3px; /*Espaciado entre caracteres, si no queréis borrar la línea*/
text-transform: uppercase; /*Para que esté en mayúsculas, si no queréis borrad la línea*/
}

.header .widget {
 text-align:center;}
.header img {margin:0 auto;}


.footer-wrapper a{
  color:#333333; /*Color del enlace (en este caso el aviso legal)*/
  text-decoration:none;
}

.footer-wrapper a:hover{
  color:#333333; /*Color del enlace al pasar el ratón por encima*/
}

Como siempre, lo que está en con color es lo que podéis cambiar y toquetear, en mi caso no tiene fondo pero si queréis cambiar none por un color (siempre con #) y ya está. Espero que os haya gustado. Este código lo saqué de Miss Lavanda pero ya no existe, así que lo que hago es copiar directamente estos códigos de la plantilla de uno de mis blogs. 

Cómo quitar el fondo a las imágenes en blogger

Hasta que encontré la solución definitiva tardé meses porque cada blog dice que hagas una cosa y yo me volví loca porque ninguna era lo que yo buscaba... hasta que lo encontré. Lamentablemente, no sé en qué blog lo encontré así que no os puedo poner la fuente. Este también es bastante fácil y además os voy a poner el código para que directamente lo peguéis encima y no os volváis locos, ¿os parece bien? 

Para esto os tenéis que ir a tema y luego al html. Cuando estéis en html abrid: <b:skin>. Para eso tenéis que darle al numerito que tiene al lado. Buscad: $(image.background.color) y os saldrá el siguiente código.

background: $(image.background.color);
 border: 1px solid $(image.border.color);

 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Pues las dos de arriba las dejáis como están y las tres de abajo las sustituis por esto:

 -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
 box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
}

Y ya está, lo que he hecho ha sido sustituir los números que están fuera del paréntesis por 0 para que las imágenes dejen de tener un fondo raro que les pone blogger por defecto.