m o n s t e r ♡

Bienvenidos a Popsicle Monster. Un blog de gráficos & recursos.
Icons | wallpappers | tutoriales | avatares | firmas | banners

h e y ! ♡

No re-bloguear | Re-distribuir No copy-cats Créditos se agradecen Solo para uso personal

b l o g s | f a v o r i t o s ♡


sábado, 31 de mayo de 2014

{ 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.

4 comentarios:

  1. Me gusta mucho el efecto :D .. muchas gracias por el tuto :3 ..

    ResponderEliminar
  2. ahh I love this bar <3 thank you for the tutorial ^^

    ResponderEliminar
  3. ¡Hola, linda! La verdad es que me ha gustado mucho el tutorial, es algo que se ve sencillo pero que queda muy lindo, estoy pensando en ponerlo en mi blog :)
    Por cierto, me gusta el nuevo diseño de tu blog; tus diseños siempre me parecen muy cute ^^

    Espero que estés genial; un besote!

    ResponderEliminar
  4. holi tengo una duda me sigues la verdad no se no podia seguir tu blog pero ahora si me decia error xD

    http://mundochinnixarchi.blogspot.com/

    besos

    ResponderEliminar