Este menú tan vistoso y alegre lo encontré en CODROP como puede comprobarse en la entrada original no hay ninguna explicación excepto modificar los colores del menú que dicho sea de paso en la práctica esos cambios no se hacen visibles dónde están indicados.
Después darle unas vueltas conseguí añadirlo y hacerlo funcionar con algún que otro problema que fue solventado gracias a Vagabundia al que disimuladamente asalté y gentilmente se ofreció a modificar el script ya que no tenía otro remedio.
Una vez todo en orden comentamos sobre la cantidad de estilos que requiere este menú y el poco sentido que tienen esos mismos estilos cuando los colores se modifican en el script.
Nos dejamos de hablar y ponemos manos a la obra si queremos conseguir este menú, no sin antes armarse de un poco de paciencia para poder personalizarlo a nuestro gusto.

Comenzamos buscando ]]></b:skin> y justo después añadimos el contenido de este archivo.

Si estamos usando jQuery el siguiente paso lo vamos a omitir, de no estar usándolo añadimos a continuación:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Guardamos los cambios, y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadimos:

<div style="position:relative;">
<ul class="menu">
<li><a href="url-página">Home</a></li>
<li><a href="url-página">Portafolio</a></li>
<li><a href="url-página">Trabajos</a></li>
<li><a href="url-página">Perfil</a></li>
<li><a href="url-página">Indice</a></li>
<li><a href="url-página">Contacto</a></li>
</ul>
</div>
<div style="clear:both;"></div>

❋En url-página añadimos la url del sitio que vamos a enlazar.
❋El texto que hará de enlace lo sustituimos por el nuestro.

Personalizamos el menú
Buscaremos en plantilla edición de HTML dónde añadimos el contenido del archivo y al final del todo veremos algo así:

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.menu&#39;).tagdrop({tagPaddingTop: &#39;60px&#39;,bgColor: &#39;#xxxxxx&#39;,bgMoverColor: &#39;#xxxxxx&#39;,textColor: &#39;#xxxxxx&#39;});
});
</script>

bgColor: Color de fondo de la pestaña tal y como se muestra al actualizar la página.
bgMoverColor: Color de fondo de la pestaña efecto hover.
textColor: Color de texto efecto hover.
Como puede verse he señalado con xxxxxx el lugar donde debemos añadir el color.

Para el color de texto de la pestaña buscaremos:

.menu li a {
............
............
............
............
color: #FFF;
}
Filigrana

Que lindo! Me encantó :)

Responder
Belen Sanchez

Hola me encantan todos tus aportes, trate de colocar este menu pero no uncuentro en mi plantilla donde diga ]]> yo descargue una plantilla que no es de bloger lo puedo usar igual? espero tu ayuda. Gracias

Responder
Belen Sanchez

Ya logre realizarlo gracias, ahora mi problema es que no se como enlazar a cada cosa me ayudan , gracias

Responder
Graciela

Precioso Julia :P

Procura no asaltar al 'contador, administrador', puede tomar represalias en nuestra contra ;)

Gracias por pasarte, en pocos días conoces al capullo pequeño -dos años menos-, sin contar a Lola y Celeste -las perritas-

Besitos!

Responder
La hormiguita

Muy bonito... estoy buscando uno para mi blog... miro algunos más y si no pongo este...
:)

Responder
Gem@

:: Me alegra que te guste Filigrana :)

:: Belén para añadir los enlaces mira dónde dice:
❋En url-página añadimos la url del sitio que vamos a enlazar.
(La url es la dirección que vemos en la barra del navegador cuando visualizamos la página)
❋El texto que hará de enlace lo sustituimos por el nuestro.

