Cómo crear un menú superior para blog de blogger (II)



Si quieres añadir este menú para tu blog de blogger como este debemos hacer lo siguiente:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:



<style>#MainMenu
{
height:27px;
background: #FFFFFF;
margin:0;
border-style: solid;
border-color:#9AB6D2;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 1px 0 0 ;
padding:0;
}
#tab a
{
background: url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no-repeat left top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:27px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#016599;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border-style: solid;
border-color:#9AB6D2;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
background: #FFFFFF;
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0 1px 0 0 ;
padding:0;
display:block;
border:0 solid ;
color:#FFFFFF;
background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:27px;
background:url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid ;
background-position:left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#016599;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#016599;
font-weight:bold;
}

</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="http://www.URLDETUBLOG.com"><span>CONTACTO</span></a></li>
</ul>
</div>
</div>




Si queremos añadir otra pestaña como la de CONTACTO como por ejemplo Quiénes somos, después del código de color verde tendríamos que pegar lo siguiente:
<li class="item_active"><a href="http://www.URLDETUBLOG.com"><span>Quiénes somos</span></a></li>


Y así podemos añadir las pestaña que queramos.

44 comentarios:

  1. gracias mi camarada buen aporte espero que me ayudes porque apenas estoy comenzando mi blog y he estado aprendiendo mucho de ti ps si me puedes ayudar mejor te dejo mi correo porfavor benjamin21845@hotmail.com

    ResponderEliminar
  2. Hola EXODO. Me alegro de verdad que te sea util esta web. Te animo a que si tienes dudas las expongas aqui en su lugar correspondiente. Asi los demas compañeros pueden aprender de tus preguntas tambien, y todos salimos beneficiados.

    Un saludo.

    ResponderEliminar
  3. excelente tus indicaciones, las aplique en el blog y funcionaron sin problemas.

    ResponderEliminar
  4. Muchas gracias por tu comentario. Un saludo

    ResponderEliminar
  5. Muchas gracias por tu dedicación a la página. Es la primera vez que entiendo todo y me funciona.
    Sólo quería preguntarte cómo se puede cambiar el color, no me gusta el azul clarito que no pega nada con mi blog. No sé dónde tengo que pegar el código de color. Gracias.

    ResponderEliminar
  6. Hola ángeles. Gracias por tu visita, gracias por comentar y gracias por tus palabras hacia mi página. El color lo puedes cambiar modificando lo siguiente:

    background: url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;

    En donde está la dirección http://img222.imageshack.us/img222/461/bright115ow7.gif ese es el color de fondo. Hay que cambiar esa imagen por la que quieras.

    Un saludo

    ResponderEliminar
  7. Si no sabes cómo crear otra imagen de esas características debes poner con esta estructura cada background que hay en el código:

    background: black;

    En lugar de black (negro) puedes poner el color que quieras, siempre en inglés. Si quieres poner códigos de colores visita esta entrada: http://www.quierocrearunblog.com/2009/09/colores-para-tu-blog-de-blogger.html

    Entonces el código debería tener esta estructura:

    background: #F000;

    Sólo tendrías que sustituir el #F000 por el color que te guste del enlace que te he dado.

    ResponderEliminar
  8. ole como le va
    si me vas a colaborar???

    ResponderEliminar
  9. Hola Daniel. Ya te comenté por privado a tu correo que te puedo ayudar todo lo que quieras por aquí. Pero es imprescindible que te expliques correctamente para saber cómo y en qué tengo que ayudarte. Por favor revisa si tus frases tienen sentido antes de publicar tu mensaje.

    Puedo ayudarte y estoy dispuesto a ello, al igual que hago con todo el mundo que me pide ayuda, pero lo que no puedo hacer es hacerte el blog desde el principio, porque como comprenderás me es imposible llevar el blog, contestar dudas y hacer encargos de plantillas.

    Si tienes dudas sobre temas aquí expuesto te ruego que lo hagas en la entrada que toque usando el buscador. Si se trata de un tema jamás tratado aquí contáctame en el formulario de contacto a pie de página.

    Te ruego que lo entiendas. Un saludo.

    ResponderEliminar
  10. Ya tengo el menu puesto, pero nose como ponerle contenido a los iconos, porque ahora cuando clico sobre ellos no hace nada. muchas gracias y gran aporte

    ResponderEliminar
  11. Hola. Si te fijas al finalizar la entrada allí hay una explicación con colores para saber qué es lo que hay que cambiar. Revísalo y verás como no tiene mayor complicación. Si tienes problemas coméntamelo.

    Gracias por tu visita y por tu comentario.

    ResponderEliminar
  12. HOLA, COMO AMO TU BLOG!!! JAJAJAJ
    Bueno ya hice esto de aca, pero por ejemplo si alguien le da click enciam a contacto me manda a ningun lado, como hago para que me mande, que se yo a un mail o alguna cosa asi, me entiendes?
    besos!

    ResponderEliminar
  13. Hola Juliana. Gracias por amar mi blog jajaja. Lo que me preguntas lo puedes hacer mediante un formulario de contacto. Emplea el buscador y darás con dos formularios de contacto para poner en tu blog. Uno de ellos lo puedes poner en una entrada y esa entrada luego es la que tendrás que poner en el código de este menú tal y como explico arriba.

    Saludos.

    ResponderEliminar
  14. ¡Lo que me ha costado encontrar esta solución en la web! Muchísimas gracias.

    ResponderEliminar
  15. Gracias Galopines. Me alegro que este blog te haya servido de ayuda. Bienvenido al blog. Espero volverte a ver por aquí. Un saludo :)

    ResponderEliminar
  16. exselanta...gracias por todo..me ha servido mucho ..un beso

    ResponderEliminar
  17. Hola Maya, me alegro que te haya servido. Muchas gracias por tu visita y por tu comentario. Un saludo, ¡espero volverte a ver por aquí!

    ResponderEliminar
  18. Hola nuevamente, Te agradezco mucho por este aporte... Ahora estoy haciendo otro blog, ya he probado los botones y estan excelentes, pero quiero saber como puedo hacer para quitar los que estan arriba: "Home" About" "Post RSS" y esos que traen las plantillas...
    Entre otras cosas, dentro de los botones tengo uno para videos, anteriormente se podia montar videos, ahora no se puede al menos que sean de youtube?
    Te agradezco mucho la info publicada...
    pasate por el blog del hotel te daras cuenta cuanto he mejorado y de paso me das algunas ideas....
    saludos desde Cartagena, Colombia

    ResponderEliminar
  19. Hola Administrador. Ve a tu plantilla y elimina toda esta parte:

    <div id='templatemo_menu'>
    <ul>
    <li><a Title='Home' href='http://pruebahotel.blogspot.com/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='http://pruebahotel.blogspot.com/feeds/posts/default'>Posts RSS</a></li>
    <li><a href='http://pruebahotel.blogspot.com/feeds/comments/default'>Comments RSS</a></li>
    <li><a href='#'>Contact</a></li>
    </ul>
    </div>

    Enhorabuena por tu blog, te está quedando fenomenal.

    ResponderEliminar
  20. Hola....excelente ya los he quitado...Muchas gracias, me anima ver que te parece bueno el blog.
    1)Lo de los videos solamente se puede entonces por youtube?
    2)Conoces algun gadget que tenga algo q ver con gestion de hoteles, reservas y cosas asi.
    3)No se donde preguntar esto, exite algun posibilidad de montar fotos y q la gente pueda comentarlas estilo FaceBook, aparte d ela posibilidad de hacerlo por entradas.
    Te agradezco mucho, con esta pagina he aprendido mas en una semana que en meses googleando...

    ResponderEliminar
  21. Te respondo:

    1) Cuando creas una entrada puedes subir desde tu PC cualquier vídeo. Comprúebalo y lo verás.

    2) Me temo que para eso blogger no es tu plataforma. Hacer ese tipo de webs requiere muchos otros conocimientos. Blogger no es para eso. Quizá para wordpress (.org) haya algo, pero no sabría decirte a ciencia cierta que sí.

    3) Blogger va por entradas y como no entres en ella no puedes comentar nada. Me remito a lo que te contesté en 2)

    Me alegro que te haya servido este blog. Un saludo compañero.

    ResponderEliminar
  22. Ok gracias amigo, creo que lo que puedo hacer es colocar un Calendario de google con las fechas y ocupacion del hotel o algo asi, igual con lo de las fotos.
    Mientras tanto seguire aprendiendo mas de esta plataforma con la ayuda de esta pagina.
    respecto a lo de los videos, no encuentro donde lo unico que me sale es imagenes, formato, leer mas y cosas asi....

    ResponderEliminar
  23. Antes me salia un icono para la subida de videos, ahora solo me sale el de imagenes...

    ResponderEliminar
  24. Hola Administrador. Debes actualizar el editor de Blogger. Para ello ves a Configuración->Básico->abajo del todo clica en "editor actualizado".

    ResponderEliminar
  25. Hola!Bueno, empece con una plantilla basica y ahora gracias a tus trucos se un monton de coas y si vieras como quedo mi blog!Muchas gracias por la ayuda, te debo una ^^

    ResponderEliminar
  26. hola muy bueno este blog , pero quiero saber si en el menu pongo digamos noticias, como hago para q me abra otra pagina de las mismas con noticias..

    ResponderEliminar
  27. holaaa
    si yo pongo un link de noticias como hago para tener una pagina de noticias que me lleve a ese link desde la barra de botones

    ResponderEliminar
  28. oye amigo felicidades por tu blog la verdad q esta muy bueno

    am me puedes ayudar a q el primer boton del menu tenga la funcion de (Mostrar ocultar) es q no he podido XD PORFA

    es q quiero q cuando se apriete ese boton se muestre algo

    ResponderEliminar
  29. @Itachi. Gracias por tus palabras. Me alegra haberte ayudado.

    @Alejo. Debes poner la URL del enlace que quieras enlazar. Fíjate en la explicación que hice al final de la entrada.

    @Mega. Hola, no sé a qué te refieres con ocultar/mostrar en este menú. La verdad es que en este menú poco más puedes hacer. Si quieres buscar otros menús fíjate echa un ojo a la etiqueta "menús" de este blog.

    ResponderEliminar
  30. Hola mi blog es el siguiente: http://proyectosbeta.blogspot.com/

    Tiene pestañas. Al entrar en la pestaña contactame..
    Me entra donde se encuentra el formulario.. Todo bien ahí, pero el problema esta en que se habilita la pestaña pagina principal poniendo la de contacto.
    Esta probando con CSS,pero no me sale...
    si me podrias ayudaar..desde paraguay muchisimas gracias

    ResponderEliminar
  31. Hola fires. Lamento el retraso, estuve de exámenes tal y como anuncié. Ya veo que lo has solucionado. ¿Todo bien? Enhorabuena por tu blog, muy buen diseño.

    Saludos!

    ResponderEliminar
  32. Hola. He estado intentando poner un menú en mi blog www.labarrera.blogspot.com . Como pueden ver está en la cabeza de las entradas, pero me gustaría ponerlo debajo de la foto, para que ocupe todo el ancho de la pantalla (o casi). El menú que está lo añadí por medio de un widget, pero supongo que por el diseño de la plantilla, no puedo colocar nada debajo de la imagen principal. ¿Cómo debo modificar la plantilla para poderlo poner? Muchas gracias. Los tutoriales son muy buenos.

    ResponderEliminar
  33. Hola. ¿No es posible arrastrar debajo otro gadget? Si la respuesta es que no deberías seguir buscar esta parte de código en tu plantilla:

    <div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol' showaddelement='no'/>
    </div>

    Sustituye no por yes.

    Espero que te sirva. Un saludo y bienvenido al blog.

    ResponderEliminar
  34. Gracias por la pronta respuesta. Pues eso no viene en mi plantilla. Seguramente quien la hizo lo quitó. Gracias.

    ResponderEliminar
  35. ¿Entonces ya lo conseguiste solucionar verdad? Te quedó muy bonito el blog. ¡Enhorabuena!

    ResponderEliminar
  36. Hola me a sido de gran ayuda me encanta tu blog muchas gracias por la información.

    Un saludo

    ResponderEliminar
  37. Hola!!! muchas graaciaaaaas ;DDDDD pero me gustaria saber si puedo cambiatle el color a la barra ya que mi blog es mas del estilo rosa.. y una barra celeste no pega mucho, Besos.

    ResponderEliminar
  38. Excelente aporte para los que no sabemos nada de codigos.

    ResponderEliminar
  39. Me gustaria saber en que lenguaje están los códigos para crear el menu, en javascript o html, sé de la existencia de aquellos lenguajes y realmente me gustaria estudiar al menos uno de ellos. Me gustaría alguna sugerencia para el siguiente blog http://escuela22319.blogspot.com
    actualmente estoy creando otro blog y he aprovechado el que compartas códigos para crear menus. Mil gracias.

    ResponderEliminar
  40. mira, mi blog es http://noticias-demundogaturro.blogspot.com/ lo que quiero saber es por ej. Yo pongo una con CONTACTO, pero despues como hago que valla a otra pestaña de mi blog, donde pueda escribir como otra entrada.. Grax

    ResponderEliminar
  41. Hola, he hecho esto que comentas, pero luego cuando escribo una entrada, como hago que vaya directamente a la página de contacto.
    Es decir si pulsan en contacto que aparezcan los datos que yo he escrito?¿

    ResponderEliminar