Bueno como muchos me han echo preguntas sobre como poner el menu como el que tengo en mi blogger, e decidido hacer este tutoría mejor explicado paso a paso de como hacer esto que es muy sencillo y les aseguro que si siguen los pasos correctamente no tendrán ningún problema en adaptar este menú a su blogger.
Comencemos:
Solo tienen que entran a su blogger a en diseño luego edición html, hay una casilla que hay que seleccionar la de expandir plantilla de artilugios una ves echo esto tienen que identificar
En su código html y copian el código de abajo antes de /b:skin
/*Menu Azul */
#menu ul { margin:90;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/5375/bluelco2.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img442.imageshack.us/img442/4413/bluermk9.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */
o si la queremos de otros colores
/* Menu Dorado*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img508.imageshack.us/img508/971/hgoldljp3.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img505.imageshack.us/img505/7849/hgoldrzx4.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */
/*Menu Rojo*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img508.imageshack.us/img508/8383/redlhh5.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img257.imageshack.us/img257/1230/redrme9.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */
/* Menu Verde */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/5924/verdelzc1.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img257.imageshack.us/img257/4822/verdercx2.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#b7c600; float:none;}
#menu a:hover span {color:#687100;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#687100}
.clear {clear:left}
/* Fin de Barra */
/* Menu Rosa */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/9909/rosalvt2.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img523.imageshack.us/img523/7982/rosarjk6.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */
Tomen en cuenta que en el código anterior se muestra el css (Cascading Style Sheets) hoja de estilo en casada y aquí es donde se asigna el color , tamaño, estilo, alineación, tipo de letra, etc de nuestro menú todo es configurable es cuestión de que se metan un poco al código html, pero si no se quieren complicar solo utilicenlo tal cual ya esta probado.
ahora tenemos que colocar el código de links y títulos, después del código anterior. Solo tienen que copiar el codigo de abajo despues de.
Copiamos esto.
tomando en cuenta que los links y los nombres son los de mi blogger ustedes los tienen que cambiar por los del de su sitio solo van a su blogger abren un blog de notas clikean en cada entrada de su blog copian el contenido de la barra de direcciones y así con todos sus links. tan bien cambian el nombre que quieren darle a su botón y listo. alguien me pregunto hace poco que si se pueden poner mas links o mas botones y la respuesta es si, solo tienen que copiar una de las lineas anteriores y pegarla abajo la modifican el link y el nombre y listo un ejemplo:
espero que les funcione si no escribanme y comenten sus dudas que yo los ayudare con mucho gusto solo disculpen si me tardo un poco aveces es difícil encontrar tiempo.
Buscador google
Búsqueda personalizada
9 comentarios:
hola...no se si esto estara todavia activo...pero llevo tda la tard intentando poner el menu y no puedo......es decir, si puedo, pero solo soy cpaz de que me dirija auna pagina....por ejemplo, yo en un boton quiero poner:tutoriales...y que pinchando en el aparezcan toooodos los tutoriales que tengo hechos....eso como lo hago???porqe en el html intento poner los links separados por comas, de diversas formas pero no me deja.............porfa, ve mi blog, qe aprece mi email y me dices.....gracias!!!!!!!!!!
haber primero ya visite tu blog y no vi ninguna barra haber si puedes colocar el codigo para ver la barra y asi ver que falla, y otra duda quieres que al hacer click en el boton del menu te aparescan todas las entradas de tutoriales verdad para eso tienes que juntar todos lo tutoriales en una sola entrada por que al hacer click en el boton te va mandar a la entrada que le asignaste solo una si quieres varias tienes que hacer un menu desplegable que al hacer click en tutoriales te de opciones de abir cada uno de los tutoriales que tienes, o otra poner directamente en la barra los tutoriales pero seran muchos botones depende de los tutoriales que tengas avisame comolo quieres y yo te ayudo a hacerlo
Hola gracias por tu tiempo y paciencia con nosotros los novatos, hice todo tal cual pero al ir a guardar la plantilla me da el siguiente error: La plantilla no es válida porque la etiqueta "div" aparece dentro de la etiqueta "head".
Cómo hago para que me funcione? Mi pag es http://clavesdesalud.blogspot.com
Gracias de nuevo por tu tiempo y respuesta si hay solución.
disculpa que te conteste aquí pero es para que te enteres mas rapido, tu error respecto al menu es que estas poniendo el codigo <br /><div id='menu'><br /><br /><div id='menu'><br /> etc. Antes de </head> tiene que ir despues de
]]></b:skin><br/>
<body>
</head>
si te funciona avisame en mi blog
jajaja Gracias me he divertido mucho... lo hice pero no se donde me quedó mal que quedó como una escalera!!! Ahora estoy buscando como revertirlo... jejeje
jaja ok Ghermain siguele probando hasta que te quede bien nadamas si ponlos despues de donde te dije y hay me cuentas como quedo a por cierto muy buenos tus aportes de tu blog en especial los de alex day
hola bueno no se que hice mal
pero me salio medio raro
bueno aunque ese no es mucho problema pues es cambiarle el codigo y jugarle un poco
lo que quiero saber es como empiezas a publicar en cada seccion sin que salga en la primera pagina o algo asi
aqui esta mi blog para que me ayudes
http://vivir-hasta-elfin.blogspot.com/
aun me falta poner muchas cosas pero
quiero que este ordenado
I like this blog, nice posting...
thanks for sharing this..
gigolos alava
Publicar un comentario