:: Graciela intento no molestarlo pero hay veces que prácticamente lo secuestro jajajaja
La niña preciosa, un bombón, la `pequeña seguro que también lo es :D

:: Todo tuyo La hormiguita :)

Responder
Belen Sanchez

Hola agradesco la respuesta pero la verdad que me es imposible entender como hacerlo, porque si pongo la url de mi blog abre siempre lo mismo.... que hagoo gracias

Responder
Gem@

:: Belén, siempre se mostrará la página que enlazas es decir la de la url que añades, si deseas enlazar un sitio debes copiar la url de ese sitio y pegarla de la misma forma que hiciste con la url de tu blog.
Te dejo una entrada para que veas la forma de enlazar un menú:
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html

Responder
belen

Gracias voy a tratar de hacerlo espero me salga Besos Gracias por su ayuda

Responder
Gem@

:: Paciencia Belén, cuando empezamos el tema de enlazar lo vemos muy cuesta arriba pero con un par de enlaces verás que es cosa sencilla :)

Responder
Filigrana

Gema estoy desesperada! Estoy haciendo algo mal? Porque no encuentro ]]> !! (En un blog nuevo).

Responder
Gem@

:: Filigrana normalmente ]]></b:skin> está justo al final de los estilos y antes de </head> :O

Responder
Filigrana

Jaja si pasa que, de todos modos, siempre uso Ctrl f para buscar, y no aparecía igual. Después me di cuenta de que tampoco aparecía Editar elementos de página. No entiendo, que hago mal que no puedo volver al editor antiguo? Trato y trato pero no hay forma!! Gracias Gema :) Me tiene loca esto!

Responder
Belen Sanchez

:D Hola Amiga logre descargar un programa donde pudes crear la plantilla a tu gusto, puse en ella la barra de menu y escribi luego todo lo que explicaste y funciono de maravilla.Ahora lo que me gudtaria saber es como haga para colocar sub menus en ella. Gracias
http://dulcesartesaniasbye.blogspot.com/

Responder
Gem@

:: Filigrana cuando algo se tuerce lo mejor es empezar de cero, en ocasiones hasta he eliminado el blog y he creado uno nuevo.
Por aquí ando para cualquier cosa :)

:: Belen Sanchez no todos los menús son aptos para añadir submenús, te recomiendo instalar uno que ya lo tenga predefinido y no tener que hacer cambios o modificaciones porque hay que jugar con las medidas y no siempre coinciden.

Responder
Belen Sanchez

Hola esta plantilla ya los tiene a los sub menu cuando la hice el tema es que nose como se colocan los enlaces espero tu ayuda . gracias

Responder
Gem@

:: Belen he mirado tu código fuente pero no sé de qué forma se configuran las plantillas creadas con Artisteer :S

Responder
Filigrana

Si, tendré que crear otro, gracias!!!

Responder
Mercedes España

hola Gema Otra pregunta, creo que no es el sitio pero estoy algo perdida.

como se puede modificar el header, moverlo a la izq o derecha:
http://ooamouroo.blogspot.com/

como en ese caso
gracias por todo y saludos

Responder
Gem@

:: Eso no es el header Mercedes, es una imagen en un gadget de html, ese blog tiene suprimido el header :)

Responder
De todo para los blogger
Este comentario ha sido eliminado por el autor.
Responder
Pequechuches®

Hola Gema!!! Qué tal?
A ver, tengo un par de problemas.Estoy intentando poner este menú y vas a ver que la fecha de la entrada queda encima. Esta plantilla de nuevo me da problemas.
No la he tocado más.Como ves no la he puesto ni color hasta no solucionar este tema. Además, no se mueve, está estática y a mi me gusta tu ejemplo. En qué estoy fallando?
Mil gracias de nuevo por todo.

Rosa

Responder
Gem@

:: Pequechuches ocurre que añadiste el menú justo antes de main y es ahí donde está añadida la fecha, prueba a arrastrar el gadget del menú y añadirlo justo después del gadget de la cabecera :)

Responder
Pequechuches®

Ya está así Gema. Estoy tratando de bajar la fecha pero algo hago mal ya que se baja la fecha pero el dibujo de la flor, no. Uf, tampoco te quiero liar pero no sé como hacer para ponerlo.
Mil gracias de nuevo.

Responder
Gem@

:: Pequechuches busca lo que viene a continuación y añade la última línea marcada en negrita:
/* Posts */
h2.date-header {
font-family: Georgia;
text-align: right;
background: url('aquí está la imagen de la flor') no-repeat right top;
padding: 10px 48px 10px 0px;
height: 19px;
font-size: 12px;

margin-bottom:-35px;
}

Responder
Pequechuches®

Madre mía Gema, no te quiero marear con este tema, pero nada. El título de la entrada queda encima. He puesto un número menor y el título baja pero la fecha con la flor, nada.
Mil gracias de nuevo por todo.
Rosa

Responder
andre 5

Soy un nuevo usuario de blogger y quería hacer una pregunta:
Tengo instalada en mi blog esta plantilla: http://btemplates.com/2011/blogger-template-sensation/
¿Me gustaría saber como agregar contenido (entrada, Chat, videos, pdf, etc.) en las pestañas de esta plantilla?

Un saludo

Responder
Gem@

:: Las pestañas de esta plantilla son un menú, para enlazar esas pestañas con cualquier contenido lo puedes hacer creando una entrada con el contenido o en las páginas estáticas de Blooger que también le añades el contenido por ejemplo los que nombraste Chat, videos, pdf, etc.
Lo ideal son las páginas estáticas :)

Aquí verás la forma de crear las páginas:
http://gemablog-.blogspot.com/2010/01/paginas-en-blogger.html

Aquí puedes ver como enlazar el menú con páginas estáticas.
http://gemablog-.blogspot.com/2010/05/enlazar-menu-con-paginas-estaticas.html
Sin embargo para las entradas sólo hay un sitio para publicarlas, desde el escritorio verás un botón azul que dice nueva entrada :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top