FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Coloca un menú personalizado

6 feb. 2013
¡Hola bellas! Habrán visto que en mi plantilla descargable True Colours hay debajo del header un menu super chulo completamente personalizado, aquí les explico cómo ponerlo y cómo personalizarlo a su gusto.


Colocarlo es más que sencillo. Deben copiar este código que les dejo y pegarlo en un nuevo gadget de HTML/Javascript.
<style>
.menu a{
display: inline-block; /* Formato del menú */
font-family: Trebuchet MS; /* Fuente*/
padding: 10px;
color: #fff;
border-radius: 4px;  /* Bordes redondeados */ 
margin: 2px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background-image: url(http://i47.tinypic.com/2cfvzwo.jpg); /* Imagen de fondo */ 
}
.menu a:hover { /* Para cuando pasas el cursor por encima */ 
background: #ff78a1; /* Color de fondo, pueden cambiarlo por el de arriba y que sea una imagen */ 
color: #fff; /*Color de la letra*/
border-radius:3px; /* Bordes redondeados */ 
}
</style>

<center>
<div class="menu"><a href="http://www.blogger.com/" >Refresh</a> <a href="http://www.blogger.com/" >Link1</a> <a href="http://www.blogger.com/" >Link2</a> <a href="http://www.blogger.com/" >Link3</a> <a href="http://www.blogger.com/" >Link4</a> <a href="http://www.blogger.com/" >Link5</a> <a href="http://www.blogger.com/" >Link6</a>
</div>
</center>
FORMATO DEL MENU
Si quieren que se vea por debajo del header, sólo tienen que arrastrarlo hasta allí. Y se verá tal como en True Colours.

Pero si quieren colocarlo en el sidebar y que salga como una listita, tal como se ve a continuación, tienen que cambiar la línea display: inline-block; por display: block;

Y agregar width: 100px; debajo de background-image (en .menu a) para que les salga del ancho que ustedes quieran y no necesariamente del que tiene su sidebar por defecto.
LINKS
En la segunda parte, la que está entre los 'center' es la de los links que se verán, cambian el link (blogger.com) y el nombre (link1, link2, etc.) por el que ustedes quieran. Pueden agregar o quitar para que hayan tantos links como deseen.

Y bueno, esto es todo. Si les queda alguna duda, dejen un comentario que como siempre intentaré ayudarlos! Un besazo :)

19 comentarios :

  1. Hola!! me afilie a tu blog! es hermsoo.. y me estás ayudando mucho...♥ solo que no puedo cambiar el fondo de la cabecera.. otra cosa... donde sacas vos las plantillas? subirás más? son hermosoos!! :D y otra donde sacas las fotos? son re cute! gracias♥

    ResponderEliminar
    Respuestas
    1. Que genial linda, me alegra que te sirvan las cosas que subo! Para cambiar el fondo de la cabecera, anda a Editar HTML (en Plantilla), abrí el buscador y pone html { te va a salir una opción ahi debajo que se llama "background" y un link que es el del fondo, reemplaza ese link por el del fondo que vos quieras (lo tenes que cargar a Tinypic) y ya está :)

      Y a las plantillas no las saco de ningun lado, las hago modificando las de Blogger. Subiré otra en cuanto puedo.

      Las fotos? Qué fotos? Como las que tengo en la cabecera y esas? De WeHeartIt :)

      Un beso.

      Eliminar
    2. Muchas gracias por tu respuesta!!!! :) muy lindo blog♥

      Eliminar
  2. y otra cosa.. no se como hacer el código para mi afiliación como es?

    ResponderEliminar
    Respuestas
    1. Carga tu botón en Tinypic.com y te da varios códigos... tenes que copiar el primero y reemplazar el primer link, donde dice a href="TU LINK" por el de tu blog :)

      Y para que salga el código en una cajita tenes que ponerlo entre < textarea>TU LINK (borra el espacio entre las boquitas)

      Y ya está :)

      Eliminar
  3. Se ve super chulo! Muchas gracias por compartirlo con nosotras, tu blgo me encanta!!!! Besos

    ResponderEliminar
  4. Una pregunta.... como es el código para decorar la entrada... y donde dice "afíliate" y etc....♥

    ResponderEliminar
  5. Una Preguntita... como hago para cambiarle el Color.
    Son Hermosos sus tutorials y me ayudaron mucho ♥♥♥

    ResponderEliminar
    Respuestas
    1. El color de la letra? Agrega color: #fff; y ya está! Y si es por el color de fondo, ya está puesto sólo que como imagen, reemplaza background-image por background: #000; y listo :)

      Eliminar
  6. No entiendo, adonde tengo que pegar eso? donde esta gadgets? lo sienyo soy nueva en esto :c

    ResponderEliminar
  7. Ahí arriba dice, UN NUEVO GADGET DE HTML/JAVASCRIPT

    ResponderEliminar
  8. hola me encanta tu blog oye como le cambio el link porque la crearlo me dice esta pagina no existe ??

    ResponderEliminar
  9. ¡Hola, Cata!

    Antes que nada, quería decirte que te sigo desde hace un mes o por ahí y que ¡amo tu blog! Siempre me ayuda en cuanto a cosillas del blog, ¡muchas gracias! Y creo que seguramente ponga este truco en mi blog, aunque no haya usado tu template, pero bueno, creo que quedará bien *w*

    Si quieres ver luego como queda, pásate por mi blog: http://divergentesmentalmentedesorientadas.blogspot.com.es

    Pondré los respectivos créditos, también :)

    ¡Un besazo enorme! <3

    ResponderEliminar
  10. ¡Buenas, Cata!
    Quería preguntarte cómo ponerle subpestañas a este menú. Lo he intentado, pero me sale un churro impresionante T.T Si, cuando tengas tiempo, pudieras hacerme un tutorial, te estaría muy agradecida :)
    ¡Un beso enorme y gracias!

    ResponderEliminar
    Respuestas
    1. Hola Cassia, te he respondido por el Ask, no entiendo muy bien lo que quieres hacer, subpestañas cómo? Te agradecería me explicaras un poquito mejor o me mostraras algun ejemplillo!

      Eliminar