[Tutoriales] Gadget Bienvenidos con menú simple

Holiiii!!! hoy os traigo un tutorial para poner un gadget de bienvenidos como el que está en la fotito, con un menú simple de Annyz-kawaii-blog, normas y una fotito kawaii. Los iconitos también son de Annyz.

Este tuto se me ocurrió hacerlo porque justo lo puse en la nueva plantilla de el blog, que estoy haciendo, y, bueno, esto lo puede hacer cualquiera, pero bueno, me dio por hacerlo y espero que os sirva.

Además, también tendrá la explicación para ponerle un pequeño y kawaii efecto a la imagen, que he aprendido ha hacer hace nadita en internet, y que resulta muy bonito y una opción mejor a ponerle y quitarle opacidad a las imágenes.

Bien, para empezar, vamos a poner en el blog los estilos del menú. Nos vamos a Plantilla>Editar HTML, pulsamos en Ctrl+F y buscamos el siguiente código:

]]></b:skin>

Y justo antes, pegamos el siguiente código:

#naviday {
margin:2px; /*Esto es el margen entre los menús*/
font-size: 10px; /*Tamaño de la letra*/
letter-spacing: 1px; /*Espacio entre letra y letra*/
line-height: 150%;
text-align:left; /*Donde va el texto*/
color: #2e2e2e; /*Color del texto*/
padding-left:18px;
text-decoration: none;
border-bottom: 1pt solid #F6CECE; /*Borde de abajo*/
color: #2e2e2e; /*Color del texto*/
background:#e6e6e6; /*Color del fondo*/
display: block;
text-transform: ;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#naviday:hover {
letter-spacing: 2px; /*Espacio entre letra y letra*/
background: #F6CECE;/*Color del fondo*/
color: #2e2e2e; /*Color del texto*/
border-bottom: 1pt solid #e6e6e6; /*Borde de abajo*/
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

Para los bordes, podéis cambiar solid (Que es una línea simple) Por dashed(Guiones) o Dotted (Con puntos) y para cambiar los colores,  podéis mirarlos en esta página. Y bueno, así es como quedaría en la plantilla:

Ahora vamos a poner los códigos para el efecto de la imagen:

.kawaii {
-webkit-filter: grayscale(40%);
border-radius:5px; /*Bordes redondeados*/
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.kawaii:hover {
-webkit-filter: grayscale(0%);
border-radius: 50px; /*Bordes redondeados*/
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

Violeta: Cuanto más porcentaje le des, más gris se pondrá, osea con menos color.

Bueno, y al final quedaría así en la plantilla:

Ahora vamos a ponerlo en el blog:

Vamos a Diseño>Añadir Gadget>HTML/Javascript y pegamos el siguiente código:

<center><span style="font-family:Times;"><span style="color:#ff6666;font-size:15px;">Bienvenidos</span><span><p><div class="kawaii"><img src="Url de tu imagen" style="border: 1px solid #ff6666;" / /></div></p><p>Tu texto</p></span><p><span style="color:#ff6666;font-size:13px">Normas:</span></p><p><img src="Url de tu icono" / />Tu norma<br /><img src="Url de tu icono" / />Tu norma<br /><img src="Url de tu icono" / />Tu norma<br /><img src="Url de tu icono" / />Tu norma<br /></p></span></center>
<center>
<a id="naviday" href="DIRECCION DE TU ENTRADA" title="TITLE">Nombre</a>
<a id="naviday" href="DIRECCION DE TU ENTRADA" title="TITLE">Nombre</a>
<a id="naviday" href="DIRECCION DE TU ENTRADA" title="TITLE">Nombre</a>
<a id="naviday" href="DIRECCION DE TU ENTRADA" title="TITLE">Nombre</a></center>

• El rojo, son los colores de los títulos de Bienvenidos el primero y de Normas el segunda.
• El naranja es la Url de tu imagen, si no la quieres con el efecto, eliminas lo que está en blanco.
• El amarillo son los estilos para el borde de la imagen, si no quieres que tenga borde, borra style="border: 1px solid #ff6666;" .
• El verde es la url del icono, que puedes encontrar aquí.
• El azul es tu norma
• El violeta la Url de tu entrada o página.
• Y el rosa el nombre de la página.

Espero que se entienda y puedan editarlo bien. Después de eso, le dan a guardar, y ya lo tienen.

Espero que les haya gustado el tutorial, y que os sirva de algo en vuestra página o vuestro blog. Hasta mañana y feliz finde!!!