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
