// API callback
related_results_labels({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831"},"updated":{"$t":"2019-08-04T18:22:39.927+02:00"},"category":[{"term":"Gadget"},{"term":"Trucos Blog"},{"term":"Plantillas"},{"term":"Blogger"},{"term":"Utilidades Online"},{"term":"Datos utiles"},{"term":"Trucos imagenes"},{"term":"Entradas"},{"term":"Links"},{"term":"Comentarios"},{"term":"Trucos Texto"},{"term":"Iconos"},{"term":"Cosas mias"},{"term":"RSS"},{"term":"Etiquetas"},{"term":"Menus"},{"term":"Twitter"},{"term":"Tutoriales"},{"term":"Marcadores sociales"},{"term":"Posicionamiento"},{"term":"Navidad"},{"term":"Buscadores"},{"term":"Navegadores"},{"term":"Scriptaculous"},{"term":"Favicon"},{"term":"FeedBurner"},{"term":"Apoyando"},{"term":"Traductores"},{"term":"Boton de enlace"},{"term":"Emoticonos"},{"term":"Musica"},{"term":"Facebook"},{"term":"Popup"},{"term":"Sorteos"},{"term":"Video"},{"term":"Blogger invitado"},{"term":"JQuery"},{"term":"Wallpapers"}],"title":{"type":"text","$t":"El Escaparate"},"subtitle":{"type":"html","$t":"Diseño blog, tutoriales, recursos e inspiración, todo para los blogs de Blogger. Ayuda desinteresada y personalizada."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/-\/Menus?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Menus"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Rosa"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/04564116363926564176"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"31","src":"http:\/\/4.bp.blogspot.com\/_gcgjC6O3wCs\/S4_LamD0FOI\/AAAAAAAAAZA\/_5ZMvPnOtd4\/S220\/grafico09.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"27"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"50"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-1937701294904093401"},"published":{"$t":"2010-09-20T02:21:00.000+02:00"},"updated":{"$t":"2010-09-20T02:21:22.360+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutoriales"}],"title":{"type":"text","$t":"Menú en las nuevas plantillas de diseño"},"content":{"type":"html","$t":"Desde que Blogger introdujo en nuestro panel la opción de utilizar las nuevas plantillas de diseño, recibo constantes consultas solicitando la forma de incluir un menú horizontal en las mismas.\u003Cbr \/\u003E\u003Cbr \/\u003EA menudo lo que solicitáis es el poder incluir uno de los menús que yo explico en mi blog para las plantillas anteriores, esto me ha hecho darme cuenta de que muchos de vosotros no sabéis que \u003Cb\u003Etodas las plantillas del nuevo diseñador incluyen la posibilidad de usar su propio menú horizontal\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EEn realidad las nuevas plantillas incluyen todo el código necesario para utilizar un menú, incluido el CSS que hará que el menú se adapte perfectamente al diseño del blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Cimg alt=\"Menu en las nuevas plantillas\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJTeLzfbp4I\/AAAAAAAAIWo\/EOCnlQCva54\/s640\/tabs.jpg\" style=\"margin-left: auto; margin-right: auto;\" title=\"Menu en las nuevas plantillas\" width=\"450\" \/\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EAlgunos ejemplos de menús en distintas plantillas de Diseño\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003EHay dos maneras de incluir el menú horizontal en las nuevas plantillas, utilizando las nuevas Páginas Independientes de Blogger o usando la Lista de enlaces.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003EIncluir el menú horizontal utilizando la Lista de Enlaces.\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Vamos a Diseño en nuestro panel y vemos que debajo de la cabecera hay una opción para incluir un gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Añadir gadget\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJTmztpRy7I\/AAAAAAAAIWw\/RVWJlGBA3G0\/s640\/tabs-a%C3%B1adir-gadget.jpg\" title=\"Añadir gadget\" width=\"550\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Pinchamos para añadir un nuevo gadget y escogemos \"\u003Cb\u003ELista de enlaces\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Lista de enlaces\" border=\"0\" height=\"115\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJTnZwsSicI\/AAAAAAAAIW4\/GK0NSPqklns\/s400\/tabs-lista.jpg\" title=\"Lista de enlaces\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Configuramos el gadget tal como veis en la imagen, dejando vacío el título y el número de enlaces a mostrar y añadiendo los enlaces que se mostrarán en el menú. Podríamos añadir un enlace con la url del blog y el texto \"Inicio\" por ejemplo y en los demás podremos enlazar una entrada, otro blog o lo que queramos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Configurar lista de enlaces\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJToPaMoJ4I\/AAAAAAAAIXA\/mxLig0Q6-TA\/s640\/tabs-lista-configurar.jpg\" title=\"Configurar lista de enlaces\" width=\"450\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Guardamos los cambios al gadget y ya podremos ver como ha quedado el menú. Para añadir más enlaces, lo haríamos editando el gadget que acabamos de configurar y que se mostrará en Diseño debajo del header. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003EIncluir el menú horizontal utilizando las Páginas estáticas.\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Desde \u003Cb\u003EDiseño\u003C\/b\u003E - \u003Cb\u003EEditar páginas\u003C\/b\u003E, añadimos las páginas nuevas que vamos a necesitar  que se mostrarán en el menú horizontal.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Páginas estáticas\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJUlUURNqZI\/AAAAAAAAIXI\/pr3pFmA9glI\/s640\/tabs-paginas-estaticas.jpg\" title=\"Páginas estáticas\" width=\"550\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Una vez editada la página estática, pinchamos en \"\u003Cb\u003EPublicar página\u003C\/b\u003E\" y se mostrará la pregunta \"\u003Cb\u003E¿Cómo te gustaría que apareciese el gadget Páginas?\u003C\/b\u003E\", tenemos que marcar entonces la opción \"\u003Cb\u003Epestañas del blog\u003C\/b\u003E\":\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Opción pestañas del blog\" border=\"0\" height=\"200\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJUmktan3kI\/AAAAAAAAIXQ\/qiJEb6qH_IQ\/s200\/tabs-pesta%C3%B1as.jpg\" title=\"Pestañas del blog\" width=\"189\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Añadimos tantas páginas como pestañas tendrá nuestro menú y ya será visible en el blog el menú horizontal que mostrará además un diseño acorde con nuestra plantilla.\u003Cbr \/\u003EEn Diseño podremos ya ver el gadget \"Paginas\" debajo del header y desde allí podemos editarlo si lo necesitamos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Gadegt-menú páginas estáticas\" border=\"0\" height=\"134\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJUnbrNdGeI\/AAAAAAAAIXY\/8rSfvZGyycs\/s640\/tabs-paginas.jpg\" title=\"Gadegt-menú páginas estáticas\" width=\"550\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/1937701294904093401\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/menu-en-las-nuevas-plantillas-de-diseno.html#comment-form","title":"42 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1937701294904093401"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1937701294904093401"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/menu-en-las-nuevas-plantillas-de-diseno.html","title":"Menú en las nuevas plantillas de diseño"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJTeLzfbp4I\/AAAAAAAAIWo\/EOCnlQCva54\/s72-c\/tabs.jpg","height":"72","width":"72"},"thr$total":{"$t":"42"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-2029791356540949657"},"published":{"$t":"2010-07-28T03:19:00.001+02:00"},"updated":{"$t":"2010-07-28T20:39:51.809+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Añadir otros enlaces en el gadget de páginas estáticas"},"content":{"type":"html","$t":"Ya hemos visto que desde hace algún tiempo \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2010\/01\/anadir-paginas-independientes-nueva.html\"\u003Epodemos añadir páginas estáticas\u003C\/a\u003E fácilmente a nuestro blog.\u003Cbr \/\u003EEl problema es que una vez añadidas, los enlaces en forma de menú se muestran en el blog, pero solo los enlaces que hemos creado a las páginas estáticas.\u003Cbr \/\u003E\u003Cbr \/\u003EVarias personas me han preguntado como añadir en ese mismo menú enlaces a otras páginas que no sean estáticas, por ejemplo una página de etiquetas, a una entrada concreta o incluso a una página externa.\u003Cbr \/\u003E\u003Cbr \/\u003EVamos a ver como hacerlo, pero antes de empezar \u003Cb\u003Ehemos de tener añadidas las páginas estáticas\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Una vez en nuestro escritorio de Blogger, vamos a \u003Cb\u003EDiseño - Edición HTML\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E \u003Cb\u003EMarcamos\u003C\/b\u003E la casilla de \"\u003Cb\u003EExpandir las plantillas de artilugios\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Como ya tenemos añadidas las páginas estáticas, localizamos en la plantilla el gadget que las muestra y que será algo como esto:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='PageList1' locked='false' title='Pages' type='PageList'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:title'\u0026gt;\u0026lt;h2\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:links' var='link'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:link.isCurrentPage'\u0026gt;\u003Cbr \/\u003E\u0026lt;li class='selected'\u0026gt;\u0026lt;a expr:href='data:link.href'\u0026gt;\u0026lt;data:link.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a expr:href='data:link.href'\u0026gt;\u0026lt;data:link.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;b:include name='quickedit'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Una vez localizado, añadiremos los enlaces que necesitamos justo después de \u003Cb\u003E\u0026lt;\/b:loop\u0026gt;\u003C\/b\u003E tal como vemos en este ejemplo:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='PageList1' locked='false' title='Pages' type='PageList'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:title'\u0026gt;\u0026lt;h2\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:links' var='link'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:link.isCurrentPage'\u0026gt;\u003Cbr \/\u003E\u0026lt;li class='selected'\u0026gt;\u0026lt;a expr:href='data:link.href'\u0026gt;\u0026lt;data:link.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a expr:href='data:link.href'\u0026gt;\u0026lt;data:link.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u003Cdiv style=\"color: red;\"\u003EJUSTO AQUI AÑADIMOS LOS ENLACES \u003C\/div\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;b:include name='quickedit'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[5]\u003C\/b\u003E Los nuevos enlaces los colocamos de esta manera, uno debajo de otro:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"DIRECCION_DEL_ENLACE\"\u0026gt;TEXTO_DEL_ENLACE\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[6]\u003C\/b\u003E Usamos \"\u003Cb\u003EVista previa\u003C\/b\u003E\" y tendremos que ver algo como esto, los nuevos enlaces a continuación de las páginas estáticas en el orden en que los hayamos ido colocando:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" title=\"Enlaces en páginas estáticas\" alt=\"Ejemplo de enlaces en páginas estáticas\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TE-EpI7Ah3I\/AAAAAAAAIRo\/xZRXPyvG-Ek\/s640\/Enlaces-paginas-estaticas.jpg\" width=\"550\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[7]\u003C\/b\u003E Si todo está correcto, guardamos los cambios.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003ESi lo necesitas, puedes ver \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2009\/09\/como-anadir-los-enlaces-en-un-menu.html\"\u003Ecomo añadir los enlaces en un menú\u003C\/a\u003E a distintas páginas, entradas, archivos, etc.\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/2029791356540949657\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/07\/anadir-otros-enlaces-en-el-gadet-de.html#comment-form","title":"56 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2029791356540949657"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2029791356540949657"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/07\/anadir-otros-enlaces-en-el-gadet-de.html","title":"Añadir otros enlaces en el gadget de páginas estáticas"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TE-EpI7Ah3I\/AAAAAAAAIRo\/xZRXPyvG-Ek\/s72-c\/Enlaces-paginas-estaticas.jpg","height":"72","width":"72"},"thr$total":{"$t":"56"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4049695569465220643"},"published":{"$t":"2010-01-30T15:53:00.002+01:00"},"updated":{"$t":"2010-01-31T20:42:01.598+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Traductores"}],"title":{"type":"text","$t":"Banderas de traducción en el menú"},"content":{"type":"html","$t":"Me preguntan en un comentario:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ci\u003ETengo en el blog un menú como el que tienes en la parte superior de tu blog, y querría poner unas banderitas para traducir el blog. ¿Podrías decirme como hacer para incluirlas en el menú?\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Banderas de traducción\" border=\"0\" height=\"28\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/S2RIl2PpzLI\/AAAAAAAAHc8\/iiEE-z_qASs\/s640\/menu.jpg\" title=\"Banderas de traducción\" width=\"600\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ECualquier menú tendrá una estructura \u003Cb\u003Eparecida\u003C\/b\u003E a esta:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\"tabsmenu\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"#\"\u0026gt;\u0026lt;span\u0026gt;INICIO\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"mailto:direccion email\"\u0026gt;\u0026lt;span\u0026gt;CONTACTO\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/www.blogger.com\/\"\u0026gt;\u0026lt;span\u0026gt;BLOGGER\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/www.google.es\"\u0026gt;\u0026lt;span\u0026gt;GOOGLE\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/elescaparatederosa.blogspot.com\/\"\u0026gt;\u0026lt;span\u0026gt;EL ESCAPARATE\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EComo véis en el ejemplo, en este caso es una lista colocada dentro de un \u0026lt;div\u0026gt; así que, como cualquier lista, comienza con la etiqueta \u0026lt;ul\u0026gt; termina con la etiqueta de cierre \u0026lt;\/ul\u0026gt; y dentro de estas se incluyen los \"item\" o enlaces del menú, que comienzan con la etiqueta \u0026lt;li\u0026gt; y terminan con la correspondiente etiqueta de cierre \u0026lt;\/li\u0026gt;.\u003Cbr \/\u003E\u003Cbr \/\u003EPara colocar cualquier otro \"item\" o pestaña nueva en el menú, tendríamos que hacerlo colocando el código correspondiente entre \u0026lt;ul\u0026gt; y \u0026lt;\/ul\u0026gt;, en el caso de las banderitas de traducción, lo haremos justo antes del cierre (\u0026lt;\/ul\u0026gt;):\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\"tabsmenu\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"#\"\u0026gt;\u0026lt;span\u0026gt;INICIO\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"mailto:direccion email\"\u0026gt;\u0026lt;span\u0026gt;CONTACTO\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/www.blogger.com\/\"\u0026gt;\u0026lt;span\u0026gt;BLOGGER\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/www.google.es\"\u0026gt;\u0026lt;span\u0026gt;GOOGLE\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/elescaparatederosa.blogspot.com\/\"\u0026gt;\u0026lt;span\u0026gt;EL ESCAPARATE\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;li\u0026gt;\u003C\/span\u003E\u0026lt;a href=\"URL_DEL_BLOG_TRADUCIDO_A_INGLES\"\u0026gt;\u003Cbr \/\u003E\u0026lt;img alt=\"Translate to English\" src=\"URL_DE_IMAGEN_BANDERA_INGLESA\" title=\"Translate to English\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;a href=\"URL_DEL_BLOG_TRADUCIDO_A_POTUGUES\"\u0026gt;\u0026lt;img alt=\"Traduzir para o Português\" src=\"URL_DE_IMAGEN_BANDERA_PORTUGUESA\" title=\"Traduzir para o Português\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;\/li\u0026gt;\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EProcuraremos no usar unas imágenes demasiado grandes para las banderitas o el menú podría desconfigurarse...\u003Cbr \/\u003E\u003Cbr \/\u003EPara hacer la traducción del blog, usaremos el \u003Ca href=\"http:\/\/translate.google.es\/translate_t#\" target=\"_blank\"\u003Eservicio de traducción de Google\u003C\/a\u003E, para ello colocamos la url de nuestro blog allí y una vez traducido al idioma que necesitamos, copiamos la url del navegador y la colocamos en el código donde dice URL_DEL_BLOG_TRADUCIDO_A... el idioma que sea.\u003Cbr \/\u003E\u003Cbr \/\u003EComo la url resultante en Google es \"enorme\" podemos hacer uso de una página online para acortar direcciones como \u003Ca href=\"http:\/\/notlong.com\/\" target=\"_blank\"\u003Enotlong\u003C\/a\u003E o \u003Ca href=\"http:\/\/urlx.org\/\" target=\"_blank\"\u003Eurl(x)\u003C\/a\u003E entre otras.\u003Cbr \/\u003E\u003Cbr \/\u003ETambién puedes hacerlo desde aquí mismo a través de este pequeño formulario que usa el servicio de \u003Ca href=\"http:\/\/tinyurl.com\/\" target=\"_blank\"\u003ETinyURL\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cform action=\"http:\/\/tinyurl.com\/create.php\" method=\"post\" target=\"_blank\"\u003E\u003Cdiv align=\"center\"\u003E\u003Ctable bgcolor=\"#85b5c3\" border=\"1\" cellpadding=\"5\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd\u003E\u003Cspan style=\"color: white;\"\u003E\u003Cb\u003EIngresa la URL completa a acortar :\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cinput name=\"url\" size=\"30\" type=\"text\" \/\u003E\u003Cinput name=\"submit\" type=\"submit\" value=\"Acortar url\" \/\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003C\/div\u003E\u003C\/form\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4049695569465220643\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/01\/banderas-de-traduccion-en-el-menu.html#comment-form","title":"39 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4049695569465220643"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4049695569465220643"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/01\/banderas-de-traduccion-en-el-menu.html","title":"Banderas de traducción en el menú"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/S2RIl2PpzLI\/AAAAAAAAHc8\/iiEE-z_qASs\/s72-c\/menu.jpg","height":"72","width":"72"},"thr$total":{"$t":"39"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-3995859198350918613"},"published":{"$t":"2009-09-03T03:13:00.000+02:00"},"updated":{"$t":"2009-09-03T03:13:46.768+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Datos utiles"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Como añadir los enlaces en un menú"},"content":{"type":"html","$t":"Incluir un menú en el blog no resulta demasiado complicado, especialmente cuando lo añadimos siguiendo las instrucciones de cualquier web de menús o desde alguna de las entradas de mi blog al respecto por ejemplo.\u003Cbr \/\u003E\u003Cbr \/\u003EEl mayor problema que se presenta y que yo misma he comprobado a través de algunos de los correos que recibo, suele ser a la hora de \u003Cb\u003Econstruir los enlaces del menú\u003C\/b\u003E, en concreto la pregunta que más se repite es:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ci\u003E¿Como hago para que las pestañas de mi menú lleven a tal o cual página?\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg alt=\"Menú\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R-2SmJQwGjI\/AAAAAAAADRM\/gfNePrmpa6A\/s400\/Nombre.jpg\" title=\"Menú\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EDependiendo del tipo de menú, este constará de códigos distintos para su funcionamiento, pero siempre incluirá el \u003Cb\u003Ecódigo HTML\u003C\/b\u003E que será necesario precisamente para la \u003Cb\u003Econstrucción de los enlaces\u003C\/b\u003E, y que será algo parecido a este código:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div class=\"MenuLove\"\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"Lovenav\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"url-de_la_pagina\" title=\"cartel_enlace\"\u0026gt;Inicio\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"url-de_la_pagina\" title=\"cartel_enlace\"\u0026gt;Enlace_1\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"url-de_la_pagina\" title=\"cartel_enlace\"\u0026gt;Enlace_2\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"url-de_la_pagina\" title=\"cartel_enlace\"\u0026gt;Enlace_3\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"url-de_la_pagina\" title=\"cartel_enlace\"\u0026gt;Enlace_4\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EVisto así, no es complicado de configurar:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Eurl-de_la_pagina\u003C\/b\u003E Sustituimos esto por la url de la página o destino que vamos a enlazar.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Ecartel_enlace\u003C\/b\u003E Sustituimos por una pequeña descripción, que se mostrará en un cartelito (tooltip) al pasar el ratón sobre la pestaña del menú.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EEnlace_1, Enlace_2, etc.\u003C\/b\u003E Sustituimos por el texto de cada enlace que se verá en el menú.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEl problema aparece cuando, a pesar de que sabemos que vamos a enlazar, no tenemos claro como obtener exactamente la url de destino...\u003Cbr \/\u003EVeremos a continuación \u003Cb\u003Ecomo conseguir la url de los enlaces más habituales\u003C\/b\u003E en cualquier menú:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #351c75;\"\u003E\u003Cb\u003EEnlazar una pestaña con la página de Inicio o Home.\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003EComo veis en el código de ejemplo, es el primer enlace que he puesto, allí en lugar de \"url-de_la_pagina\" es donde colocaríamos la url de nuestro blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #351c75;\"\u003E\u003Cb\u003EEnlazar una pestaña con la página de nuestro perfil.\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003EEntramos a la página de nuestro perfil de Blogger y copiamos la url que vemos en el navegador, esa url es la que usaremos en el enlace que dirá \"Mi perfil\" por ejemplo.\u003Cbr \/\u003E\u003Cbr \/\u003Ehttp:\/\/www.blogger.com\/profile\/06743611108067453905\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #351c75;\"\u003E\u003Cb\u003EEnlazar una pestaña con una entrada.\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003ESi tenemos añadido en una entrada el formulario de correo, un mensaje de bienvenida, o lo que sea, y queremos enlazar esa entrada concreta en el menú, pinchamos sobre el título de la entrada para que dicha entrada se muestre en su propia página (donde se ven los comentarios debajo de ella) y copiamos la url que vemos en el navegador. Esa es la url que usaremos para enlazar la entrada desde la pestaña correspondiente del menú.\u003Cbr \/\u003E\u003Cbr \/\u003Ehttp:\/\/elescaparatederosa.blogspot.com\/2009\/08\/manual-blogger-para-principiantes.html\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #351c75;\"\u003E\u003Cb\u003EEnlazar una pestaña con una etiqueta concreta.\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003EEl procedimiento es exactamente igual que para las entradas, solo que en este caso usaremos la url que vemos una vez hemos pinchado sobre la etiqueta a enlazar, y que mostrará todas las entradas con esa etiqueta.\u003Cbr \/\u003E\u003Cbr \/\u003Ehttp:\/\/elescaparatederosa.blogspot.com\/search\/label\/Blogger\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #351c75;\"\u003E\u003Cb\u003EEnlazar una pestaña con un mes de archivo.\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003EPara mostrar solo las entradas del mes de vacaciones o lo que sea... El mismo procedimiento que los anteriores, pero obtendríamos la url pinchando sobre el mes a enlazar en el gadget de archivos:\u003Cbr \/\u003E\u003Cbr \/\u003Ehttp:\/\/elescaparatederosa.blogspot.com\/2009_07_01_archive.html\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #351c75;\"\u003E\u003Cb\u003EEnlazar una pestaña con el \"suscribirse\".\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003ESi \u003Cb\u003Eno\u003C\/b\u003E estamos usando un servicio distinto al de Blogger para facilitar la suscripción, la url a colocar en el enlace y que por defecto proporciona Blogger, sería esta:\u003Cbr \/\u003E\u003Cbr \/\u003Ehttp:\/\/NOMBRE DE NUESTRO BLOG.blogspot.com\/feeds\/posts\/default\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EPara enlazar un sitio fuera del blog, por supuesto que tendríamos que colocar \u003Cb\u003Ela url del sitio\u003C\/b\u003E en el enlace."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/3995859198350918613\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/09\/como-anadir-los-enlaces-en-un-menu.html#comment-form","title":"128 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3995859198350918613"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3995859198350918613"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/09\/como-anadir-los-enlaces-en-un-menu.html","title":"Como añadir los enlaces en un menú"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R-2SmJQwGjI\/AAAAAAAADRM\/gfNePrmpa6A\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"128"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-7737125161666286037"},"published":{"$t":"2009-06-14T17:03:00.003+02:00"},"updated":{"$t":"2010-08-08T11:20:00.211+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Menú de pestañas"},"content":{"type":"html","$t":"Hace tiempo publiqué como instalar un\u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/03\/men-en-forma-de-pestaas-en-blogger.html\"\u003E menú de pestañas en Blogger\u003C\/a\u003E usando las etiquetas.\u003Cbr \/\u003EEn ese menú, cada vez que se etiqueta una entrada, una nueva pestaña aparece \u003Cb\u003Ede forma automática\u003C\/b\u003E en el menú, esto hace que el aspecto del menú deje bastante que desear cuando en el blog usamos demasiadas etiquetas.\u003Cbr \/\u003E\u003Cbr \/\u003EBasándonos en la misma idea y usando casi el mismo código, vamos a instalar un menú con el mismo aspecto que el de pestañas con etiquetas, pero en el que incluiremos los enlaces que creamos oportuno.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" title=\"Menú de pestañas\" alt=\"Menú de pestañas\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/SgDZoAdJ9cI\/AAAAAAAAGxk\/MXs1OOC2hhc\/s400\/Nombre.jpg\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EAntes de empezar, podéis ver un ejemplo funcionando en \u003Ca href=\"http:\/\/menusenprueba.blogspot.com\/\" target=\"_blank\"\u003Eeste blogs de pruebas\u003C\/a\u003E instalado sobre las entradas.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Una vez en nuestro panel de Blogger vamos a \u003Cb\u003EEdición HTML\u003C\/b\u003E y colocamos el CSS necesario para el menú.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ci\u003EEl lugar adecuado para colocar cualquier código \u003Cb\u003ECSS\u003C\/b\u003E es siempre entre las etiquetas \u003Cb\u003E\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[\/*\u003C\/b\u003E y  \u003Cb\u003E]]\u0026gt;%lt;\/b:skin\u0026gt;\u003C\/b\u003E de nuestra plantilla.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEn este caso estaría bien ponerlo después de la sección del header, más o menos antes de \u003Cb\u003E\/* Outer-Wrapper-------- *\/\u003C\/b\u003E por ejemplo:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote class=\"smallquote\"\u003E\/* Menu pestañas*\/\u003Cbr \/\u003E\u003Cbr \/\u003E#tabsmenu {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Ewidth:100%;\u003Cbr \/\u003Efont-size:13px;\u003Cbr \/\u003Eborder-bottom:1px solid #2763A5;\u003Cbr \/\u003Eline-height:normal;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsmenu ul {\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Epadding:10px 10px 0 50px;\u003Cbr \/\u003Elist-style:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsmenu li {\u003Cbr \/\u003Edisplay:inline;\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Epadding:0;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsmenu a {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Ebackground:url(\"IMAGEN IZQUIERDA (LEFT)\") no-repeat left top;\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Epadding:0 0 0 4px;\u003Cbr \/\u003Etext-decoration:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsmenu a span {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Edisplay:block;\u003Cbr \/\u003Ebackground:url(\"IMAGEN DERECHA (RIGHT)\") no-repeat right top;\u003Cbr \/\u003Epadding:5px 14px 4px 4px;\u003Cbr \/\u003Ecolor:#24618E;\u003Cbr \/\u003E}\u003Cbr \/\u003E\/* Commented Backslash Hack hides rule from IE5-Mac \\*\/\u003Cbr \/\u003E#tabsmenu a span {float:none;}\u003Cbr \/\u003E\/* End IE5-Mac hack *\/\u003Cbr \/\u003E#tabsmenu a:hover {\u003Cbr \/\u003Ebackground-position:0% -42px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsmenu a:hover span {\u003Cbr \/\u003Ebackground-position:100% -42px;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Como veis en el código, \u003Cb\u003Ese necesitan dos imágenes\u003C\/b\u003E para que formen las pestañas, una que irá en \"\u003Cb\u003EIMAGEN IZQUIERDA (LEFT)\u003C\/b\u003E\" y otra en \"\u003Cb\u003EIMAGEN DERECHA (RIGHT\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003EPodéis descargar las imagenes en varios colores en \u003Ca href=\"https:\/\/sites.google.com\/site\/elescaparatederosa\/blog\/CSSmenus.zip\"\u003Eeste archivo en formato .zip\u003C\/a\u003E y una vez escogidas las que vais a usar, las subís a un \u003Cb\u003Ealojamiento\u003C\/b\u003E de imágenes o \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2009\/02\/alojar-imagenes-en-blogger.html\"\u003Eal mismo Blogger\u003C\/a\u003E para obtener su url.\u003Cbr \/\u003ENo os será dificil reconocer cual es cada imagen ya que se llaman \u003Cb\u003Etableft y tabright\u003C\/b\u003E respectivamente y terminan con una letra que identifica cada pareja: tableft\u003Cb\u003EB\u003C\/b\u003E, tabright\u003Cb\u003EB\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EGuardamos los cambios.\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Vamos ahora a la parte de \u003Cb\u003EDiseño\u003C\/b\u003E de nuestro panel, pinchamos en añadir un \u003Cb\u003Enuevo gadget HTML\u003C\/b\u003E y pegamos dentro este código:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\"tabsmenu\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"#\"\u0026gt;\u0026lt;span\u0026gt;INICIO\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"mailto:direccion email\"\u0026gt;\u0026lt;span\u0026gt;CONTACTO\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/www.blogger.com\/\"\u0026gt;\u0026lt;span\u0026gt;BLOGGER\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/www.google.es\"\u0026gt;\u0026lt;span\u0026gt;GOOGLE\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"http:\/\/elescaparatederosa.blogspot.com\/\"\u0026gt;\u0026lt;span\u0026gt;EL ESCAPARATE\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EEs aquí donde \u003Cb\u003Eeditaremos los enlaces del menú\u003C\/b\u003E y la información que se mostrará en las pestañas.\u003Cbr \/\u003EDespués arrastramos el gadget a debajo del header o a la parte del croscoll\u0026nbsp; por ejemplo.\u003Cbr \/\u003ESi necesitamos un espacio extra en esa zona podemos consultar \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/05\/elementos-adicionales-en-diseo-de-la.html\"\u003Ecomo añadir elementos adicionales en Diseño\u003C\/a\u003E o ver también \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/10\/aprovechando-espacios-en-la-plantilla.html\"\u003Ecomo aprovechar la zona del croscoll\u003C\/a\u003E."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/7737125161666286037\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/06\/menu-de-pestanas.html#comment-form","title":"114 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7737125161666286037"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7737125161666286037"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/06\/menu-de-pestanas.html","title":"Menú de pestañas"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/SgDZoAdJ9cI\/AAAAAAAAGxk\/MXs1OOC2hhc\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"114"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-790160479613123133"},"published":{"$t":"2009-05-18T03:56:00.002+02:00"},"updated":{"$t":"2009-05-18T04:05:16.920+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Mini menú"},"content":{"type":"html","$t":"Me pregunta \u003Ca href=\"http:\/\/surplus21diary.blogspot.com\/\"target=\"_blank\"\u003ESurplus21\u003C\/a\u003E como colocar un \"mini-menú\" como el que tengo en el footer del Escaparate, donde he colocado algunos iconos enlazados con diferentes servicios o páginas: Mi perfil en Blogger, en Twitter, Technorati, etc...\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SgnwioWUyuI\/AAAAAAAAGzk\/5GqZU8qi7Lo\/s1600-h\/Mini-menu.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Mini-menú\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SgnwioWUyuI\/AAAAAAAAGzk\/5GqZU8qi7Lo\/s400\/Mini-menu.jpg\" title=\"Mini-menú\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ENo es más que un div al que he añadido algunos estilos y en el que he colocado los distintos iconos con enlace uno detrás de otro.\u003Cbr \/\u003E\u003Cbr \/\u003EEl código se coloca en un\u003Cb\u003E gadget HTML\u003C\/b\u003E en la sidebar o donde queráis mostrar el mini menú:\u003Cbr \/\u003E\u003Cblockquote\u003E\u003Cbr \/\u003E\u0026lt;div style=\"text-align: center; background:#fff; border:2px solid #82B7C4; width: 100%;\"\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;span class=\"pushbutton\"\u0026gt;\u0026lt;a href=\"http:\/\/www.blogger.com\/profile\/06743611108067453905\" target=\"_blank\" title=\"Sobre mi\"\u0026gt;\u0026lt;img src=\"\u003Cbr \/\u003Ehttp:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/ScYgNwl4KeI\/AAAAAAAAGYg\/FL3sBqDjVlE\/s320\/personal.png\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;span class=\"pushbutton\"\u0026gt;\u0026lt;a href=\"mailto:lejaniaimposible@hotmail.com\" title=\"Email\"\u0026gt;\u0026lt;img src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/ScYgVjvmKwI\/AAAAAAAAGYw\/68TckepVJX8\/s320\/email_edit.png\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;span class=\"pushbutton\"\u0026gt;\u0026lt;a href=\"http:\/\/feeds.feedburner.com\/blogspot\/hnBy\" target=\"_blank\" title=\"Suscribe\"\u0026gt;\u0026lt;img src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/SP9USfdc9aI\/AAAAAAAAEgk\/LKHLLAOgJ68\/s320-R\/16-rss-square.png\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;span class=\"pushbutton\"\u0026gt;\u0026lt;a href=\"http:\/\/twitter.com\/RosaTorre\" target=\"_blank\" title=\"Sigueme en Twitter\"\u0026gt;\u0026lt;img src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/ScYjtuhV8CI\/AAAAAAAAGZA\/OGZ2EDm70Uo\/s320\/twitter.png\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003ELa primera línea del código es donde se aplican los estilos del div o contenedor:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Etext-align: center;\u003C\/b\u003E La alineación del contenido (los iconos) que en este caso es al centro.\u003Cbr \/\u003E\u003Cb\u003Ebackground:#fff;\u003C\/b\u003E El color de fondo. \u003Cbr \/\u003E\u003Cb\u003Eborder:2px solid #82B7C4;\u003C\/b\u003E El grosor, aspecto y color del borde.\u003Cbr \/\u003E\u003Cb\u003Ewidth: 100%;\u003C\/b\u003E Ocupará todo el ancho de donde esté colocado, a no ser que cambiemos 100 por un valor menor.\u003Cbr \/\u003E\u003Cbr \/\u003ELa parte de código que corresponde a cada icono, es la que empieza por \u003Cb\u003E\u0026lt;span class=\"pushbutton\"\u0026gt;\u003C\/b\u003E y acaba por \u003Cb\u003E\u0026lt;\/span\u0026gt;\u003C\/b\u003E esto es una clase que he añadido a cada icono para conseguir el \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/05\/imgenes-tipo-botn-pulsar.html\"\u003Eefecto de \"botón pulsar\"\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ci\u003EHe dejado mis datos en el código de cada icono para que os sirvan de guía al colocar los vuestros.\u003C\/i\u003E \u003Cbr \/\u003E\u003Cbr \/\u003EUna vez añadido el código en el gadget y hechos los cambios necesarios, colocamos además estas líneas de CSS en nuestra plantilla antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E, esto marcará la separación entre los iconos (2px) y le dará el efecto de pulsado:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E.pushbutton{padding: 2px;}\u003Cbr \/\u003E.pushbutton a:hover {position: relative; top: 1px; left: 1px;}\u003C\/blockquote\u003E\u003Cbr \/\u003ETambién podemos \u003Cb\u003Eusar el CSS en el mismo gadget\u003C\/b\u003E si os resulta más cómodo, solo tenéis que pegar el código sobre el que habéis puesto para el mini menú de esta manera:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.pushbutton{padding: 2px;}\u003Cbr \/\u003E.pushbutton a:hover {position: relative; top: 1px; left: 1px;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/790160479613123133\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/05\/mini-menu.html#comment-form","title":"46 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/790160479613123133"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/790160479613123133"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/05\/mini-menu.html","title":"Mini menú"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SgnwioWUyuI\/AAAAAAAAGzk\/5GqZU8qi7Lo\/s72-c\/Mini-menu.jpg","height":"72","width":"72"},"thr$total":{"$t":"46"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4996330031570305514"},"published":{"$t":"2009-02-27T00:45:00.004+01:00"},"updated":{"$t":"2010-05-17T14:18:40.816+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Menú con sub-menus"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/SaclLBojnBI\/AAAAAAAAGP0\/va8PiYgg34g\/s1600-h\/menu+robs.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/SaclLBojnBI\/AAAAAAAAGP0\/va8PiYgg34g\/s400\/menu+robs.jpg\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EPodéis verlo funcionando en mi blog de \u003Ca href=\"http:\/\/menusenprueba.blogspot.com\/\"\u003Epruebas de menús\u003C\/a\u003E, bajo el nombre de \"MENU DOS (ROBS).\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Añadimos el código CSS necesario desde \"Edición HTML\" en nuestro panel \u003Cb\u003Esin expandir la plantilla de artilugios\u003C\/b\u003E, justo antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote class=\"smallquote\"\u003E\/* MENU DOS (Robs)\u003Cbr \/\u003E----------------------------------------------- *\/\u003Cbr \/\u003E\u003Cbr \/\u003E#subnavbar {\u003Cbr \/\u003Ebackground: #64343C;\u003Cbr \/\u003Ewidth: 873px;\u003Cbr \/\u003Eheight: 27px;\u003Cbr \/\u003Efont-weight:bold;\u003Cbr \/\u003Ecolor: #FFFFFF;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003Efont-family:\"Trebuchet MS\";\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav {\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav ul {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Elist-style: none;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li {\u003Cbr \/\u003Elist-style: none;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li a, #subnav li a:link, #subnav li a:visited {\u003Cbr \/\u003Ecolor: #FFFFFF;\u003Cbr \/\u003Edisplay: block;\u003Cbr \/\u003Efont-size: 11px;\u003Cbr \/\u003Etext-transform: uppercase;\u003Cbr \/\u003Emargin: 0px 0px 0px 0px;\u003Cbr \/\u003Epadding: 5px 10px 5px 10px;\u003Cbr \/\u003Eborder-left: 1px solid #FFFFFF;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li a:hover, #subnav li a:active {\u003Cbr \/\u003Ebackground: #999999;\u003Cbr \/\u003Ecolor: #000000;\u003Cbr \/\u003Edisplay: block;\u003Cbr \/\u003Etext-decoration: none;\u003Cbr \/\u003Emargin: 0px 0px 0px 0px;\u003Cbr \/\u003Epadding: 5px 10px 5px 10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li li a, #subnav li li a:link, #subnav li li a:visited {\u003Cbr \/\u003Ebackground: #64343C;\u003Cbr \/\u003Ewidth: 120px;\u003Cbr \/\u003Eheigth: 20px\u003Cbr \/\u003Efloat: none;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 5px 10px 5px 10px;\u003Cbr \/\u003Eborder-bottom: 1px solid #FFFFFF;\u003Cbr \/\u003E\u003Cbr \/\u003Eborder-left: 1px solid #FFFFFF;\u003Cbr \/\u003Eborder-right: 1px solid #FFFFFF;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li li a:hover, #subnav li li a:active {\u003Cbr \/\u003Ebackground: #999999;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 5px 10px 5px 10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li ul {\u003Cbr \/\u003Ez-index: 9999;\u003Cbr \/\u003Eposition: absolute;\u003Cbr \/\u003Eleft: -999em;\u003Cbr \/\u003Eheight: auto;\u003Cbr \/\u003Ewidth: 160px;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li li { \u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li ul a { \u003Cbr \/\u003Ewidth: 140px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li ul a:hover, #subnav li ul a:active { \u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li ul ul {\u003Cbr \/\u003Emargin: -25px 0 0 161px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {\u003Cbr \/\u003Eleft: -999em;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {\u003Cbr \/\u003Eleft: auto;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#subnav li:hover, #subnav li.sfhover { \u003Cbr \/\u003Eposition: static;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003EEs en este código donde podemos hacer los cambios para escoger otro color diferente para el menú por ejemplo, cambiando los códigos de color en \"background\".\u003Cbr \/\u003E\u003Cbr \/\u003ELo principal a tener en cuenta es la anchura del menú, que está establecida en 873px en esta parte del código (señalado en negrita):\u003Cbr \/\u003E\u003Cblockquote\u003E#subnavbar {\u003Cbr \/\u003Ebackground: #64343C;\u003Cbr \/\u003E\u003Cb\u003Ewidth: 873px;\u003C\/b\u003E\u003Cbr \/\u003Eheight: 27px;\u003Cbr \/\u003Efont-weight:bold;\u003Cbr \/\u003Ecolor: #FFFFFF;\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003Efont-family:\"Trebuchet MS\";\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003EAhí tendréis que cambiar ese valor (873px) por el que mejor se adapte al sitio donde irá colocado. Si vais a ponerlo debajo de la cabecera, lo más adecuado será que tenga el mismo ancho que esta por ejemplo.\u003Cbr \/\u003ETambién podéis sustituir el valor en pixeles por un porcentaje, así si ponéis \"\u003Cb\u003Ewidth: 100%\u003C\/b\u003E\" el menú ocupará el ancho total disponible del sitio donde esté colocado.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Colocamos ahora el código necesario para armar nuestro menú en un gadget HTML que arrastraremos luego a donde vayamos a mostrar el menú:\u003Cbr \/\u003E\u003Cblockquote class=\"smallquote\"\u003E\u0026lt;div id=\"subnavbar\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul id=\"subnav\"\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"URL DEL BLOG\" title=\"Inicio\"\u0026gt;INICIO\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;PESTAÑA1\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA1\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA1\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA1\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"mailto:\" title=\"Enviame un email\"\u0026gt;CONTACTO\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;PESTAÑA2\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA2\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA2\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA2\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;PESTAÑA3\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA3\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA3\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;PESTAÑA4\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA4\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA4\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;PESTAÑA5\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA5\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA5\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA5\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA5\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EEs en este código donde tenemos que colocar los enlaces y el texto que aparecerá en cada pestaña del menú y de los sub-menús.\u003Cbr \/\u003E\u003Cbr \/\u003EDonde dice a herf= se coloca cada enlace entre las comillas.\u003Cbr \/\u003EEntre las comillas de title= colocamos el texto explicativo que se verá al pasar el puntero sobre el enlace.\u003Cbr \/\u003EEn PESTAÑA1, PESTAÑA2, etc. colocamos el texto que se verá en cada pestaña del menú y en SUB-PESTAÑA1, SUB-PESTAÑA2, etc. el texto que se verá en cada sub-menú.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EPara añadir más pestañas y subpestañas al menú, fijaros muy bien en como está construido el código:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEl contenido de las pestañas que \u003Cb\u003Eno van a incluir subpestañas\u003C\/b\u003E, va incluido entre \u003Cb\u003E\u0026lt;li\u0026gt;\u003C\/b\u003E y \u003Cb\u003E\u0026lt;\/li\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;li\u0026gt;\u003C\/b\u003E\u0026lt;a href=\"URL DEL BLOG\" title=\"Inicio\"\u0026gt;INICIO\u0026lt;\/a\u0026gt;\u003Cb\u003E\u0026lt;\/li\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEl contenido de la pestaña \u003Cb\u003Eque incluirá subpestañas\u003C\/b\u003E irá incluido entre \u003Cb\u003E\u0026lt;li\u0026gt;\u003C\/b\u003E y \u003Cb\u003E\u0026lt;ul\u0026gt;\u003C\/b\u003E a continuación estarán las subpestañas (cada una incluida entre \u0026lt;li\u0026gt; y \u0026lt;\/li\u0026gt;) y para cerrar terminaremos con  \u003Cb\u003E\u0026lt;\/ul\u0026gt; \u0026lt;\/li\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;li\u0026gt;\u003C\/b\u003E\u0026lt;a href=\"\" title=\"\"\u0026gt;PESTAÑA3\u0026lt;\/a\u0026gt;\u003Cb\u003E\u0026lt;ul\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;li\u0026gt;\u003C\/b\u003E\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA3\u0026lt;\/a\u0026gt;\u003Cb\u003E\u0026lt;\/li\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;li\u0026gt;\u003C\/b\u003E\u0026lt;a href=\"\" title=\"\"\u0026gt;SUB-PESTAÑA3\u0026lt;\/a\u0026gt;\u003Cb\u003E\u0026lt;\/li\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;\/ul\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;\/li\u0026gt;\u003C\/b\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4996330031570305514\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/02\/menu-con-sub-menus.html#comment-form","title":"272 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4996330031570305514"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4996330031570305514"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/02\/menu-con-sub-menus.html","title":"Menú con sub-menus"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/SaclLBojnBI\/AAAAAAAAGP0\/va8PiYgg34g\/s72-c\/menu+robs.jpg","height":"72","width":"72"},"thr$total":{"$t":"272"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-2107603569197011959"},"published":{"$t":"2009-02-09T03:49:00.012+01:00"},"updated":{"$t":"2010-04-12T15:58:45.820+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Menú desplegable con color"},"content":{"type":"html","$t":"Aunque hace tiempo que publiqué como hacer un \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/06\/link-o-men-en-expandible.html\"\u003Emenú desplegable\u003C\/a\u003E para incluir enlaces, se me ha ocurrido gracias a un comentario de \u003Cb\u003EFriol\u003C\/b\u003E que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Menú desplegable sencillo.\u003Cbr \/\u003E\u003Cbr \/\u003EColocamos este código en un \u003Cb\u003Egadget HTMLJavascript\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;select onchange=\u0026quot;if(options[selectedIndex].value){location = options[selectedIndex].value}\u0026quot; \u003Cb\u003Eclass=\u0026quot;combobox\u0026quot;\u003C\/b\u003E name=\u0026quot;SiteMap\u0026quot; size=\u0026quot;1\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;option selected\/\u0026gt;TITULO\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;\/select\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003EY este sería el resultado:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cselect onchange=\"if(options[selectedIndex].value){location = options[selectedIndex].value}\" name=\"SiteMap\" size=\"1\"\u003E\u003Cbr \/\u003E\u003Coption selected\/\u003ETITULO\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003C\/select\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Menú desplegable con opción \"\u003Cb\u003EIr\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003EColocamos este código en un \u003Cb\u003Egadget HTMLJavascript\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;script language=\u0026quot;JavaScript\u0026quot;\u0026gt;\u003Cbr \/\u003Efunction Ir_amigos(form) {var myindex=form.dest.selectedIndex\u003Cbr \/\u003Ewindow.open(form.dest.options[myindex].value, target=\u0026quot;_parent\u0026quot;, \u0026quot;toolbar=yes,scrollbars=yes,location=yes\u0026quot;); }\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;form name=\u0026quot;mis_enlaces\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;select name=\u0026quot;dest\u0026quot; \u003Cb\u003Eclass=\u0026quot;combobox\u0026quot;\u003C\/b\u003E SIZE=1\u0026gt;\u003Cbr \/\u003E\u0026lt;option \u003Cb\u003Eclass=\u0026quot;amarillo\u0026quot;\u003C\/b\u003E selected value=\u0026quot;\u0026quot;\u0026gt;BLOGS AMIGOS\u003Cbr \/\u003E\u0026lt;option \u003Cb\u003Eclass=\u0026quot;rojo\u0026quot;\u003C\/b\u003E value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK1\u003Cbr \/\u003E\u0026lt;option \u003Cb\u003Eclass=\u0026quot;azul\u0026quot;\u003C\/b\u003E value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK2\u003Cbr \/\u003E\u0026lt;option \u003Cb\u003Eclass=\u0026quot;verde\u0026quot;\u003C\/b\u003E value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK3\u003Cbr \/\u003E\u0026lt;\/select\u0026gt;\u0026lt;input type=\u0026quot;button\u0026quot; value=\u0026quot;Ir\u0026quot; onClick=\u0026quot;Ir_amigos(this.form)\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;\/form\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003EY este sería el resultado:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cscript language=\"JavaScript\"\u003Efunction Ir_amigos(form) {var myindex=form.dest.selectedIndex window.open(form.dest.options[myindex].value, target=\"_parent\", \"toolbar=yes,scrollbars=yes,location=yes\"); } \u003C\/script\u003E\u003Cbr \/\u003E\u003Cform name=\"mis_enlaces\"\u003E\u003Cselect name=\"dest\" size=1\u003E\u003Cbr \/\u003E\u003Coption selected value=\"\"\u003EBLOGS AMIGOS\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK1\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK2\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK3\u003Cbr \/\u003E\u003C\/select\u003E\u003Cinput type=\"button\" value=\"Ir\" onClick=\"Ir_amigos(this.form)\"\u003E\u003Cbr \/\u003E\u003C\/form\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Menú desplegable con enlaces que abren en \"\u003Cb\u003Epágina nueva\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003EColocamos este código en un \u003Cb\u003Egadget HTMLJavascript\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;script language=\u0026quot;JavaScript\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;!--\u003Cbr \/\u003Efunction sitios_enlaces(form) {\u003Cbr \/\u003Evar myindex=form.destino.selectedIndex\u003Cbr \/\u003Ewindow.open(form.destino.options[myindex].value,\u0026quot;main\u0026quot;,\u0026quot;\u0026quot;); }\u003Cbr \/\u003E\/\/--\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;form name=\u0026quot;miForma\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;select name=\u0026quot;destino\u0026quot; size=1\u0026gt;\u003Cbr \/\u003E\u0026lt;option selected value=\u0026quot;\u0026quot;\u0026gt; MIS FAVORITOS \u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK1\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK2\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK3\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK4\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\u0026gt;LINK5\u003Cbr \/\u003E\u0026lt;\/select\u0026gt;\u0026lt;input type=\u0026quot;button\u0026quot; \u003Cb\u003Eclass=\u0026quot;boton\u0026quot;\u003C\/b\u003E value=\u0026quot;Ir\u0026quot; onClick=\u0026quot;sitios_enlaces(this.form)\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;\/form\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003EY este sería el resultado:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cscript language=\"JavaScript\"\u003E \u003C!--  function sitios_enlaces(form) {  var myindex=form.destino.selectedIndex  window.open(form.destino.options[myindex].value,\"main\",\"\"); }  \/\/--\u003E \u003C\/script\u003E\u003Cbr \/\u003E\u003Cform name=\"miForma\"\u003E\u003Cselect name=\"destino\" size=1\u003E\u003Cbr \/\u003E\u003Coption selected value=\"\"\u003E MIS FAVORITOS \u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK1\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK2\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK3\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK4\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\u003ELINK5\u003Cbr \/\u003E\u003C\/select\u003E\u003Cinput type=\"button\" value=\"Ir\" onClick=\"sitios_enlaces(this.form)\"\u003E\u003Cbr \/\u003E\u003C\/form\u003E\u003Cbr \/\u003EComo veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.\u003Cbr \/\u003ESupongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas \"clases\" añadidas en cada menú para darles color mediante CSS.\u003Cbr \/\u003E\u003Cbr \/\u003EEn el primer menú, la clase añadida (\u003Cb\u003Eclass=\u0026quot;combobox\u0026quot;\u003C\/b\u003E) controlará tanto la \"cajita\" como los enlaces una vez desplegados.\u003Cbr \/\u003ESi añadimos algo como esto en el CSS de nuestra plantilla (antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E) \"ordenamos\" al menú que tenga un color de fondo y que su texto sea de color blanco:\u003Cbr \/\u003E\u003Cbr \/\u003E.combobox {\u003Cbr \/\u003Ebackground-color: #009900;\u003Cbr \/\u003Ecolor: #ffffff;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EEl resultado sería este:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cselect onchange=\"if(options[selectedIndex].value){location = options[selectedIndex].value}\" class=\"combobox\" name=\"SiteMap\" size=\"1\"\u003E\u003Cbr \/\u003E\u003Coption selected\/\u003ETITULO\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003C\/select\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEn el segundo menú, he mantenido la clase \u003Cb\u003Eclass=\u0026quot;combobox\u0026quot;\u003C\/b\u003E pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:\u003Cbr \/\u003E\u003Cbr \/\u003E.azul {\u003Cbr \/\u003Ebackground-color: #0000FF;\u003Cbr \/\u003Ecolor: #ffffff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.rojo {\u003Cbr \/\u003Ebackground-color: #FF0000;\u003Cbr \/\u003Ecolor: #ffffff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.verde {\u003Cbr \/\u003Ebackground-color: #009900;\u003Cbr \/\u003Ecolor: #ffffff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.amarillo{\u003Cbr \/\u003Ebackground-color: #FFFF00;\u003Cbr \/\u003Ecolor: #000000;\u003Cbr \/\u003E} \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EEl resultado sería este:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cscript language=\"JavaScript\"\u003Efunction Ir_amigos(form) {var myindex=form.dest.selectedIndex window.open(form.dest.options[myindex].value, target=\"_parent\", \"toolbar=yes,scrollbars=yes,location=yes\"); } \u003C\/script\u003E\u003Cbr \/\u003E\u003Cform name=\"mis_enlaces\"\u003E\u003Cselect class=\"combobox\" name=\"dest\" size=\"1\"\u003E\u003Cbr \/\u003E\u003Coption selected class=\"amarillo\" value=\"\"\/\u003EBLOGS AMIGOS\u003Cbr \/\u003E\u003Coption class=\"rojo\" value=\"URL DE LA PAGINA\"\/\u003ELINK1\u003Cbr \/\u003E\u003Coption class=\"azul\" value=\"URL DE LA PAGINA\"\/\u003ELINK2\u003Cbr \/\u003E\u003Coption class=\"verde\" value=\"URL DE LA PAGINA\"\/\u003ELINK3\u003Cbr \/\u003E\u003C\/select\u003E\u003Cinput value=\"Ir\" onclick=\"Ir_amigos(this.form)\" type=\"button\"\/\u003E\u003Cbr \/\u003E\u003C\/form\u003E\u003Cbr \/\u003EEn el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (\u003Cb\u003Eclass=\u0026quot;boton\u0026quot;\u003C\/b\u003E), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:\u003Cbr \/\u003E\u003Cbr \/\u003E.boton {\u003Cbr \/\u003Ecolor:yellow; \u003Cbr \/\u003Ebackground-color:red; \u003Cbr \/\u003Efont-weight: bold; \u003Cbr \/\u003Eborder: 2px solid #ddd;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EResultado:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cscript language=\"JavaScript\"\u003E\u003C!-- function sitios_enlaces(form) { var myindex=form.destino.selectedIndex window.open(form.destino.options[myindex].value,\"main\",\"\"); } \/\/--\u003E\u003C\/script\u003E\u003Cbr \/\u003E\u003Cform name=\"miForma\"\u003E\u003Cselect name=\"destino\" size=\"1\"\u003E\u003Cbr \/\u003E\u003Coption selected value=\"\"\/\u003E MIS FAVORITOS\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ELINK1\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ELINK2\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ELINK3\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ELINK4\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ELINK5\u003Cbr \/\u003E\u003C\/select\u003E\u003Cinput class=\"boton\" value=\"Ir\" onclick=\"sitios_enlaces(this.form)\" type=\"button\"\/\u003E\u003Cbr \/\u003E\u003C\/form\u003E\u003Cstyle type='text\/css'\u003E.azul {background-color: #0000FF;color: #ffffff;} .rojo {background-color: #FF0000;color: #ffffff;} .verde {background-color: #009900;color: #ffffff;} .amarillo{background-color: #FFFF00;color: #000000;}  .combobox {background-color: #009900;color: #ffffff;} .boton {color:yellow; background-color:red; font-weight: bold; border: 2px solid #ddd;}  \u003C\/style\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/2107603569197011959\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/02\/menu-desplegable-con-color.html#comment-form","title":"71 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2107603569197011959"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2107603569197011959"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2009\/02\/menu-desplegable-con-color.html","title":"Menú desplegable con color"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"71"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-9121689663640905696"},"published":{"$t":"2008-12-31T03:18:00.003+01:00"},"updated":{"$t":"2009-05-28T02:48:53.963+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Menu minislide"},"content":{"type":"html","$t":"Un sencillo menú con CSS y Javascript que podéis ver con el nombre de \"menú uno (minislide)\" en mi \u003Ca href=\"http:\/\/menusenprueba.blogspot.com\/\"\u003Eblog de pruebas\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Necesitaremos \u003Ca href=\"http:\/\/sites.google.com\/site\/elescaparatederosa\/blog\/minislide.txt\"\u003Edescargar el archivo javascript\u003C\/a\u003E a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.\u003Cbr \/\u003ELo colocamos entonces antes del \u003Cb\u003E\u0026lt;\/head\u0026gt;\u003C\/b\u003E de nuestra plantilla de esta manera:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;script src='URL_DEL_ARCHIVO_JAVASCRIPT' type='text\/javascript'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Incluiremos ahora el código CSS necesario antes del \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E de nuestra plantilla:\u003Cbr \/\u003E\u003Cblockquote class=\"smallquote\"\u003E\/*MENU UNO (Minislide)\u003Cbr \/\u003EStephen Clark\u003Cbr \/\u003Ewww.sgclark.com\/sandbox\/minislide\u003Cbr \/\u003E----------------------------------------------------------------------- *\/\u003Cbr \/\u003E\u003Cbr \/\u003E#nav {padding:10px 0px 0px 0; margin: 0 0 20px 0; float:left; width:100%; border-bottom:1px solid #888888;}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E#minislide {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px 10px 0px 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; position:relative;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; z-index:2;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u003Cbr \/\u003E#minislide li {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; display: inline;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; list-style: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; position:relative;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; text-transform:uppercase;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u003Cbr \/\u003E#minislide a:link, #minislide a:visited {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; line-height: 19px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0 10px 0px 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #888888;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u003Cbr \/\u003E#minislide a.active:link, #minislide a.active:visited {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; border-bottom: 5px solid #888888;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; padding-bottom: 1px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #888888;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E#minislide a:hover {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; border-bottom: 5px solid #888888;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; padding-bottom: 1px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #CC0000;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E#animated-tab {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; position: absolute;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; z-index: 1;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/*font-size: 85%;*\/\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; line-height: 19px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; padding-bottom: 1px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; border-bottom: 5px solid #888888;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;width:100%;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003Ebr\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; clear:both;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Ya solo nos queda colocar el código necesario para armar los enlaces del menú, lo pondremos dentro de un gadget HTMLJavascript \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/05\/elementos-adicionales-en-diseo-de-la.html\"\u003Edebajo de la cabecera\u003C\/a\u003E o en el \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/10\/aprovechando-espacios-en-la-plantilla.html\"\u003Ecrosscol\u003C\/a\u003E por ejemplo:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\"nav\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul id=\"minislide\"\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"#\"\u0026gt;Inicio\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"#\" title=\"Mi perfil en Blogger\"\u0026gt;Perfil\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"#\" title=\"Suscribe Feed\"\u0026gt;Feed\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"mailto:#\" title=\"Envia un email\"\u0026gt;Contacto\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"search\/label\/?max-results=999\" title=\"Ver todas las entradas\"\u0026gt;Ver todas las entradas\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/9121689663640905696\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/12\/menu-minislide.html#comment-form","title":"90 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/9121689663640905696"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/9121689663640905696"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/12\/menu-minislide.html","title":"Menu minislide"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"90"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6705277290582726715"},"published":{"$t":"2008-10-09T04:19:00.013+02:00"},"updated":{"$t":"2008-11-26T17:59:49.949+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Menu de pestañas invertidas"},"content":{"type":"html","$t":"Este es el tipo de menú que \u003Cb\u003Eusé durante mucho tiempo\u003C\/b\u003E en El Escaparate y que podéis ver debajo de las etiquetas al pie del header.\u003Cbr \/\u003EEste menú esta sacado de \u003Ca href=\"http:\/\/www.dynamicdrive.com\/style\/csslibrary\/item\/dd-color-tabs-ii\/\"\u003EDynamic Drive\u003C\/a\u003E, aunque con algunas modificaciones en cuanto a color, tipo de texto, etc. que pueden hacerse sin problemas en el código CSS del menú.\u003Cbr \/\u003EEn Dynamic Drive, como podéis ver en la imagen, han usado dos colores: \u003Cb\u003E#8b0000\u003C\/b\u003E y \u003Cb\u003E#d50509\u003C\/b\u003E, así que para cambiarlos  solo tenéis que localizar esos códigos en el CSS del menú y sustituirlos por el código de vuestros colores.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/SOO9LgAIUII\/AAAAAAAAEWQ\/Bl66Z7z53NQ\/s1600-h\/Menu.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/SOO9LgAIUII\/AAAAAAAAEWQ\/4LjVZ_P9Law\/s400-R\/Menu.jpg\" border=\"0\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[1] \u003C\/b\u003EEn primer lugar nos descargamos estas dos imágenes a nuestro PC (\u003Cb\u003Ebotón derecho del ratón, guardar como\u003C\/b\u003E) y las subimos a\u003Cb\u003E nuestro propio alojamiento\u003C\/b\u003E para más tarde usar su \u003Cb\u003Eurl\u003C\/b\u003E en el código del menú:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cimg src=\"http:\/\/i201.photobucket.com\/albums\/aa306\/picumoros\/color_tabs_left2.gif\" class=\"codeimages\" title=\"Imagen izquierda\" width=\"30\" height=\"50\" \/\u003E  \u003Cimg src=\"http:\/\/i201.photobucket.com\/albums\/aa306\/picumoros\/color_tabs_right2.gif\" class=\"codeimages\" title=\"Imagen derecha\" width=\"30\" height=\"50\" \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ci\u003EHacerlo así, y no copiéis la url de mis imágenes, pues no sería la primera vez que por problemas de ancho de banda he de trasladar imágenes a otro alojamiento y si eso pasase, el menú se desconfiguraría.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2] \u003C\/b\u003EColocamos ahora el código CSS del menú \u003Cb\u003Ejusto antes de \u0026lt;\/head\u0026gt;\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\/*Credits: Dynamic Drive CSS Library *\/\u003Cbr \/\u003E\/*URL: http:\/\/www.dynamicdrive.com\/style\/ *\/\u003Cbr \/\u003E#invertedtabs{\u003Cbr \/\u003Emargin-left: 4px;\u003Cbr \/\u003Epadding: 0;\u003Cbr \/\u003Ewidth: 100%;\u003Cbr \/\u003Ebackground: transparent;\u003Cbr \/\u003Evoice-family: \"\\\"}\\\"\";\u003Cbr \/\u003Evoice-family: inherit;\u003Cbr \/\u003Epadding-left: 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs ul{\u003Cbr \/\u003Efont: bold 11px Arial, Verdana, sans-serif;\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Emargin-bottom: 1em; \/*margin between menu and rest of content*\/\u003Cbr \/\u003Epadding:0;\u003Cbr \/\u003Elist-style:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs li{\u003Cbr \/\u003Edisplay:inline;\u003Cbr \/\u003Emargin:0 2px 0 0;\u003Cbr \/\u003Epadding:0;\u003Cbr \/\u003Etext-transform:uppercase;\u003Cbr \/\u003Eline-height: 1.5em;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs a{\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Ecolor: white;\u003Cbr \/\u003Ebackground: #8b0000 url(media\/color_tabs_left2.gif) no-repeat left bottom;\u003Cbr \/\u003Emargin:0 2px 0 0;\u003Cbr \/\u003Epadding:0 0 0 3px;\u003Cbr \/\u003Etext-decoration:none;\u003Cbr \/\u003Eletter-spacing: 1px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs a span{\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Edisplay:block;\u003Cbr \/\u003Ebackground: transparent url(media\/color_tabs_right2.gif) no-repeat right bottom;\u003Cbr \/\u003Epadding:3px 9px 3px 6px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs a span{\u003Cbr \/\u003Efloat:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs a:hover{\u003Cbr \/\u003Ebackground-color: #d50509;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs a:hover span{\u003Cbr \/\u003Ebackground-color: #d50509;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabs #current a, #invertedtabs #current span{ \/*currently selected tab*\/\u003Cbr \/\u003Ebackground-color: #d50509;\u003Cbr \/\u003E}\u003Cbr \/\u003E#invertedtabsline{\u003Cbr \/\u003Eclear: both;\u003Cbr \/\u003Epadding: 0;\u003Cbr \/\u003Ewidth: 100%;\u003Cbr \/\u003Eheight: 8px;\u003Cbr \/\u003Eline-height: 8px;\u003Cbr \/\u003Ebackground: #8b0000;\u003Cbr \/\u003Eborder-bottom: 1px solid #fff; \/*Remove this to remove border between bar and tabs*\/\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EEs aquí donde tendremos que sustituir:  \u003Cb\u003Emedia\/color_tabs_left2.gif \u003C\/b\u003E y \u003Cb\u003Emedia\/color_tabs_right2.gif \u003C\/b\u003Epor la url de las imágenes que hemos descargado antes, fijaros que no es demasiado dificil saber en que lugar va cada una, pues\u003Cb\u003E la terminación de su url será la misma que la del ejemplo\u003C\/b\u003E.\u003Cb\u003E \u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ECambiamos también aquí \u003Cb\u003Eel código de los colores\u003C\/b\u003E como ya os explicaba antes, por los vuestros.\u003Cb\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E[3] \u003C\/b\u003EColocamos ahora el código necesario para mostrar nuestro menú y donde vamos a \u003Cb\u003Econstruir los enlaces\u003C\/b\u003E. Podemos ponerlo directamente en un \u003Cb\u003Enuevo elemento (Gadget) HTML\u003C\/b\u003E y arrastrarlo a debajo de la cabecera o, como en mi caso, colocarlo en el \u003Cb\u003E\"crosscol\"\u003C\/b\u003E.\u003Cb\u003E \u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u003Ci\u003EEn la entrada \"\u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/10\/aprovechando-espacios-en-la-plantilla.html\"\u003EAprovechando espacios en la plantilla (crosscol)\u003C\/a\u003E\", podéis ver como dar uso a la zona del \"\u003Cb\u003Ecrosscol\u003C\/b\u003E\".\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\"invertedtabsline\"\u0026gt;\u0026amp;nbsp;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;div id=\"invertedtabs\"\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li style=\"margin-left: 1px\"\u0026gt;\u0026lt;a href=\"\u003Cb\u003Ehttp:\/\/elescaparatederosa.blogspot.com\u003C\/b\u003E\" title=\"\u003Cb\u003EInicio\u003C\/b\u003E\"\u0026gt;\u0026lt;span\u0026gt;\u003Cb\u003EInicio\u003C\/b\u003E\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\u003Cb\u003Emailto:lejaniaimposible@hotmail.com\u003C\/b\u003E\" title=\"\u003Cb\u003EEnvia un email\u003C\/b\u003E\"\u0026gt;\u0026lt;span\u0026gt;\u003Cb\u003EContacto\u003C\/b\u003E\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\u003Cb\u003Ehttp:\/\/feeds.feedburner.com\/blogspot\/hnBy\u003C\/b\u003E\" title=\"\u003Cb\u003ESuscribete al Escaparate\u003C\/b\u003E\"\u0026gt;\u0026lt;span\u0026gt;\u003Cb\u003ESuscribe Feed\u003C\/b\u003E\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\u003Cb\u003Ehttp:\/\/www.blogger.com\/profile\/06743611108067453905\u003C\/b\u003E\" title=\"\u003Cb\u003ESobre mi\u003C\/b\u003E\"\u0026gt;\u0026lt;span\u0026gt;\u003Cb\u003ESobre mi\u003C\/b\u003E\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"\u003Cb\u003Ehttp:\/\/elescaparatederosa.blogspot.com\/search\/label\/?max-results=999\u003C\/b\u003E\" title=\"\u003Cb\u003EVer todas las entradas\u003C\/b\u003E\"\u0026gt;\u0026lt;span\u0026gt;\u003Cb\u003EVer todas las entradas\u003C\/b\u003E\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;          \u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;br style=\"clear: left\"\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EPor supuesto tendréis que cambiar en este código mis datos (\u003Cb\u003Elos he resaltado en negrita\u003C\/b\u003E) por los vuestros."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/6705277290582726715\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/10\/menu-de-pestaas-invertidas.html#comment-form","title":"47 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6705277290582726715"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6705277290582726715"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/10\/menu-de-pestaas-invertidas.html","title":"Menu de pestañas invertidas"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/SOO9LgAIUII\/AAAAAAAAEWQ\/4LjVZ_P9Law\/s72-Rc\/Menu.jpg","height":"72","width":"72"},"thr$total":{"$t":"47"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-727042298486105848"},"published":{"$t":"2008-09-21T02:41:00.001+02:00"},"updated":{"$t":"2008-09-21T22:45:47.528+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Buscadores"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Menu barra superior con buscador incluido"},"content":{"type":"html","$t":"Un menú horizontal tipo Navbar para colocar en la parte superior de nuestro blog y que además de los enlaces que añadamos en el, lleva un \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/04\/sencillo-buscador-blog.html\"\u003Esencillo buscador\u003C\/a\u003E incorporado, que funciona muy bien.\u003Cbr \/\u003EComo podéis ver en la imagen de ejemplo, la barra del menú ocupará todo el ancho de la pantalla:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SNGew8pTL1I\/AAAAAAAAEOA\/SoU9ROg_dLk\/s1600-h\/Buscador+Top.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SNGew8pTL1I\/AAAAAAAAEOA\/kG0m_e37Cl0\/s400-R\/Buscador+Top.jpg\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EPara colocarlo en nuestro blog solo son necesarios dos simples pasos:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1] \u003C\/b\u003EEn la parte de \u003Cb\u003E\"Edición Html\"\u003C\/b\u003E de nuestra plantilla \u003Cb\u003Esin expandir las plantillas de artilugios\u003C\/b\u003E, localizamos la etiqueta\u003Cb\u003E ]]\u0026gt;\u0026lt;\/b:skin\u0026gt; \u003C\/b\u003Ey justo antes pegamos este código CSS:\u003Cbr \/\u003E\u003Cblockquote\u003E\/*-- CSS Menu Superior-- *\/\u003Cbr \/\u003E#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: \"Century Gothic\", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}\u003Cbr \/\u003E.nav {width: 950px; margin: auto;}\u003Cbr \/\u003E\u003Cbr \/\u003Eul.navtop { padding: 0px;}\u003Cbr \/\u003Eul.navtop li { list-style: none; display: inline;}\u003Cbr \/\u003Eul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}\u003Cbr \/\u003Eul.navtop li a:visited { text-decoration: none; color: #737374;}\u003Cbr \/\u003Eul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }\u003Cbr \/\u003Eul.navtop li a:active { text-decoration: none; color: #737374; }\u003Cbr \/\u003Eul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }\u003Cbr \/\u003Eul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }\u003Cbr \/\u003Eul.navtop li ul { float:left; margin:0; padding:0; }\u003Cbr \/\u003E\u003Cbr \/\u003E#searchcont { width: 100%; margin: 12px auto 12px auto; }\u003Cbr \/\u003E\u003Cbr \/\u003E#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}\u003Cbr \/\u003Einput#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}\u003Cbr \/\u003Einput#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}\u003C\/blockquote\u003E\u003Ci\u003EEn este código CSS es donde tendréis que cambiar los datos necesarios para modificar el color, tipo de texto, etc. del menú.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E\u0026nbsp; Colocaremos ahora el código necesario para que se muestre la \"barra menú\" en la parte superior del blog y lo haremos justo sobre \u003Cb\u003E\u0026lt;div id='header-wrapper'\u0026gt;\u003C\/b\u003E y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de \u003Cb\u003E\u0026lt;body\u0026gt; \u003C\/b\u003Edonde debería de funcionar:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;!-- Menu Superior --\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='navtop'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='nav'\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;ul class='navtop'\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;li\u0026gt;\u0026lt;a href='\u003Cb\u003Ehttp:\/\/elescaparatederosa.blogspot.com\u003C\/b\u003E'\u0026gt;Inicio\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;li\u0026gt;\u0026lt;a href='\u003Cb\u003Ehttp:\/\/draft.blogger.com\/profile\/06743611108067453905\u003C\/b\u003E' title='\u003Cb\u003EPerfil Blogger\u003C\/b\u003E'\u0026gt;\u003Cb\u003ESobre mi\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='\u003Cb\u003Ehttp:\/\/feeds.feedburner.com\/blogspot\/hnBy\u003C\/b\u003E' title='\u003Cb\u003ESuscribe Feed\u003C\/b\u003E'\u0026gt;\u003Cb\u003ESuscribe Feed\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='\u003Cb\u003Emailto:lejaniaimposible@hotmail.com\u003C\/b\u003E' title='\u003Cb\u003EContactame\u003C\/b\u003E'\u0026gt;\u003Cb\u003EContacto\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='\u003Cb\u003Ehttp:\/\/elescaparatederosa.blogspot.com\/search\/label\/?max-results=999\u003C\/b\u003E' title='\u003Cb\u003EVer todas las entradas\u003C\/b\u003E'\u0026gt;\u003Cb\u003EVer todas las entradas\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;form action='\/search' id='searchform' method='get' style='display:inline;'\u0026gt;\u0026lt;input id='search-box' name='q' type='text'\/\u0026gt;\u0026lt;input id='search-btn' type='submit' value='Buscar'\/\u0026gt;\u0026lt;\/form\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- Fin Menu superior --\u0026gt;\u003C\/blockquote\u003E\u003Ci\u003ETendréis que cambiar en el código mis datos por los vuestros, lo que no os será muy difícil\u0026nbsp; ya que los he colocado resaltados en negrita.\u003C\/i\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/727042298486105848\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/09\/menu-barra-superior-con-buscador.html#comment-form","title":"242 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/727042298486105848"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/727042298486105848"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/09\/menu-barra-superior-con-buscador.html","title":"Menu barra superior con buscador incluido"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SNGew8pTL1I\/AAAAAAAAEOA\/kG0m_e37Cl0\/s72-Rc\/Buscador+Top.jpg","height":"72","width":"72"},"thr$total":{"$t":"242"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-8409742977947579522"},"published":{"$t":"2008-08-15T03:02:00.005+02:00"},"updated":{"$t":"2008-08-15T03:28:07.801+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Etiquetas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Plantillas"}],"title":{"type":"text","$t":"Menú de etiquetas (expandir y contraer)"},"content":{"type":"html","$t":"Una sencilla manera de mostrar las etiquetas en nuestra sidebar de forma que no ocupen casi espacio.\u003Cbr \/\u003ESerá muy útil para aquellos que tienen en su blog aplicado un número excesivo de etiquetas, ya que solo se mostrará el título del elemento con el símbolo \u003Cb\u003E[+\/-]\u003C\/b\u003E delante y una vez se pinche en este símbolo, las etiquetas aparecerán expandidas debajo hasta que, volviendo a pinchar en el símbolo, se oculten de nuevo.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/SKTXCOBmSOI\/AAAAAAAAEEE\/4GDvxTWX2nc\/s1600-h\/Etiquetas.jpg\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/SKTXCOBmSOI\/AAAAAAAAEEE\/FWoGCz9fM0w\/s320-R\/Etiquetas.jpg\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/SKTXFfMT_0I\/AAAAAAAAEEM\/PNwBVGwpc5o\/s1600-h\/etiquetas+dos.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/SKTXFfMT_0I\/AAAAAAAAEEM\/-afCbo97MfI\/s320-R\/etiquetas+dos.jpg\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[Paso 1]\u003C\/b\u003E En la pestaña de Diseño - Edición Html, localizamos el código del elemento \"Etiquetas\" \u003Cb\u003Esin expandir la plantilla de artilugios\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='Label1' locked='false' title='Etiquetas' type='Label'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[Paso 2]\u003C\/b\u003E Sustituimos esa línea por este código:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='Label1' locked='false' title='Etiquetas' type='Label'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Eif(typeof(rnd) == 'undefined') var rnd = '';\u003Cbr \/\u003Ernd = Math.floor(Math.random()*1000);\u003Cbr \/\u003Ernd = 'id-' + rnd;\u003Cbr \/\u003Edocument.write('\u0026lt;a href=\u0026quot;#\u0026quot; onclick=\u0026quot;tmp = document.getElementById(\u0026amp;quot;' + rnd + '\u0026amp;quot;); tmp.style.display = (tmp.style.display == \u0026amp;quot;none\u0026amp;quot;) ? \u0026amp;quot;block\u0026amp;quot; : \u0026amp;quot;none\u0026amp;quot;; return false;\u0026quot; style=\u0026quot;float:left;margin-right:5px;\u0026quot;\u0026gt;');\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;[+\/-]\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Edocument.write('\u0026lt;\\\/a\u0026gt;');\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:title'\u0026gt;\u003Cbr \/\u003E\u0026lt;h2\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Edocument.write('\u0026lt;div id=\u0026quot;' + rnd + '\u0026quot; style=\u0026quot;display:none;\u0026quot;\u0026gt;');\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.url == data:label.url'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:label.name\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:label.url'\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Edocument.write('\u0026lt;\\\/div\u0026gt;');\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;b:include name='quickedit'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[Paso 3]\u003C\/b\u003E Comprobar en \"Vista Previa\" y si todo está correcto \"Guardar Cambios\"."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/8409742977947579522\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/08\/menu-de-etiquetas-expandir-y-contraer.html#comment-form","title":"138 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8409742977947579522"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8409742977947579522"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/08\/menu-de-etiquetas-expandir-y-contraer.html","title":"Menú de etiquetas (expandir y contraer)"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/SKTXCOBmSOI\/AAAAAAAAEEE\/FWoGCz9fM0w\/s72-Rc\/Etiquetas.jpg","height":"72","width":"72"},"thr$total":{"$t":"138"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-3138285845398240523"},"published":{"$t":"2008-04-19T02:48:00.004+02:00"},"updated":{"$t":"2008-12-09T01:28:54.921+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"CSSplay  (Menu numero 4)"},"content":{"type":"html","$t":"A petición de \u003Ca href=\"http:\/\/listacelyc2008.blogspot.com\/\"\u003E Pizca\u003C\/a\u003E paso a explicaros como colocar el menú \"Professional #4\" de \u003Ca href=\"http:\/\/www.cssplay.co.uk\/menus\/pro_horizontal.html#nogo\"\u003E CSSplay\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SAIceE_J_pI\/AAAAAAAADZU\/_DsbSiZuZK0\/s1600-h\/Menu4.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SAIceE_J_pI\/AAAAAAAADZU\/_DsbSiZuZK0\/s400\/Menu4.jpg\" border=\"0\" alt=\"Ejemplo menu4\"id=\"BLOGGER_PHOTO_ID_5188741023744523922\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Colocamos el CSS necesario \u003Cb\u003Eantes\u003C\/b\u003E de la etiqueta \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E de nuestra plantilla:\u003Cbr \/\u003E\u003Cblockquote\u003E\/*Credits: CSSplay *\/\u003Cbr \/\u003E\/*URL: http:\/\/www.cssplay.co.uk\/menus\/pro_four *\/\u003Cbr \/\u003E.preload4 {background: url(http:\/\/img361.imageshack.us\/img361\/9697\/profour1bu6.gif);}\u003Cbr \/\u003E.menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(http:\/\/img132.imageshack.us\/img132\/53\/profour0tc2.gif);}\u003Cbr \/\u003E.menu4 li {float:left;}\u003Cbr \/\u003E.menu4 li a {display:block; float:left; height:35px; line-height:33px; color:#aaa; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;}\u003Cbr \/\u003E.menu4 li a b {float:left; display:block; padding:0 28px 0 14px; color:#aaa;}\u003Cbr \/\u003E.menu4 li.current a {color:#fff; background:url(http:\/\/img132.imageshack.us\/img132\/7898\/profour2rq7.gif);}\u003Cbr \/\u003E.menu4 li.current a b {background:url(http:\/\/img132.imageshack.us\/img132\/7898\/profour2rq7.gif) no-repeat right top; color:#fff;}\u003Cbr \/\u003E.menu4 li a:hover {color:#fff; background: url(http:\/\/img361.imageshack.us\/img361\/9697\/profour1bu6.gif);}\u003Cbr \/\u003E.menu4 li a:hover b {background:url(http:\/\/img361.imageshack.us\/img361\/9697\/profour1bu6.gif) no-repeat right top; color:#fff;}\u003Cbr \/\u003E.menu4 li.current a:hover {color:#fff; background: url(\u003Cbr \/\u003Ehttp:\/\/img132.imageshack.us\/img132\/7898\/profour2rq7.gif); cursor:default;}\u003Cbr \/\u003E.menu4 li.current a:hover b {background:url(\u003Cbr \/\u003Ehttp:\/\/img132.imageshack.us\/img132\/7898\/profour2rq7.gif) no-repeat right top; color:#fff;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Ci\u003EEl código ya está armado con las imágenes necesarias incluidas, las he subido a ImageShak.\u003C\/i\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E El siguiente paso será colocar el código del menú en un nuevo elemento HTML y arrastrar el elemento a debajo del header, una vez añadidos nuestros enlaces:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;ul class=\u0026quot;menu4\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;URL_DEL_BLOG\u0026quot;\u0026gt;\u0026lt;b\u0026gt;Inicio\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;URL_PAG_DEL_PERFIL\u0026quot;\u0026gt;\u0026lt;b\u0026gt;Sobre mi\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;URL_DEL_FEED\u0026quot;\u0026gt;\u0026lt;b\u0026gt;Suscribe\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt; \u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;http:\/\/blogger.com\u0026quot;\u0026gt;\u0026lt;b\u0026gt;Blogger\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li class=\u0026quot;current\u0026quot;\u0026gt;\u0026lt;a href=\u0026quot;mailto:AQUI_DIRECCION_DE_CORREO\u0026quot;\u0026gt;\u0026lt;b\u0026gt;Contacto\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;URL_DEL_BLOG\u0026quot;\u0026gt;\u0026lt;b\u0026gt;Mi otro blog\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Ci\u003EHe armado los enlaces de ejemplo lo más claramente que he podido, no será demasiado difícil entender como sustituirlos por los vuestros\u003C\/i\u003E\u003C\/b\u003E \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003EA menudo al intentar arrastrar el elemento debajo de la cabecera, vemos que ahí no hay espacio para más elementos. Para solucionarlo tenemos que localizar esta línea en nuestra plantilla \u003Cb\u003Esin expandir artilugios\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EY modificar algunos valores para que se vea como esta:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:section class='header' id='header' maxwidgets='2' showaddelement='yes'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E¡Suerte \u003Cb\u003EPizca\u003C\/b\u003E!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/3138285845398240523\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/04\/cssplay-menu-numero-4.html#comment-form","title":"107 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3138285845398240523"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3138285845398240523"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/04\/cssplay-menu-numero-4.html","title":"CSSplay  (Menu numero 4)"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/SAIceE_J_pI\/AAAAAAAADZU\/_DsbSiZuZK0\/s72-c\/Menu4.jpg","height":"72","width":"72"},"thr$total":{"$t":"107"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-8239105026234615635"},"published":{"$t":"2008-04-07T23:27:00.004+02:00"},"updated":{"$t":"2009-10-04T14:46:22.263+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Plantillas"}],"title":{"type":"text","$t":"Menu con imagenes"},"content":{"type":"html","$t":"Revisando los menús de \u003Ca href=\"http:\/\/www.cssplay.co.uk\/menus\/pro_horizontal.html#nogo\"\u003E CssPlay\u003C\/a\u003E he visto este con imágenes que me ha gustado mucho.\u003Cbr \/\u003EPodéis ver como funciona en esa misma página, es el número \u003Cb\u003E15\u003C\/b\u003E.\u003Cdiv style=\"text-align:center;\"\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R_qRN5QwHEI\/AAAAAAAADXg\/jVty-0naxOI\/s1600-h\/Menu.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R_qRN5QwHEI\/AAAAAAAADXg\/jVty-0naxOI\/s400\/Menu.jpg\" border=\"0\" alt=\"Ejemplo del menu\"id=\"BLOGGER_PHOTO_ID_5186617588765957186\" \/\u003E\u003C\/a\u003E\u003Ci\u003E(Pincha en la imagen para verla a mayor tamaño)\u003C\/i\u003E\u003C\/div\u003E\u003Cbr \/\u003EHe armado el CSS necesario con las imágenes (están subidas en \u003Ca href=\"http:\/\/www.imageshack.us\/\"\u003E ImageShack\u003C\/a\u003E) para que solo tengáis que copiar y pegar el código y luego armar el menú con vuestros propios datos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Colocamos este código en el CSS de nuestra plantilla, siempre antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\/*Credits: CSSplay *\/\u003Cbr \/\u003E\/*URL: http:\/\/www.cssplay.co.uk\/menus\/pro_15 *\/\u003Cbr \/\u003E.preload15 \u003Cbr \/\u003E{background: url(http:\/\/img169.imageshack.us\/img169\/6923\/pro151ns5.gif);\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 {\u003Cbr \/\u003Epadding:0 0 0 20px;\u003Cbr \/\u003Emargin:0; \u003Cbr \/\u003Elist-style:none; \u003Cbr \/\u003Eheight:30px; \u003Cbr \/\u003Ebackground:#1841c8 url(http:\/\/img147.imageshack.us\/img147\/1695\/pro150ky7.gif);\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a {\u003Cbr \/\u003Edisplay:block;\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Eheight:30px;\u003Cbr \/\u003Eline-height:30px; background:url(http:\/\/img147.imageshack.us\/img147\/1695\/pro150ky7.gif); color:#ddd;\u003Cbr \/\u003Etext-decoration:none;\u003Cbr \/\u003Efont-family:arial, verdana, sans-serif;\u003Cbr \/\u003Etext-align:center;\u003Cbr \/\u003Epadding:0 0 0 10px;\u003Cbr \/\u003Ecursor:pointer; \u003Cbr \/\u003Efont-size:11px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a b {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Edisplay:block; background:url(http:\/\/img147.imageshack.us\/img147\/1695\/pro150ky7.gif) right top;\u003Cbr \/\u003Epadding:0 16px 0 8px;\u003Cbr \/\u003Ecolor:#ddd;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li.current a {\u003Cbr \/\u003Ecolor:#fff; \u003Cbr \/\u003Ebackground:url(http:\/\/img248.imageshack.us\/img248\/4412\/pro152xg1.gif);\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li.current a b {\u003Cbr \/\u003Ebackground:url(http:\/\/img248.imageshack.us\/img248\/4412\/pro152xg1.gif) no-repeat right top;\u003Cbr \/\u003Ecolor:#fff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a:hover {\u003Cbr \/\u003Ecolor:#fff; \u003Cbr \/\u003Ebackground: url(http:\/\/img169.imageshack.us\/img169\/6923\/pro151ns5.gif);\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a:hover b {background:url(http:\/\/img169.imageshack.us\/img169\/6923\/pro151ns5.gif) no-repeat right top; color:#fff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li.current a:hover {\u003Cbr \/\u003Ecolor:#fff;\u003Cbr \/\u003Ebackground: url(http:\/\/img248.imageshack.us\/img248\/4412\/pro152xg1.gif); \u003Cbr \/\u003Ecursor:default;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li.current a:hover b {\u003Cbr \/\u003Ebackground:url(http:\/\/img248.imageshack.us\/img248\/4412\/pro152xg1.gif) no-repeat right top;\u003Cbr \/\u003Ecolor:#fff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em {\u003Cbr \/\u003Edisplay:block;\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Ewidth:16px; height:30px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em.home {\u003Cbr \/\u003Ebackground:url(http:\/\/img147.imageshack.us\/img147\/3286\/home2yr5.gif) no-repeat center center;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em.calendar {\u003Cbr \/\u003Ebackground:url(http:\/\/img248.imageshack.us\/img248\/2245\/eventstw4.gif) no-repeat center center;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em.camera {\u003Cbr \/\u003Ebackground:url(http:\/\/img147.imageshack.us\/img147\/2013\/camerajc9.gif) no-repeat center center;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em.find {\u003Cbr \/\u003Ebackground:url(http:\/\/img147.imageshack.us\/img147\/3066\/findou5.gif) no-repeat center center;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em.contact {\u003Cbr \/\u003Ebackground:url(http:\/\/img248.imageshack.us\/img248\/7778\/contactqj3.gif) no-repeat center center;\u003Cbr \/\u003E}\u003Cbr \/\u003E.pro15 li a em.search {\u003Cbr \/\u003Ebackground:url(http:\/\/img248.imageshack.us\/img248\/5774\/searchnp0.gif) no-repeat center center;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Una vez guardados los cambios, en la parte de \"Diseño\" de nuestra plantilla, añadimos un nuevo elemento HTML y colocamos dentro el código para armar el menú, luego podemos arrastrarlo a debajo de la cabecera:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;ul class=\u0026quot;pro15\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;#\u0026quot;\u0026gt;\u0026lt;em class=\u0026quot;home\u0026quot;\u0026gt;\u0026lt;\/em\u0026gt;\u0026lt;b\u0026gt;Inicio\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li class=\u0026quot;current\u0026quot;\u0026gt;\u0026lt;a href=\u0026quot;#nogo\u0026quot;\u0026gt;\u0026lt;em class=\u0026quot;calendar\u0026quot;\u0026gt;\u0026lt;\/em\u0026gt;\u0026lt;b\u0026gt;Archivo\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;#\u0026quot;\u0026gt;\u0026lt;em class=\u0026quot;camera\u0026quot;\u0026gt;\u0026lt;\/em\u0026gt;\u0026lt;b\u0026gt;Imagenes\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;#\u0026quot;\u0026gt;\u0026lt;em class=\u0026quot;find\u0026quot;\u0026gt;\u0026lt;\/em\u0026gt;\u0026lt;b\u0026gt;Paginas amigas\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;#\u0026quot;\u0026gt;\u0026lt;em class=\u0026quot;contact\u0026quot;\u0026gt;\u0026lt;\/em\u0026gt;\u0026lt;b\u0026gt;Contacto\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;#\u0026quot;\u0026gt;\u0026lt;em class=\u0026quot;search\u0026quot;\u0026gt;\u0026lt;\/em\u0026gt;\u0026lt;b\u0026gt;Buscador\u0026lt;\/b\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EEn \u003Cb\u003E\u0026lt;a href=\"\u0026gt;\u003C\/b\u003E colocamos la url de nuestros enlaces, sustituyendo al \u003Cb\u003E#\u003C\/b\u003E.\u003Cbr \/\u003EPodemos cambiar las imágenes de las pestañas por unas propias, siempre que sean de \u003Cb\u003E16x16 pixeles\u003C\/b\u003E, no será difícil identificar cada imagen, ya que si nos fijamos en su url, vemos que por su nombre (aunque en inglés) es fácil saber cual es cual.\u003Cbr \/\u003ELo que \u003Cb\u003Eno deberíamos cambiar\u003C\/b\u003E es la clase, es decir, donde vemos \u003Cb\u003Eem class=\"home\"\u003C\/b\u003E, por ejemplo, ya que si lo hacemos el menú no funcionará.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EAVISO:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003EAlgunas imágenes han sido borradas de ImageShack y el menú se verá imcompleto, podéis \u003Ca href=\"http:\/\/sites.google.com\/site\/elescaparatederosa\/blog\/pro_15.zip\"\u003Edescargar aqui el pack con las imágenes\u003C\/a\u003E y subirlas a vuestro propio alojamiento para evitar este tipo de problemas.\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/8239105026234615635\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/04\/menu-con-imagenes.html#comment-form","title":"82 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8239105026234615635"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8239105026234615635"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/04\/menu-con-imagenes.html","title":"Menu con imagenes"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R_qRN5QwHEI\/AAAAAAAADXg\/jVty-0naxOI\/s72-c\/Menu.jpg","height":"72","width":"72"},"thr$total":{"$t":"82"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-8196098869501684087"},"published":{"$t":"2008-03-29T01:57:00.000+01:00"},"updated":{"$t":"2008-12-09T01:29:13.826+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Plantillas"}],"title":{"type":"text","$t":"Simple menu con CSS"},"content":{"type":"html","$t":"Un sencillo menú construido mediante CSS y usando solo una imagen. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R-2SmJQwGjI\/AAAAAAAADRM\/gfNePrmpa6A\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R-2SmJQwGjI\/AAAAAAAADRM\/gfNePrmpa6A\/s400\/Nombre.jpg\" border=\"0\" alt=\"Ejemplo de menu\"id=\"BLOGGER_PHOTO_ID_5182959930192173618\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Colocamos las líneas de CSS dentro de nuestra plantilla antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E#nav-menu ul\u003Cbr \/\u003E{\u003Cbr \/\u003Elist-style: none;\u003Cbr \/\u003Epadding: 0;\u003Cbr \/\u003Emargin: 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#nav-menu li\u003Cbr \/\u003E{\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Emargin: 0 0.15em;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#nav-menu li a\u003Cbr \/\u003E{\u003Cbr \/\u003Ebackground: url(http:\/\/img410.imageshack.us\/img410\/9401\/cssnavbm2.gif) #fff bottom left repeat-x;\u003Cbr \/\u003Eheight: 2em;\u003Cbr \/\u003Eline-height: 2em;\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Ewidth: 6em;\u003Cbr \/\u003Edisplay: block;\u003Cbr \/\u003Eborder: 0.1em solid #dcdce9;\u003Cbr \/\u003Ecolor: #0d2474;\u003Cbr \/\u003Etext-decoration: none;\u003Cbr \/\u003Etext-align: center;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\/* Hide from IE5-Mac \\*\/\u003Cbr \/\u003E#nav-menu li a\u003Cbr \/\u003E{\u003Cbr \/\u003Efloat: none\u003Cbr \/\u003E}\u003Cbr \/\u003E\/* End hide *\/\u003Cbr \/\u003E\u003Cbr \/\u003E#nav-menu\u003Cbr \/\u003E{\u003Cbr \/\u003Ewidth:30em\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Añadimos el código necesario para construir los enlaces del menú en un elemento HTML de la plantilla y lo arrastramos sobre las entradas o debajo de la cabecera:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\u0026quot;nav-menu\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;http:\/\/elescaparatederosa.blogspot.com\u0026quot;\u0026gt;Inicio\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;mailto:lejaniaimposible@hotmail.com\u0026quot;\u0026gt;Contacto\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;http:\/\/blogger.com\u0026quot;\u0026gt;Blogger\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E En este último código es donde tenéis que colocar vuestros propios datos para construir los enlaces.\u003Cbr \/\u003EEn el ejemplo hay solo tres botones, pero pueden añadirse más, duplicando las líneas del código y añadiendo los datos del enlace:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;li\u0026gt;\u0026lt;a href=\"Url_del_enlace\"\u0026gt;Enlace\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003C\/blockquote\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/8196098869501684087\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/03\/simple-menu-con-css.html#comment-form","title":"54 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8196098869501684087"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8196098869501684087"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/03\/simple-menu-con-css.html","title":"Simple menu con CSS"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R-2SmJQwGjI\/AAAAAAAADRM\/gfNePrmpa6A\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"54"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4055926895500272635"},"published":{"$t":"2008-02-10T02:39:00.000+01:00"},"updated":{"$t":"2010-02-10T14:16:59.093+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Añadir un menú-bar al blog"},"content":{"type":"html","$t":"Es un hack de \u003Ca href=\"http:\/\/beautifulbeta.blogspot.com\/2006\/10\/adding-menubar-to-your-blog.html\"target=\"_blank\"\u003E Beautiful Beta\u003C\/a\u003E, muy fácil de implementar en el blog. \u003Cbr \/\u003EEn solo dos pasos, tendremos una barra para menú sobre la cabecera del blog.\u003Cbr \/\u003EPensad que estas explicaciones son para la plantilla Mínima de Blogger, si estáis usando otra, pudiera ser o no, que la colocación de los códigos fuese distinta...\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/Rk-ThnOygRI\/AAAAAAAABX4\/MpyUr68X2jw\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/Rk-ThnOygRI\/AAAAAAAABX4\/MpyUr68X2jw\/s320\/Nombre.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5066430311491076370\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Vamos al html de nuestra plantilla y buscamos esto:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='header-wrapper'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EJusto a continuación añadimos este código:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:section\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEn el ejemplo se supone que ya tienes un elemento \"Lista\" añadido, de ahí el id='LinkList2', si se da el caso de que ya tenemos varios elemento \"Lista\" añadidos hemos de saber \"cual toca\" para cambiar su id. Para no complicarnos demasiado, lo mejor es poner en el id un número elevado:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:widget id='LinkList50' locked='true' title='Menubar' type='LinkList'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:section\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E En el CSS de la plantilla añadimos el código para nuestro menubar, si tenemos alguna duda de donde situar el código, lo ponemos antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\u003Cbr \/\u003E#menubar h2 {display:none;}\u003Cbr \/\u003E\u003Cbr \/\u003E#menubar ul {\u003Cbr \/\u003Elist-style: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#menubar li {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#menubar a:link, #menubar a:visited, #menubar a:hover {\u003Cbr \/\u003Epadding: 5px;\u003Cbr \/\u003Edisplay: block;\u003Cbr \/\u003Ecolor: #003399;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#menubar a:hover {\u003Cbr \/\u003Ebackground-color: #CC3300;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ECambiamos los colores de los links a nuestro gusto.\u003Cbr \/\u003EVamos a plantilla y veremos el nuevo elemento menubar sobre la cabecera, pinchamos en editar y vamos completando los campos como cuando añadimos un nuevo elemento \"lista\".\u003Cbr \/\u003E\u003Cbr \/\u003EPodéis ver como queda en \u003Ca href=\"http:\/\/beautifulbeta.blogspot.com\"\u003E Beautiful Beta\u003C\/a\u003E, ellos lo tienen sobre la cabecera, pero si lo queremos justo debajo de nuestra cabecera (también queda muy bien), ponemos el primer código justo después de esto :  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='header-wrapper'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:widget id='Header1' locked='true' title='nbgeyhtuytk (cabecera)' type='Header'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:section\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E¡Gracias por tus aportes \u003Ca href=\"http:\/\/laeulalia-blogdeprobes.blogspot.com\/\"\u003E Eulalia\u003C\/a\u003E!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4055926895500272635\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/02\/aadir-un-men-bar-al-blog.html#comment-form","title":"67 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4055926895500272635"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4055926895500272635"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/02\/aadir-un-men-bar-al-blog.html","title":"Añadir un menú-bar al blog"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/Rk-ThnOygRI\/AAAAAAAABX4\/MpyUr68X2jw\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"67"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-8178852111542495095"},"published":{"$t":"2008-01-23T23:57:00.002+01:00"},"updated":{"$t":"2009-05-01T17:01:10.198+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Utilidades Online"}],"title":{"type":"text","$t":"Menus y cabeceras en flash a la carta"},"content":{"type":"html","$t":"Mi amiga \u003Ca href=\"http:\/\/didita.iespana.es\/principal.htm\"\u003E DyDy\u003C\/a\u003E me envía una interesante propuesta para compartir con todos vosotros.\u003Cbr \/\u003E\u003Cbr \/\u003E¿Quieres una cabecera o un menú hecho en flash para tu blog? \u003Cbr \/\u003EDyDy te lo hace \"a la carta\" con las medidas, estilos, los links ya incluidos...o sea, prácticamente te lo proporciona todo hecho.\u003Cbr \/\u003EUna vez terminado su trabajo, tan solo hay que utilizar un código para colocar el menú o el header en el blog:\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003E\u003Cbr \/\u003E\u0026lt;embed src=\" URL DE TU FLASH  \" width=\" ANCHO \" height=\" ALTO \" type=\"application\/x-shockwave-flash\" play=\"true\" loop=\"true\" menu=\"true\"\u0026gt;\u0026lt;\/embed\u0026gt;\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003ELo he probado personalmente y funciona tanto en un elemento como añadiéndolo directamente en la plantilla, además funciona sin problemas en IExplorer y Firefox.\u003Cbr \/\u003EEn el caso de los menús, bastaría con añadir el código en un elemento HtmlJavascript y arrastrarlo luego debajo de nuestro header, por ejemplo.\u003Cbr \/\u003EEn el caso de la cabecera, tendríamos que incluir el código directamente en la plantilla y lo hariamos añadiendo el código para el flash, justo antes de \u003Cb\u003E\u0026lt;div id='header-wrapper'\u0026gt;\u003C\/b\u003E, de esta manera:\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003E\u003Cbr \/\u003E\u0026lt;div id='header'\u0026gt;\u003Cbr \/\u003E\u0026lt;embed src=\" URL DE TU FLASH  \" width=\" ANCHO \" height=\" ALTO \" type=\"application\/x-shockwave-flash\" play=\"true\" loop=\"true\" menu=\"true\"\u0026gt;\u0026lt;\/embed\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003ESi algún problema surgiera con el tema de la colocación en vuestro blog del código flash, estaré encantada de intentar ayudaros.\u003Cbr \/\u003EEn cuanto a lo demás, tan solo tenéis que contactar con DyDy, ella tiene un foro en su web, donde podéis solicitar su ayuda o consultarle cualquier duda. Y lo mejor de todo esto, es que es gratis, DyDy lo hace porque le gusta y simplemente desea ayudar a los demás.\u003Cbr \/\u003E\u003Cbr \/\u003EPara ampliar esta información, visita a DyDy en \u003Ca href=\"http:\/\/didita.iespana.es\/\"target=\"_blank\"\u003E Flashmania\u003C\/a\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/8178852111542495095\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/01\/menus-y-cabeceras-en-flash-la-carta.html#comment-form","title":"57 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8178852111542495095"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8178852111542495095"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2008\/01\/menus-y-cabeceras-en-flash-la-carta.html","title":"Menus y cabeceras en flash a la carta"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"57"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-2403280986475906407"},"published":{"$t":"2008-01-03T02:28:00.001+01:00"},"updated":{"$t":"2010-02-10T14:16:59.101+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Etiquetas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Etiquetas en forma de menú desplegable"},"content":{"type":"html","$t":"Cuando añadimos un nuevo elemento de \"Archivos\" a nuestra sidebar, Blogger nos da tres opciones distintas para mostrarlo, una de ellas es en forma de \"Menú desplegable\".\u003Cbr \/\u003EEs opción no está disponible cuando el elemento que añadimos es el de \"Etiquetas\".\u003Cbr \/\u003ESi hemos escogido esa opción para mostrar los Archivos del blog, estaría bien poder hacer lo mismo con las Etiquetas, quedaría bastante bien estéticamente, creo yo...\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Añadimos el elemento \"Etiquetas\" a nuestro blog (si no lo hemos añadido antes)\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Vamos a la parte del HTML de nuestra plantilla y \u003Cb\u003Esin expandir artilugios\u003C\/b\u003E buscamos esta línea de código:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='Label1' locked='false' title='Labels' type='Label'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003ETendremos en cuenta que si le hemos puesto algún título a nuestro elemento de Etiquetas, se verá en esa línea \u003Cb\u003Etitle=\u003C\/b\u003E\u003Cbr \/\u003ELo mismo que si, por ejemplo, tenemos mas de un elemento de Etiquetas añadido, entonces cambiará el \u003Cb\u003Eid=\u003C\/b\u003E por id=2, id=3...\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Una vez localizado el elemento correcto, cambiamos esa línea de código por esto:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='Label1' locked='false' title='Labels' type='Label'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:title'\u0026gt;\u003Cbr \/\u003E\u0026lt;h2\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;select onchange='location=this.options[this.selectedIndex].value;'\u0026gt;\u003Cbr \/\u003E\u0026lt;option\u0026gt;Etiquetas del Escaparate\u0026lt;\/option\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;option expr:value='data:label.url'\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u003Cbr \/\u003E(\u0026lt;data:label.count\/\u0026gt;)\u003Cbr \/\u003E\u0026lt;\/option\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/select\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;b:include name='quickedit'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Cambiamos en el código donde dice \u003Cb\u003EEtiquetas del Escaparate\u003C\/b\u003E por lo que vamos a mostrar en el menú cuando está \"recogido\".\u003Cbr \/\u003EUsamos la vista previa y si ha ido todo bien, guardamos cambios.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EAsí se verá\u003C\/b\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R0wckLltUqI\/AAAAAAAACsU\/BV5d_Hs1GFQ\/s1600-h\/etiquetas.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R0wckLltUqI\/AAAAAAAACsU\/BV5d_Hs1GFQ\/s320\/etiquetas.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5137512682834711202\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENota\u003C\/b\u003E\u003Cbr \/\u003EEste widget funcionará igual que el de \"archivos\" de Blogger, es decir, automáticamente se añadirá al menú cada nueva etiqueta que coloquemos en las entradas."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/2403280986475906407\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/01\/etiquetas-en-forma-de-men-desplegable.html#comment-form","title":"117 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2403280986475906407"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2403280986475906407"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/01\/etiquetas-en-forma-de-men-desplegable.html","title":"Etiquetas en forma de menú desplegable"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/R0wckLltUqI\/AAAAAAAACsU\/BV5d_Hs1GFQ\/s72-c\/etiquetas.jpg","height":"72","width":"72"},"thr$total":{"$t":"117"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4671495952843394356"},"published":{"$t":"2007-12-11T13:29:00.000+01:00"},"updated":{"$t":"2008-12-09T01:29:27.483+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Texto"}],"title":{"type":"text","$t":"Menu desplegable con opciones"},"content":{"type":"html","$t":"Ya había mostrado antes como hacer un \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/06\/link-o-men-en-expandible.html\"\u003E sencillo menú desplegable\u003C\/a\u003E para nuestro blog.\u003Cbr \/\u003EEl problema que surgía con este menú era que no ofrecía la posibilidad de abrir los links en una ventana aparte. Con este nuevo menú desplegable tendremos la posibilidad de dar a nuestras visitas la opción de abrir el link en una nueva ventana o no:\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/R159n9gjFgI\/AAAAAAAACv8\/dJ-BRyoUXhQ\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/R159n9gjFgI\/AAAAAAAACv8\/dJ-BRyoUXhQ\/s320\/Nombre.jpg\" border=\"0\" alt=\"Ejemplo menu\"id=\"BLOGGER_PHOTO_ID_5142685949983135234\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003EEl sistema para obtener el menú es fácil, hemos de copiar un sencillo script y el código para colocar los links todo junto en un nuevo elemento HTML-Javascript, en el caso de la plantilla clásica, lo aplicaremos directamente en la plantilla en la zona de la sidebar.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cu\u003ECódigo del menú\u003C\/u\u003E\u003C\/b\u003E\u003Cbr \/\u003E  \u003Cspan class=\"highlight\"\u003E\u0026lt;script language=\"javascript\"\u0026gt;\u003Cbr \/\u003Efunction ir(){\u003Cbr \/\u003Evar thebox=document.menu\u003Cbr \/\u003Eif (thebox.windowoption.checked){\u003Cbr \/\u003Eif (!window.newwindow)\u003Cbr \/\u003Enewwindow=window.open(\"\")\u003Cbr \/\u003Enewwindow.location=\u003Cbr \/\u003Ethebox.example.options[thebox.example.selectedIndex].value\u003Cbr \/\u003E}\u003Cbr \/\u003Eelse\u003Cbr \/\u003Elocation=\u003Cbr \/\u003Ethebox.example.options[thebox.example.selectedIndex].value\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;form name=\"menu\"\u0026gt;\u003Cbr \/\u003E\u0026lt;select name=\"example\" size=\"1\"\u0026gt;\u003Cbr \/\u003E\u0026lt;option selected\/\u0026gt;Webs de interes\u003Cbr \/\u003E\u0026lt;option value=\"http:\/\/www.google.es\/\"\/\u0026gt;Google\u003Cbr \/\u003E\u0026lt;option value=\"www.blogger.com\"\/\u0026gt;Blogger\u003Cbr \/\u003E\u0026lt;option value=\"http:\/\/www.imageshack.us\"\/\u0026gt;ImagesShack\u003Cbr \/\u003E\u0026lt;option value=\"http:\/\/chuano.net\/chuano\/util\/convsimbolos.php\"\/\u0026gt;Convertidor Chuano\u003Cbr \/\u003E\u0026lt;option value=\"http:\/\/www.webtaller.com\/utilidades\/csscoder\/colores.php\"\/\u0026gt;Tabla de colores\u003Cbr \/\u003E\u0026lt;option value=\"http:\/\/pages.google.com\/\"\/\u0026gt;Google Pages\u003Cbr \/\u003E\u0026lt;\/select\u0026gt;\u003Cbr \/\u003E \u0026lt;input value=\"OK\" onclick=\"ir()\" type=\"button\"\/\u0026gt; \u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;input value=\"ON\" name=\"windowoption\" type=\"checkbox\"\/\u0026gt;\u003Cbr \/\u003EAbrir en una nueva ventana\u003Cbr \/\u003E\u0026lt;\/form\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E* En \u003Cb\u003E\u0026lt;option selected\/\u0026gt;\u003C\/b\u003E, es donde pondremos el título que se verá cuando los links no están expandidos.\u003Cbr \/\u003E* Si queremos añadir más links, copiamos una de las líneas y la añadimos antes de \u003Cb\u003E\u0026lt;\/select\u0026gt;\u003C\/b\u003E y así podemos añadir los que necesitemos.\u003Cbr \/\u003E* Podemos colocar en el menú la url de cualquiera de nuestras entradas o etiquetas."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4671495952843394356\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/12\/menu-desplegable-con-opciones.html#comment-form","title":"61 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4671495952843394356"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4671495952843394356"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/12\/menu-desplegable-con-opciones.html","title":"Menu desplegable con opciones"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/R159n9gjFgI\/AAAAAAAACv8\/dJ-BRyoUXhQ\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"61"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4773368755033536396"},"published":{"$t":"2007-11-19T02:19:00.002+01:00"},"updated":{"$t":"2009-05-05T00:41:06.787+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutoriales"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Utilidades Online"}],"title":{"type":"text","$t":"Construir un menú con CSS Menú Maker"},"content":{"type":"html","$t":"En el blog Cabalas Virtuales me encontré con esta entrada donde \u003Cb\u003EYolanda\u003C\/b\u003E nos presenta un magnifico tutorial que seguro nos ayudará a crear un menú para nuestro blog sin complicarnos mucho la vida. Yo misma hice uno sin problemas en un blog de pruebas siguiendo las instrucciones de Yoli.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Accedemos a la web de \u003Ca href=\"http:\/\/www.cssmenumaker.com\/index.php\"\u003E CSS Menú Maker\u003C\/a\u003E y escogemos el menú que vamos a colocar en el blog.\u003Cbr \/\u003EPor ejemplo este y pinchamos en \u003Cb\u003E\"Customize\"\u003C\/b\u003E:\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuBTuWAvBI\/AAAAAAAACk0\/HMWtZN9491E\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuBTuWAvBI\/AAAAAAAACk0\/HMWtZN9491E\/s320\/Nombre.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5132838376176663570\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Se abrirá una nueva pantalla donde veremos un ejemplo del menú elegido y justo debajo, ponemos el número de enlaces que tendrá nuestro menú y pinchamos en \u003Cb\u003E\"Submit\"\u003C\/b\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuCCNIxMUI\/AAAAAAAACk8\/Vt-8XO5rsb0\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuCCNIxMUI\/AAAAAAAACk8\/Vt-8XO5rsb0\/s320\/Nombre.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5132839174716600642\" \/\u003E\u003C\/a\u003E \u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Ahora tendremos que ingresar el Título para cada enlace y du dirección (url).\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuDatIxMVI\/AAAAAAAAClE\/CVZmhDyDexc\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuDatIxMVI\/AAAAAAAAClE\/CVZmhDyDexc\/s320\/Nombre.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5132840695135023442\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Para comprobar como quedará nuestro menú, pinchamos en \u003Cb\u003E\"Update your Menu\"\u003C\/b\u003E y podremos ver el menú con nuestros enlaces allí mismo y además en funcionamiento real:\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuEbtIxMWI\/AAAAAAAAClM\/o8Phi2NzocQ\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuEbtIxMWI\/AAAAAAAAClM\/o8Phi2NzocQ\/s320\/Nombre.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5132841811826520418\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[5]\u003C\/b\u003E Una vez visto el menú en funcionamiento, si decidimos usarlo, pinchamos en \u003Cb\u003E\"Generate Menu Code\"\u003C\/b\u003E. Nos darán entonces dos opciones:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Ea)\u003C\/b\u003EUsando la primera opción tendremos la posibilidad de descargarnos todo lo necesario para construir nuestro menú (html, css, imagenes e instrucciones de instalación) en un archivo zip.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Eb)\u003C\/b\u003E Usando la segunda opción tenemos que copiar los códigos generados y pegarlos en nuestra plantilla:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ECSS Code\u003C\/b\u003E Es el código CSS de nuestro menú y hemos de pegarlo en nuestra plantilla justo encima de ]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EHTML Code\u003C\/b\u003E Este es el código que tenemos que colocar en un elemento html de la plantilla y que luego moveremos debajo de la cabecera en el caso de que hayamos escogido un menú horizontal como el de mi ejemplo.\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;ul id='menu'\u0026gt;\u003Cbr \/\u003E\u0026lt;li \u0026gt;\u0026lt;a href='http:\/\/http:\/\/elescaparatederosa.blogspot.com'\u0026gt;El Escaparate\u0026lt;\/a\u0026gt;\u0026lt;\/li \u0026gt;\u003Cbr \/\u003E\u0026lt;li \u0026gt;\u0026lt;a href='http:\/\/http:\/\/cabalasvirtuales.blogspot.com'\u0026gt;Cabalas Virtuales\u0026lt;\/a\u0026gt;\u0026lt;\/li \u0026gt;\u003Cbr \/\u003E\u0026lt;li \u0026gt;\u0026lt;a href='http:\/\/http:\/\/eternamentecabreada.blogspot.com'\u0026gt;Eternamente Cabreada\u0026lt;\/a\u0026gt;\u0026lt;\/li \u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[6]\u003C\/b\u003E Completados estos pasos descargamos el archivo con las imagenes del menú pinchando en \u003Cb\u003E\"Click here to download Image files\"\u003C\/b\u003E Es una archivo en formato zip. que hemos de descomprimir para obtener las imagenes.\u003Cbr \/\u003ESubiremos las imágenes a un alojamiento gratuito o al mismo Blogger y pondremos la dirección de las imagenes en el código CSS del menú, es decir, el primer código que colocamos antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E donde dice \u003Cbr \/\u003E\u003Cblockquote\u003Ebackground:transparent url(\"URL_DE_LA_IMAGEN\") repeat-x top left;\u003C\/blockquote\u003E\u003Cbr \/\u003EEn el caso del menú de este ejemplo, serán tres imágenes que no serán difíciles de colocar guiándonos por su nombre.\u003Cbr \/\u003E\u003Cbr \/\u003EEnlace: \u003Ca href=\"http:\/\/www.cssmenumaker.com\/\"\u003ECSS Menú Maker\u003C\/a\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4773368755033536396\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/11\/construir-un-men-con-css-men-maker.html#comment-form","title":"71 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4773368755033536396"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4773368755033536396"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/11\/construir-un-men-con-css-men-maker.html","title":"Construir un menú con CSS Menú Maker"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzuBTuWAvBI\/AAAAAAAACk0\/HMWtZN9491E\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"71"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-9005058756315730190"},"published":{"$t":"2007-11-12T16:17:00.000+01:00"},"updated":{"$t":"2008-12-09T01:29:32.565+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Datos utiles"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Utilidades Online"}],"title":{"type":"text","$t":"Menu Drop-down online"},"content":{"type":"html","$t":"Gracias a \u003Ca href=\"http:\/\/www.anniyalogam.com\/widgets\/dropdown.html\"\u003E Hackosphere\u003C\/a\u003E tendremos en minutos un sencillo menú drop-down.\u003Cbr \/\u003ELo mejor de este sencillo menú, es que tiene la función de abrir los links en página externa.\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzhynZE9uLI\/AAAAAAAACjw\/Fs0wANkFE0U\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzhynZE9uLI\/AAAAAAAACjw\/Fs0wANkFE0U\/s400\/Nombre.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5131977796460853426\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Ingresamos a la página y en la primera casilla \u003Cb\u003E\"Default text (such as \"Select a blog\")\"\u003C\/b\u003E colocamos lo que queremos mostrar cuando el menú está cerrado, por ejemplo, \"favoritos\" \"blogs amigos\" o algo así.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E En \u003Cb\u003EOption Name\u003C\/b\u003E colocamos el nombre que se verá como link. En \u003Cb\u003EOption Link\u003C\/b\u003E colocamos la dirección a donde llevará el link.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Pinchamos en \u003Cb\u003EAdd opción\u003C\/b\u003E (añadir opción)\u003Cbr \/\u003E\u003Cbr \/\u003EHemos de repetir estos pasos para conseguir tantos link como queremos colocar en el menú.\u003Cbr \/\u003ECuando terminamos de construir nuestro menú, pinchamos en \u003Cb\u003EAdd this menu to my blog\"\u003C\/b\u003E escogemos el blog en el que vamos a colocar nuestro menú y este se añadirá de forma automática, ya solo hemos de arrastrarlo a donde nos convenga."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/9005058756315730190\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/11\/menu-drop-down-online.html#comment-form","title":"4 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/9005058756315730190"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/9005058756315730190"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/11\/menu-drop-down-online.html","title":"Menu Drop-down online"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/RzhynZE9uLI\/AAAAAAAACjw\/Fs0wANkFE0U\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-7199674927197922377"},"published":{"$t":"2007-09-22T03:28:00.002+02:00"},"updated":{"$t":"2009-04-29T17:34:15.498+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos imagenes"}],"title":{"type":"text","$t":"Menú flotante del Escaparate"},"content":{"type":"html","$t":"Con poco trabajo podemos conseguir un menú flotante a la izquierda o ala dercha de nuestro blog, que \u003Cb\u003Ese mantiene fijo en la pantalla\u003C\/b\u003E mientras subimos y bajamos la página.\u003Cbr \/\u003E\u003Cbr \/\u003EPodéis ver un ejemplo en \u003Ca href=\"http:\/\/menusenprueba.blogspot.com\/\"target=\"_blank\"\u003Eeste blog de pruebas\u003C\/a\u003E a la derecha del cuerpo del blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E En primer lugar añadimos en el CSS de nuestra plantilla el código necesario para controlar el menú, y que se muestre con los efectos que queremos. Puede colocarse donde mejor nos parezca,pero como siempre os digo, ante la duda, lo pegamos justo encima de: \u003Cb\u003E]]\u003E\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cblockquote\u003E\/* Scroll MenuIcon\u003Cbr \/\u003E---------------------------------------------\u003Cbr \/\u003E*\/\u003Cbr \/\u003E#MenuIcon{\u003Cbr \/\u003Eposition:fixed;\u003Cbr \/\u003Etext-align:left;\u003Cbr \/\u003E\/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: *\/\u003Cbr \/\u003Emargin-top:0px;\u003Cbr \/\u003Emargin-left:-35px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E* html #MenuIcon{ \/*IE only*\/\u003Cbr \/\u003Eposition:absolute;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#MenuIcon a img{\u003Cbr \/\u003Eopacity:1;\u003Cbr \/\u003E-moz-opacity:1;\u003Cbr \/\u003Efilter:alpha(Opacity=100);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#MenuIcon a:hover img{\u003Cbr \/\u003Eopacity:0.8;\u003Cbr \/\u003E-moz-opacity:0.8;\u003Cbr \/\u003Efilter:alpha(Opacity=80);\u003Cbr \/\u003Eposition:relative;top:0px;left:2px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E* html #MenuIcon a img{\u003Cbr \/\u003Efilter:alpha(Opacity=100);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#MenuIcon img{\u003Cbr \/\u003Emargin-bottom: -3px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E* html .MenuIcon{\u003Cbr \/\u003Emargin-bottom: -3px;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EGuardamos cambios.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Una vez añadido el CSS vamos a la parte de editar de nuestra plantilla y añadimos un nuevo elemento HTML-Javascript, donde pegamos el código para el menú y lo arrastramos después sobre las entradas o debajo de la cabecera:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id=\u0026quot;MenuIcon\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;span\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;http:\/\/elescaparatederosa.blogspot.com\u0026quot; rel=\u0026quot;external\u0026quot; title=\u0026quot;VOLVER AL INICIO\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Home\u0026quot; src=\u0026quot;http:\/\/img114.imageshack.us\/img114\/5226\/homeuo9.jpg\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;http:\/\/www.blogger.com\/profile\/06743611108067453905\u0026quot; rel=\u0026quot;external\u0026quot; title=\u0026quot;SOBRE MI\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Home\u0026quot; src=\u0026quot;http:\/\/img114.imageshack.us\/img114\/2736\/yonh9.png\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;mailto:lejaniaimposible@hotmail.com\u0026quot; title=\u0026quot;CONTACTAME\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Contactar al Autor\u0026quot; src=\u0026quot;http:\/\/img114.imageshack.us\/img114\/118\/mailforwardgr2.png\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;http:\/\/feeds.feedburner.com\/blogspot\/hnBy\u0026quot; title=\u0026quot;SUSCRIBIR A EL ESCAPARATE\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Subscribe a El Escaparate\u0026quot; src=\u0026quot;http:\/\/img69.imageshack.us\/img69\/29\/iconosrssea0.jpg\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;http:\/\/elescaparatederosa.blogspot.com\/2007\/01\/ranking-de-comentarios-en-el-escaparate.\u003Cbr \/\u003Ehtml\u0026quot; title=\u0026quot;RANKING DE COMENTARIOS\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Comentarios del Escaparate\u0026quot; src=\u0026quot;\u003Cbr \/\u003Ehttp:\/\/img114.imageshack.us\/img114\/9202\/yellowgelfh3.gif\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;http:\/\/elescaparatederosa.blogspot.com\/search\/label\/?max-results=999\u0026quot; title=\u0026quot;VER TODOS LOS POST DEL ESCAPARATE\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Entradas del Escaparate\u0026quot; src=\u0026quot;http:\/\/img503.imageshack.us\/img503\/3457\/eye1yl9.png\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;http:\/\/elescaparatederosa.blogspot.com\/2007\/09\/me-han-nominado.html\u0026quot; title=\u0026quot;GALARDONES AL ESCAPARATE\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot;Premios del Escaparate\u0026quot; src=\u0026quot;http:\/\/img210.imageshack.us\/img210\/296\/ganadorescomercialrn5ui0.gif\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a style=\u0026quot;border:0;\u0026quot; href=\u0026quot;# \u0026quot; title=\u0026quot;IR ARRIBA\u0026quot;\u0026gt;\u0026lt;img alt=\u0026quot; ir arriba\u0026quot; src=\u0026quot;http:\/\/img69.imageshack.us\/img69\/1295\/flecha12zi1.jpg\u0026quot; class=\u0026quot;MenuIcon\u0026quot;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003ENotas:\u003C\/b\u003E\u003Cbr \/\u003EHe puesto el código tal cual está el del Escaparate, fijaros bien donde tenéis que colocar vuestros propios datos. ¡Es fácil!\u003Cbr \/\u003E\u003Cbr \/\u003ELo que está escrito con letras mayúsculas, es el texto que se leerá cuando pasemos el ratón sobre cada uno de los iconos.\u003Cbr \/\u003E\u003Cbr \/\u003EPodéis usar mis iconos si queréis y si vais a usar otros procurad que todos tengan el mismo tamaño.\u003Cbr \/\u003E\u003Cbr \/\u003EDonde se lee esta frase en el código:\u003Cb\u003E \/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: *\/\u003C\/b\u003E cambiáis los valores si el menú queda muy arriba o muy abajo. Tal cual está son los valores para ver el menú a la izquierda del blog y el gadget con el código lo he puesto debajo de la cabecera, pero en cada caso el resultado será distinto, dependiendo del tamaño del \"cuerpo\" del blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EUsad la vista previa para evitar sorpresas.\u003C\/b\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/7199674927197922377\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/09\/men-flotante-del-escaparate.html#comment-form","title":"78 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7199674927197922377"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7199674927197922377"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/09\/men-flotante-del-escaparate.html","title":"Menú flotante del Escaparate"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"78"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-5299107055462091664"},"published":{"$t":"2007-06-09T01:24:00.001+02:00"},"updated":{"$t":"2010-02-10T14:16:59.131+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Texto"}],"title":{"type":"text","$t":"Link o menú en expandible"},"content":{"type":"html","$t":"Me pregunta \u003Ca href=\"http:\/\/alaufssssss.blogspot.com\/\"\u003E alida\u003C\/a\u003E como podría hacer una cajita para poner los links como las que \u003Cstrike\u003Eyo tengo\u003C\/strike\u003E tenia en mi sidebar, en \"recomendados\" y \"blogs de ayuda\":\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cselect onchange=\"if(options[selectedIndex].value){location = options[selectedIndex].value}\" class=\"combox\" name=\"SiteMap\" size=\"1\"\u003E\u003Cbr \/\u003E\u003Coption selected\/\u003ETITULO\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003C\/select\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EPues bien, se trata de colocar un sencillo código en un elemento html-javascript en nuestra plantilla. El código es el siguiente:\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;select onchange=\u0026quot;if(options[selectedIndex].value){location = options[selectedIndex].value}\u0026quot; class=\u0026quot;combobox\u0026quot; name=\u0026quot;SiteMap\u0026quot; size=\u0026quot;1\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;option selected\/\u0026gt;TITULO \u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;option value=\u0026quot;URL DE LA PAGINA\u0026quot;\/\u0026gt;TITULO DE LA PAGINA\u003Cbr \/\u003E\u0026lt;\/select\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003EEn opción selected, es donde pondremos el título que se verá cuando los links no están expandidos.\u003Cbr \/\u003ESi queremos añadir más links, copiamos una de las líneas y la añadimos antes de \u0026lt;\/select\u0026gt; y así podemos añadir los que necesitemos.\u003Cbr \/\u003EEl mismo sistema es uno de los que ofrece Blogger para mostrar los archivos del blog en forma de \"menú despegable\".\u003Cbr \/\u003EPuede usarse fácilmente como menú expandible del blog, colocando en el código la url de nuestras páginas de etiquetas.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-weight:bold;\"\u003E*\u003C\/span\u003E Puedes añadirlo con un \"click\" a tu blog y una vez instalado, personalizarlo facilmente:\u003Cbr \/\u003E\u003Cform action=\"http:\/\/beta.blogger.com\/add-widget\" method=\"POST\"\u003E\u003Cinput value=\"TITULO\" name=\"widget.title\" type=\"hidden\"\/\u003E\u003Ctextarea style=\"display:none;\" name=\"widget.content\"\u003E\u003Cselect onchange=\"if(options[selectedIndex].value){location = options[selectedIndex].value}\" class=\"combobox\" name=\"SiteMap\" size=\"1\"\u003E\u003Cbr \/\u003E\u003Coption selected\/\u003ETITULO\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003Coption value=\"URL DE LA PAGINA\"\/\u003ETITULO DE LA PAGINA\u003Cbr \/\u003E\u003C\/select\u003E \u003C\/textarea\u003E\u003Cinput value=\"http:\/\/buzz.blogger.com\" name=\"infoUrl\" type=\"hidden\"\/\u003E\u003Cinput value=\"http:\/\/www.blogger.com\/img\/icon_logo32.gif\" name=\"logoUrl\" type=\"hidden\"\/\u003E\u003Cinput value=\"MENU EXPANDIBLE\" name=\"go\" type=\"submit\"\/\u003E\u003C\/form\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/5299107055462091664\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/06\/link-o-men-en-expandible.html#comment-form","title":"30 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5299107055462091664"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5299107055462091664"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/06\/link-o-men-en-expandible.html","title":"Link o menú en expandible"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"30"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4442508939848542915"},"published":{"$t":"2007-05-01T03:43:00.000+02:00"},"updated":{"$t":"2008-04-08T12:30:39.262+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Utilidades Online"}],"title":{"type":"text","$t":"Menú  Drop-down (expandible) online"},"content":{"type":"html","$t":"Gracias a \u003Ca href=\"http:\/\/www.anniyalogam.com\/widgets\/dropdown.html\"target=\"_blank\"\u003E Hackosphere\u003C\/a\u003E podemos crear un menú expandible en unos pocos minutos y añadirlo automáticamente a nuestro blog.\u003Cbr \/\u003EAgregas tus opciones del menú drop-down una por una especificando un nombre y la dirección del link, pinchas en \"Add option” (una vez para cada opción). Verifica que tu menú actualizado refleje lo que deseas. Si incurriste en cualquier equivocación, puedes  borrar todas las opciones usando el botón \"Clear all options\". Finalmente, pincha en  el botón de abajo del todo para agregar el menú a tu blog."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4442508939848542915\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/05\/men-drop-down-expandible-online.html#comment-form","title":"15 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4442508939848542915"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4442508939848542915"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/05\/men-drop-down-expandible-online.html","title":"Menú  Drop-down (expandible) online"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-3686109113117654596"},"published":{"$t":"2007-04-30T03:43:00.002+02:00"},"updated":{"$t":"2008-09-10T00:15:46.872+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Menú horizontal para el blog"},"content":{"type":"html","$t":"El funcionamiento de este menú es como los otros que he probado anteriormente, con la única diferencia que hay que hacerlo más o menos a mano. Aún con este pequeño inconveniente, a mi me gusta mucho, no es difícil de hacer y al pinchar sobre los botones se muestran todas las entradas con esa etiqueta.\u003Cbr \/\u003EEl único problema que me ha surgido, es que, como yo tengo muchas etiquetas, los botones me salían en dos filas, para evitarlo reduje su tamaño, pero esto hizo que se viera demasiado pequeño, así que opte por colocar un tres de ellos en la sidebar, con lo que está demostrado que también sirve como menú vertical. \u003Cbr \/\u003E  \u003Cbr \/\u003EOs explico como se hace:\u003Cbr \/\u003E\u003Cbr \/\u003E1- Antes de \u003Cb\u003E]]\u003E\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E en el HTML de nuestra plantilla, colocamos esta porción de CSS:\u003Cbr \/\u003E\u003Cblockquote\u003E#navcontainer ul\u003Cbr \/\u003E {\u003Cbr \/\u003E  text-align: center;\u003Cbr \/\u003E  padding-bottom: 5px;\u003Cbr \/\u003E  padding-top: 5px;\u003Cbr \/\u003E  padding-left: 0;\u003Cbr \/\u003E  margin-top: 0;\u003Cbr \/\u003E  \/* cancels gap caused by top padding in Opera 7.54 *\/\u003Cbr \/\u003E  margin-left: 0;\u003Cbr \/\u003E  background-color: #C0C0C0;\u003Cbr \/\u003E  color: white;\u003Cbr \/\u003E  width: 100%;\u003Cbr \/\u003E  font-family: Arial,Helvetica,sans-serif;\u003Cbr \/\u003E  line-height: 18px;\u003Cbr \/\u003E  \/* fixes Firefox 0.9.3 *\/\u003Cbr \/\u003E\u003Cbr \/\u003E }\u003Cbr \/\u003E \u003Cbr \/\u003E #navcontainer ul li\u003Cbr \/\u003E {\u003Cbr \/\u003E  display: inline;\u003Cbr \/\u003E  padding-left: 0;\u003Cbr \/\u003E  padding-right: 0;\u003Cbr \/\u003E  padding-bottom: 5px;\u003Cbr \/\u003E  \/* matches link padding except for left and right *\/\u003Cbr \/\u003E  padding-top: 5px;\u003Cbr \/\u003E                background-color: #333399;\u003Cbr \/\u003E }\u003Cbr \/\u003E \u003Cbr \/\u003E #navcontainer ul li a\u003Cbr \/\u003E {\u003Cbr \/\u003E  padding-left: 10px;\u003Cbr \/\u003E  padding-right: 10px;\u003Cbr \/\u003E  padding-bottom: 5px;\u003Cbr \/\u003E  padding-top: 5px;\u003Cbr \/\u003E  color: white;\u003Cbr \/\u003E  text-decoration: none;\u003Cbr \/\u003E  border-right: 1px solid #fff;\u003Cbr \/\u003E }\u003Cbr \/\u003E \u003Cbr \/\u003E #navcontainer ul li a:hover\u003Cbr \/\u003E {\u003Cbr \/\u003E  background-color: #CC3300;\u003Cbr \/\u003E  color: white;\u003Cbr \/\u003E\u003Cbr \/\u003E }\u003Cbr \/\u003E \u003Cbr \/\u003E #navcontainer #active { border-left: 1px solid #fff;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003EAquí es donde podemos cambiar los colores de nuestro menú, el tamaño del texto, la separación, etc.\u003Cbr \/\u003E\u003Cbr \/\u003E2- Buscamos en nuestra plantilla esta línea de código:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='content-wrapper'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EY justo a continuación añadimos la parte del código que mostrará nuestro menú debajo de la cabecera del blog:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='navcontainer'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul id='navlist'\u0026gt;\u003Cbr \/\u003E\u0026lt;li id='active'\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Trucos Blog' id='current'\u0026gt;Trucos Blog\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Trucos imagenes'\u0026gt;Trucos Imagenes\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Datos utiles'\u0026gt;Datos \u0026Uacute;tiles\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Ranking de comentarios'\u0026gt;Ranking de comentarios\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Boton Enlace'\u0026gt;Bot\u0026oacute;n Enlace\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Cosas mias'\u0026gt;Cosas mias\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003ELo copio tal cual está hecho el mio, tenéis que cambiar el nombre de mi blog por el vuestro y, por supuesto el nombre de las etiquetas por las de vuestro blog, así cuando pinchemos sobre uno de los botones del menú, se mostrarán todas las entradas con esa etiqueta.\u003Cbr \/\u003EHay que tener cuidado al escribir el nombre de la etiqueta, pues si no está escrito exactamente como en el blog no funcionará el link del menú.\u003Cbr \/\u003EFijaros que el nombre de las etiquetas, hay que ponerlo\u003Cb\u003E dos veces en cada enlace\u003C\/b\u003E, una justo después de \/label\/ y la otra a continuación, ya que la primera es el enlace y la segunda el nombre que se muestra en el botón del menú.\u003Cbr \/\u003E\u003Cbr \/\u003EPara usarlo en \u003Cb\u003Evertical\u003C\/b\u003E, tenemos que aplicar en un nuevo elemento HTML-Javascript, el segundo código, pero etiqueta por etiqueta, es decir así:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='navcontainer'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul id='navlist'\u0026gt;\u003Cbr \/\u003E\u0026lt;li id='active'\u0026gt;\u0026lt;a href='http:\/\/elescaparatederosa.blogspot.com\/search\/label\/Trucos Blog' id='current'\u0026gt;Trucos Blog\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E¡Suerte!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/3686109113117654596\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/04\/men-horizontal-para-el-blog.html#comment-form","title":"109 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3686109113117654596"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3686109113117654596"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/04\/men-horizontal-para-el-blog.html","title":"Menú horizontal para el blog"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"109"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-7549028989391639766"},"published":{"$t":"2007-03-11T00:18:00.002+01:00"},"updated":{"$t":"2009-05-05T00:47:03.895+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Etiquetas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"}],"title":{"type":"text","$t":"Menú en forma de pestañas en Blogger"},"content":{"type":"html","$t":"\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/RfFagxkXfZI\/AAAAAAAAAlc\/fZOQHiqpkPE\/s1600-h\/Nombre.jpg\"\u003E\u003Cimg style=\"cursor:pointer; cursor:hand;\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/RfFagxkXfZI\/AAAAAAAAAlc\/fZOQHiqpkPE\/s320\/Nombre.jpg\" border=\"0\" alt=\"Pestañas Blogger\"id=\"BLOGGER_PHOTO_ID_5039908977112481170\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003EHe recibido varios emails donde me solicitaban ayuda para conseguir poner el menu en el blog tal como lo tengo yo, en forma de pestañas en la parte superior de la página. \u003Cbr \/\u003EHe de deciros que yo lo conseguí siguiendo los pasos de \u003Ca href=\"http:\/\/betatrucos.blogspot.com\/\"target=\"_blank\"\u003ETrucos Blogger\u003C\/a\u003E que a su vez tomó la idea de \u003Ca href=\"http:\/\/hoctro.blogspot.com\/\"target=\"_blank\"\u003EHoctro's Place\u003C\/a\u003E, aclarado este punto,sigamos con lo nuestro...\u003Cbr \/\u003E\u003Cbr \/\u003EAntes de empezar has de tener \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/08\/como-etiquetar-los-posts.html\"\u003E etiquetados todos tus post\u003C\/a\u003E sino es imposible que puedas colocar las pestañas.\u003Cbr \/\u003E\u003Cbr \/\u003E1- Vamos a la Plantilla en Edicion de Html y Expandimos las plantillas de artilugios.\u003Cbr \/\u003E\u003Cbr \/\u003E2- Buscamos este trozo de código:\u003Cb\u003E \u0026lt;b:section class=\"header\" id=\"header\" maxwidgets=\"1\" showaddelement=\"no\"\u0026gt;\u003C\/b\u003E y lo cambiamos por este otro:\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;b:section class=\"header\" id=\"header\" maxwidgets=\"2\" showaddelement=\"yes\"\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E3-Justo antes de: \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E colocamos este codigo completo:\u003Cbr \/\u003E\u003Cblockquote\u003E\/*- Menu Tabs F *\/\u003Cbr \/\u003E\u003Cbr \/\u003E#tabsF {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Ewidth:100%;\u003Cbr \/\u003Efont-size:80%;\u003Cbr \/\u003Eline-height:normal;\u003Cbr \/\u003Eborder-bottom:1px solid #000;\u003Cbr \/\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsF ul {\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Epadding:10px 10px 0 50px;\u003Cbr \/\u003Elist-style:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsF li {\u003Cbr \/\u003Edisplay:inline;\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Epadding:0;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsF a {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Ebackground:url(\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/Sf9qIJ35QkI\/AAAAAAAAGxQ\/t48-cC0Ogkk\/s400\/tableftF.gif\") no-repeat left top;\u003Cbr \/\u003Emargin:0;\u003Cbr \/\u003Epadding:0 0 0 4px;\u003Cbr \/\u003Etext-decoration:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsF a span {\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Edisplay:block;\u003Cbr \/\u003Ebackground:url(\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/Sf9qMJVnJmI\/AAAAAAAAGxY\/K6ntns2CUvI\/s400\/tabrightF.gif\") no-repeat right top;\u003Cbr \/\u003Epadding:5px 15px 4px 6px;\u003Cbr \/\u003Ecolor:#666;\u003Cbr \/\u003E}\u003Cbr \/\u003E\/* Commented Backslash Hack hides rule from IE5-Mac *\/\u003Cbr \/\u003E#tabsF a span {float:none;}\u003Cbr \/\u003E\/* End IE5-Mac hack *\/\u003Cbr \/\u003E#tabsF a:hover span {\u003Cbr \/\u003Ecolor:#FFF;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsF a:hover {\u003Cbr \/\u003Ebackground-position:0% -42px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#tabsF a:hover span {\u003Cbr \/\u003Ebackground-position:100% -42px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E4- Guardamos cambios.\u003Cbr \/\u003EEn este momento \u003Cb\u003Eañadimos las etiquetas al blog\u003C\/b\u003E. \u003Cbr \/\u003ENos dirigimos a la Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas.\u003Cbr \/\u003E\u003Cbr \/\u003E5- Por ultimo buscamos el siguiente codigo:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='Label1' locked='false' title='Etiquetas' type='Label'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:title'\u0026gt;\u003Cbr \/\u003E\u0026lt;h2\u0026gt;\u0026lt;data:title\u0026gt;\u0026lt;h2\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.url == data:label.url'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:label.name\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:label.url'\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E(\u0026lt;data:label.count\/\u0026gt;)\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;b:include name='quickedit'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003Elo cambiamos por:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:widget id='Label1' locked='false' title='' type='Label'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='tabsF'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a expr:href='data:blog.homepageUrl'\u0026gt;\u0026lt;span\u0026gt;Inicio\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a expr:href='data:label.url'\u0026gt;\u0026lt;span\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- \u0026lt;b:include name='quickedit'\/\u0026gt; --\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E6- ¡Ya está listo! Si todo ha ido bien, las pestañas deberían estar situadas en el sidebar de nuestro blog, solo queda moverlas a la parte superior arrastrándolas hacia allí. \u003Cbr \/\u003ESi os apetece probar con otros modelos, podéis verlos en \u003Ca href=\"http:\/\/exploding-boy.com\/images\/cssmenus\/menus.html\"target=\"_blank\"\u003E exploding boy\u003C\/a\u003E, pinchando sobre ellos en esa misma página con el botón derecho, escoges \"ver código fuente\" y tendrás el código CSS para cada uno de los menús del ejemplo.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EAviso:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003EEl menú está teniendo fallos de visualización porque donde han sido alojadas las imágenes de las pestañas hay problemas. Para solucionarlo he subido las imágenes a Blogger y las he incluido de nuevo en el código CSS, así que solo tenéis que cambiar las url que estáis usando por las nuevas.\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/7549028989391639766\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/03\/men-en-forma-de-pestaas-en-blogger.html#comment-form","title":"377 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7549028989391639766"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7549028989391639766"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/03\/men-en-forma-de-pestaas-en-blogger.html","title":"Menú en forma de pestañas en Blogger"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/RfFagxkXfZI\/AAAAAAAAAlc\/fZOQHiqpkPE\/s72-c\/Nombre.jpg","height":"72","width":"72"},"thr$total":{"$t":"377"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6131022367192123232"},"published":{"$t":"2007-01-26T01:48:00.003+01:00"},"updated":{"$t":"2009-04-21T18:53:35.243+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Menú o lista."},"content":{"type":"html","$t":"Dos códigos sencillitos para hacer un menú desplegable y una lista. Donde pone ejemplo 1, 2, 3 ponéis lo que queráis.\u003Cbr \/\u003E\u003Cbr \/\u003ECódigo uno:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;select name=\"select\"\u0026gt;\u0026lt;option\u0026gt;Ejemplo 1\u0026lt;\/option\u0026gt;\u0026lt;option\u0026gt;Ejemplo 2\u0026lt;\/option\u0026gt;\u0026lt;option\u0026gt;Ejemplo 3\u0026lt;\/option\u0026gt;\u0026lt;\/select\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EEl resultado:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cselect name=\"select\"\u003E \u003Coption\u003EEjemplo 1\u003C\/option\u003E \u003Coption\u003EEjemplo 2\u003C\/option\u003E \u003Coption\u003EEjemplo 3\u003C\/option\u003E\u003C\/select\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ECódigo dos:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;label\u0026gt;\u0026lt;input type=\"radio\" name=\"GrupoOpciones1\" value=\"opción\"\u0026gt;Ejemplo 1\u0026lt;\/label\u0026gt;\u0026lt;label\u0026gt;\u0026lt;input type=\"radio\" name=\"GrupoOpciones1\" value=\"opción\"\u0026gt;Ejemplo 2 \u0026lt;\/label\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EEl resultado:\u003Cbr \/\u003E\u003Clabel\u003E\u003Cbr \/\u003E\u003Cinput type=\"radio\" value=\"opción\" name=\"GrupoOpciones1\"\u003EEjemplo 1\u003C\/label\u003E\u003Cbr \/\u003E\u003Clabel\u003E\u003Cbr \/\u003E\u003Cinput type=\"radio\" value=\"opción\" name=\"GrupoOpciones1\"\u003EEjemplo 2 \u003C\/label\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/6131022367192123232\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/01\/men-o-lista.html#comment-form","title":"17 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6131022367192123232"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6131022367192123232"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2007\/01\/men-o-lista.html","title":"Menú o lista."}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"17"}}]}});