19 feb. 2015

[Tutorial] Menú #2

Hoola! Como están? Yo con el colegio estoy bastante ocupada, por eso estos días no he publicado nada D: pero bueno, intentare publicar más a partir de ahora~! >w<

La entrada de hoy es un nuevo tutorial! Espero que os sirva~

1. Primero iremos a Plantilla > Editar HTML > Y buscaremos: ]]></b:skin> y pegaremos encima el siguiente código:
#blmenuSolapas
{margin-left: 20%;} ul#blmenuSolapas li a,ul#blmenuSolapas li a,ul#blmenuSolapas li a:hover{background:#fff; border-radius:10px; border:2px dotted #dd659b; }ul#blmenuSolapas li a,ul#blmenuSolapas li a{color:#dd659b; font:18px Indie Flower;display:block;height:14px;text-decoration:none}ul#blmenuSolapas li a{margin-top:-10px;margin-left:18px;padding:4px 0 9px 0}ul#blmenuSolapas li{list-style:none;float:left;width:100px;text-align:center}ul#blmenuSolapas li a:hover{color:#dd659b;height:25px;margin-top:-18px;padding-bottom:3px;padding-top:18px}
background:#fff  --- Color de fondo, si quieres una imagen de fondo pon:
background:#fff  url("URL DEL FONDO")
border-radius:10px ---- Borde redondeados, cuando mas grande el numero mas redondeado estará.
border:2px dotted #dd659b ---- Ancho, tipo y color del borde.
color:#dd659b; font:18px Indie Flower ----- Color (#dd659b), y tamaño (18px) y estilo de letra (Indie Flower)
color:#dd659b;height:25px ---- Color (#dd659b) del texto al pasar el cursor, y margen (25px) que aparece

2. Ahora, guardamos, y volvemos al Editar HTML > buscamos <body> o <body y pegamos debajo este código...
<ul id='blmenuSolapas'>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
URL DE LA PAGINA ---- Obviamente, es la URL de la pagina que quieres que aparezca al dar click XD
TITULO --- Titulo de la pestaña

Si quieres añadir más pestañas pega debajo de </ul> este código:
<li><a href='URL DE LA PAGINA'>TITULO</a></li>

Fiin! Cualquier duda me dicen ^^

2 comentarios:

  1. Me encanto el tutorial, muchas gracias por compartirlo Kyaru

    ResponderEliminar
  2. ¡Gracias por el tuto! Me ha servido ^^

    ResponderEliminar