Vivir Sencillamente para ser feliz

Trucos, ofertas, bricolaje, manualidades, posicionamiento, SEO, Blogs...

Cómo añadir menús dinámicos en Blogger

Cómo añadir menús dinámicos en Blogger


Algunos de mis seguidores me han preguntado sobre la posibilidad de añadir un
menú desplegable sencillo y a la vez atractivos para blogger, así que hoy vamos a aprender cómo agregar un menú desplegable para blogger de forma sencilla.




Este menú desplegable es compatible con la mayoría de los navegadores modernos y clásicos, y puede añadirse para cualquier plantilla en sólo 3 pasos, pero por favor no olvides hacer una copia de seguridad de la plantilla blogger actual.


Pasos:

1.- Añadir el CSS

Ir al administrador de blogger, a la pestaña de diseño, Edición HTML, y usa el buscador para localizar este código:
]]></b:skin>

Y justo antes, pega este código CSS:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2.- Añade el código Java

Desde la misma página en la que estamos añadiendo el punto 1, localizamos el siguiente código:

</head>
Y justo antes, pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

3.-Añadir el menú al Blog

Lo último que quedaría sería añadir el código HTML a un gadget para crear el menú dinámico, para ello, desde la configuración de blogger, vamos a diseño, y añadimos un gadget de tipo HMTL/ java script y pegamos el siguiente código:

(En este código debes reemplazar las url por los enlaces reales de tu blog)
<ul id="jsddm">
  <li><a href="#">url del Home</a>
  <li><a href="#">url del Menu 1</a>
  <ul>
  <li><a href="#">url del Drop 1-1</a></li>
  <li><a href="#">url del Drop 1-2</a></li>
  <li><a href="#">url del Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">url del Menu 2</a>
  <ul>
  <li><a href="#">url del Drop 2-1</a></li>
  <li><a href="#">url del Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">url del Menu 3</a>
  <ul>
  <li><a href="#">url del Drop 3-1</a></li>
  <li><a href="#">url del Drop 3-2</a></li>
  <li><a href="#">url del Drop 3-3</a></li>
  <li><a href="#">url del Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">url del Menu 4</a></li>
  <li><a href="#">url del Menu 5</a></li>
  <li><a href="#">www.vivirsencillamente.com</a></li>
  </li></ul>
Para terminar, sólo tienes que mover el gadget desde donde esté al lugar donde desees tener el menú dinámico dentro de blogger.



7 comentarios:

Jorge dijo...

Hola, hoy estuve probando el menu y funciona perfectamente, lo unico que encontre extraño es que en safari e IE8 y 7 es que en mi caso tengo un video q esta debajo del menu y este bloquea los elementos emergentes que pasan por el, me preguntaba si no tendrias una solucion a ese problema, muchas gracias.

Peter dijo...

Gracias por la ayuda pero al implementarlo tengo el inconveniente de que no se desplega el menu completo, te agradecería si le hechas un vistazo en http://pvillegasy.blogspot.com

NIVARDO LOPEZ dijo...

Gracias, está super

cesar dijo...

hola, he buscado por todas partes si es posible hacer lo mismo en google sites, gracias.

ana maria Beltran dijo...

No encuentro el codigo ]]>, y no tengo buscador

Daniela A. Ayala Molinari dijo...

Buenas!! he seguido tus instrucciones pero tengo un problemilla y no sé cómo solucionarlo.Mi blog es http://maestraconpdi.blogspot.com
He puesto dos menús desplegables, uno en cada columna. Pues bien, la de la columna de la derecha no me funciona. Veo el código correcto y sin embargo no se despliegan los enlaces, ¿por qué será?
Necesito tu ayuda porque ya no sé qué hacer...
Gracias.

Anónimo dijo...

Hola como estas..me gusto tu menu..pero necesito editar los colores y el fondo del menu ya ke no combina mucho y se pierde el estilo con el fondo del blog lo ideal seria transparente o el mismo color del blog me podrias ayudar? que codigo tengo ke modificar para colocar otro color

Publicar un comentario

 
Powered by Blogger