8.1.14

Menu en dos columnas como el mio [Tutorial]

21 comentarios :
Hola hermos@ como estas? hoy vengo en respuesta a Eli~ que me pregunto ¿Como pusiste ese menú en "Goodies"?.





Vamos a ir a Plantilla > Editar HTML y con Ctrl + F buscamos ]]></b:skin>
ahora vamos a pegar el siguiente codigo1:


/*** divisão duas colunas wordpress - by madlyluv.com ***/
.menuesquerda {float:left; width:49%; text-align: left;}
.menudireita {float:right; width:49%; text-align: left;}
.espaco {padding: 1px; margin:1px; clear: both;}
/*** fim -divisão duas colunas wordpress ***/
/* MENU HEART */
.s2 {display : block; font-size: 8pt; font-family: verdana, Lucida Sans Unicode; line-height: 15px; margin-top: 2px; border-bottom : 1px solid #f1f1f1; border-right : 1px solid #f1f1f1; text-indent : 5px; vertical-align : middle; background:
url('http://i37.tinypic.com/2nh22vq.jpg') no-repeat left #f8f8f8; padding-left : 5px;
padding-bottom : 2px;}
.s2:hover {display : block; background: url('http://i37.tinypic.com/2nh22vq.jpg') no-repeat left #f9f9f9;}
/*titulo categorias by LovelySweetGirl.blogspot*/
LSG{
display: block;
background: #EDEFE7;
color: #ffb5ca;
text-shadow: 1px 1px 0 #fff;
font-size: 12px;
letter-spacing: 1px;
padding: 3px 5px 3px 10px;
margin: 5 0 0px 0;
text-transform: normal;
text-align:center;
font-weight: normal;
font-family: arial;
text-transform: uppercase;
border-radius: 3px;
padding-bottom: 5px;
}
Una vez hecho eso vamos a crear una pagina nueva y presionamos el botón HTML para pegar el siguiente codigo2 :

<div> 
<lsg>Material</lsg> 
<br />
 <div> 
<div class="menuesquerda"> 
<div class="s2"> 
<a href="url de la entrada o pagina"> un titulo</a></div>
 </div> 
<div class="menudireita"> 
<div class="s2"> 
<a href="url de la entrada o pagina"> un titulo</a></div>
 </div>
 <div class="espaco"></div>
</div>
</div>
 <br />

Quedaria algo asi


si quieres tener mas categorías como se ve en la primer imagen
solo vuelve a pegar el código debajo del anterior y cambiale el titulo 

Que podemos personalizar/editar? 

podemos editar el código con titulo  /* MENU HEART */ y 
/*titulo categorías by LovelySweetGirl.blogspot*/
y lo que esta en color verde y naranja

Ahora voy a dejar un vídeo para que entiendas un poco mejor




21 comentarios :

  1. Muchas gracias Lovely! Lo pondré ahora, demasiadas gracias<3

    ResponderEliminar
  2. Muy lindo efecto. Tal vez lo use, me gustó como se ve *3*

    ResponderEliminar
  3. Te lo agradesco,sabias que estaba haciendo un menu de estos?jejje es genial,si lo pongo en eso...ya sabes que estaras en mi area de creditos.
    saludos~

    ResponderEliminar
  4. buen tuto :3 Felicidades, continua asi <3 yay! tutoriales everywhereee

    ResponderEliminar
  5. Wow Creo Creo que lo usaré
    Gracias ♥

    ResponderEliminar
  6. Muy bueno el efecto.
    Se agradece.

    ResponderEliminar
    Respuestas
    1. gracias ti por comentar :D

      Eliminar
    2. tienes un premio en mi blog xD

      http://noname-animeblog.blogspot.com/2013/12/premio-navideno-respuestas-de-mis.html

      Eliminar
  7. Buen tutorial ^-^ Llevaba tiempo buscándolo. Me suscribo ^o^
    Saludos ~

    ResponderEliminar
    Respuestas
    1. gracias por tu comentario y suscripcion :)

      Eliminar
  8. Muy Kawaii el menu, me ha encantado pero tengo un problema lo hago todo como esta en el tutorial pero cuando voy al enlace de la pagina donde tengo el menu, desaparece todos los gagdets o.O..Sabras como arregarlo?
    Me suscribo a tu blog :)
    Saludos

    ResponderEliminar
    Respuestas
    1. Lovely ya he dado con el problema tenia que cambiar algo del codigo2 jejejeje ;)

      Eliminar
  9. ME ENCANTO GRACIAS YA LO TENGO EN MI BLOG LO ESTABA BUSCADO EN MUCHAS PARTE

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Me encanto el tuto :D (siento el anterior, que se me puso un código jajajjajajaa)
      Saludoooos!

      Eliminar

Todo comentario es importante para el blog.
Pero por favor no escribas

✘INSULTOS