{ Tutorial - Barra Top Multicolor HTML/CSS

¡Hola! Hoy por primera vez publicaré un tutorial; lo cierto es que nunca me apeteció hacer alguno. Ya hay demasiados blogs de tutoriales en blogger (￣ω￣)/ Pero este me pareció muy interesante, y me encantó el resultado.

Vale aclarar que no me pertenece. Esto es una traducción de un tutorial para tumblr, que edite para que pueda ser colocado en blogger.

CRÉDITOS A: excolo

Preview en mi blog de pruebas: clic aquí

En mi vista previa yo solo usé dos colores (rosado y morado). Para los que aún no se dan cuenta son los están en la barra de arriba (arriba de la cortina).

NOTA: Para copiar los códigos control + C

1. Primero debemos ir a editar Plantilla / HTML

2. Pegar antes de ]]></b:skin> el siguiente código CSS:

#colour-bar {

   width:100%;

   height:10px;  /* ALTURA DE LA BARRA */

   overflow:hidden;

}

.colour-part { 

    width:20%;

    height:100%;

    float:left;

}

3. Pegar después de /head el siguiente código HTML:

<div id="colour-bar">

<div class="colour-part" style="background-color:#F0078D;"></div>

<div class="colour-part" style="background-color:#FA8B1A;"></div>

<div class="colour-part" style="background-color:#FFD602;"></div>

<div class="colour-part" style="background-color:#8CC73A;"></div>

<div class="colour-part" style="background-color:#0087FE;"></div>

</div>

4. Cambiar los códigos de colores a los que tu desees. También puedes editar la altura de la barra, en el código de height de #colour-bar.

Puedes poner los colores que quieras. Como yo en mi vista previa usé solo dos colores de mi paleta. O también puedes hacerlo como un arco iris multicolor (ﾉ>ヮ<)ﾉ 

Cualquier duda en los comentarios.