8.1.14
Menu en dos columnas como el mio [Tutorial]
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="menuesquerda">
<div class="s2">
<a href="url de la entrada o pagina"> un titulo</a></div>
</div>
<div class="menudireita">
<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>
<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
Entrada escrita por Lovely
“Muchas veces dejamos ir pequeñas cosas sin saber lo grandes que son.”
Suscribirse a:
Enviar comentarios
(
Atom
)
Muchas gracias Lovely! Lo pondré ahora, demasiadas gracias<3
ResponderEliminarde nada :)
EliminarMuy lindo efecto. Tal vez lo use, me gustó como se ve *3*
ResponderEliminarsi re lindo *w*
EliminarTe 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.
ResponderEliminarsaludos~
ok gracias :)
Eliminarbuen tuto :3 Felicidades, continua asi <3 yay! tutoriales everywhereee
ResponderEliminarkyaaa! gracias ^-^
EliminarWow Creo Creo que lo usaré
ResponderEliminarGracias ♥
okas de nada :)
EliminarMuy bueno el efecto.
ResponderEliminarSe agradece.
gracias ti por comentar :D
Eliminartienes un premio en mi blog xD
Eliminarhttp://noname-animeblog.blogspot.com/2013/12/premio-navideno-respuestas-de-mis.html
Buen tutorial ^-^ Llevaba tiempo buscándolo. Me suscribo ^o^
ResponderEliminarSaludos ~
gracias por tu comentario y suscripcion :)
EliminarMuy 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?
ResponderEliminarMe suscribo a tu blog :)
Saludos
Lovely ya he dado con el problema tenia que cambiar algo del codigo2 jejejeje ;)
EliminarME ENCANTO GRACIAS YA LO TENGO EN MI BLOG LO ESTABA BUSCADO EN MUCHAS PARTE
ResponderEliminarme alegra haberte ayudado n.n
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarMe encanto el tuto :D (siento el anterior, que se me puso un código jajajjajajaa)
EliminarSaludoooos!