17 de agosto de 2014

Menú de mi plantilla de Rana! [TUTORIAL]

Hoola otra vez! XD
Bueno, he vuelto para traer un tutorial que me han pedido! Es un menú sencillo, pero quizás ayude a alguien :D Así que aquí tienen como poner mi menú de la plantilla de Rana!
Imagen del menú~! ^w^
Empecemos! Si tenéis alguna duda o algo me comentan y intentare ayudar :)

1- Plantilla > Personalizar > Plantillas
Elegimos el estilo Fantástico, S.A., y damos click al 4rt ejemplo (el verde)...

NOTA: En el 4rt la barra de pestañas tiene un efecto que oscurece un poco el color que hemos elegido (menos la pagina seleccionada que se quedara como el color que elijáis).
Los otros que te dan de ejemplo, también tienen sus detalles que las diferencian.

2- Entonces vamos a Avanzado, y editamos los colores de la pestaña según nuestra plantilla.
Según la mia de Rana...
El color de la barra la he elegido un rosa clarito - #f897c2 (que con el efecto la oscurece), la pestaña seleccionada de rosa muy clarito, casi tirando a blanco - #fae5ef, y por último el borde que lo he puesto de un fuscia oscuro - #f6589e.
Entonces os quedara así...

3- Después elegimos la letra! Hay muchos estilos ditintos, y yo esta vez he decidido elegir la Crushed. Como no tengo muchas pestañas, he aumentado el tamaño de la letra (18), así queda mejor.
En el caso de la letra he hecho que como esta plantilla oscurece el color que elijo, pues el blanco hará que destaquen las pestañas y quedará mejor estéticamente. 
En la de la pestaña seleccionada he elegido el mismo rosa que he puesto anteriormente de borde! (así queda mas equilibrado digamos :P)
Al final quedaria así...

4- Para finalizar, habréis notado que mi barra de pestañas esta centrada xD Pues la he centrado de esta manera....
Sin moverme de Diseñador de plantillas de Blogger, he ido a Avanzado > Añadir CSS > Y he añadido el siguiente código:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

NOTA: Si tenéis otro código ahi, donde finalize ese código hacéis un par de espacios y ponéis este código.
NOTA2: He encontrado este código en muchas paginas distintas, y no em acuerdo de donde lo saque, así que no podré poner créditos :S

Le dais a Guardar plantilla! Y ahi tenéis mi menu ^w^

Espero que os haya servido :P
Me gusta esto de hacer tutoriales, quizás haga mas jejeje :3

._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._._.
SI UTILIZAIS ESTE MENÚ (con colores y todo),
PONGAN CRÉDITOS! ^w^

6 comentarios:

  1. Buen tuto que chulo ^^
    gracias ^^
    saludos kyaru n.n

    ResponderEliminar
  2. :O ya había olvidado que era posible hacer esto :p
    Ahora siempre hago pero de gadget jajajaja... creo que en alguno de mis diseños lo retomaré jajaja. Buen tuto! Saludos!

    PD: :/ Ya me he graduado de ser tu ahijado TT.TT Si...ya llegué a los 100 :/ Y pues nada para avisarte haber si decidías adoptar a alguien más ^.^ ~ Muchísimas gracias por todo!!!

    ResponderEliminar
    Respuestas
    1. Jajjajajaja graciias ^^

      PD: :O Felicidades!!! No se si adoptare a alguien mas, ya veré :P De nada~ espero que te siga yendo genial ^w^

      Eliminar
  3. buen tutorial, gracias ^^

    ResponderEliminar