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.

6 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. Hola Mi nombre es Laura, Hace poco he abierto un Blog de libros, hay podras encontrar un poco de todo, Noticias,Reseñas,Sipnosis... Te invito a que si te gusta leer te pases por mi Blog.Los inicios son dificiles y por eso intento que me conozcan, que conozcan la pasion por la lectura y entre todas nos sintamos mejor frente un libro ya sea digital o a papel, Si te gusta sigueme. Aqui te dejo el enlace a mi blog: http://creatiiveread.blogspot.com/ Pd: Si tienes un boton y quieres podemos afiliarnos.

    ResponderEliminar
  5. Hola!, si soy otra vez la pesada de turno jaja. Muchas gracias por pasar por mi blog y felicitarme, Me encanta muchísimo tu blog, me tiene enamorada, tan rosadito y tan kawaiiso jaja. Bueno, me despido que tengas un bonito domingo majisima.

    ResponderEliminar
  6. 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