Menú desplegable para blogger con imágenes


Es tiempo de compartir con todos los bloggeros del mundo un fabuloso menú desplegable para blogger con imágenes. Este truco para blogger es muy fácil de realizarlo solo tienen que seguir mis instrucciones y podrán tener este espectacular menú desplegable para blogger con imágenes. Las características de este menú son muy simples, el menú desplegable le va ha mostrar imágenes al momento que desplieguen cualquier categoría. Este menú desplegable para blogger con imágenes solo lo podrán utilizar con tres tipos de URLs, las cuales son, etiquetas, consultas de búsqueda y búsqueda de etiquetas.

Menú desplegable para blogger con imágenes

A continuación mire su demostración en mi blog de demos


Les gusto verdad, ahora nos dirigimos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla”, luego un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación


En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


3 Busca este código ]]></b:skin> y arriba de el inserta el siguiente código CSS

/* Menu Stylings by www.ayudadeblogger.com star www.grupodelecluse.com */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;

4 Luego deberás encontrar este otro código </head>, recuerda que el código que vas a insertar es un código javascript y si ya lo tienes en tu blog, ya no es necesario ponerlo, ya que crearía conflictos, y si no lo tienes instalado tendrás que insertarlo arriba del </head>

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

5 También deberás colocar las siguientes líneas de código antes de </head>

<script src='https://dl.dropboxusercontent.com/s/ysjbhuo6a0lup4z/bloggermenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
            $(&#39;#w2bajaxmenu&#39;).ajaxBloggerMenu({
                        numPosts : 4, // Number of Posts to show
                        defaultImg : &#39;http://url-to-image.com/default-image.jpeg&#39; // Default thumbnail Image
            });
});
</script>

Ahora dale un clic en “Guardar plantilla”.

6 Da un clic en “Diseño” y abre un nuevo widget “HTML/Javascript” e inserta en su interior el siguiente código. El código que vas a insertar en tu nuevo widget tendrás que insertarlo con mucho cuidado y realizar algunos cambios, y si no es así, no te funcionara correctamente.

Menú desplegable para blogger con imágenes

<ul id="w2bajaxmenu" class="w2bmenu">
            <li>
                        <a href="#">Inicio</a>
            </li>
            <li>
                        <a href="#">Ejemplo 1</a>
                        <ul>
                                   <li><a href="http://www.ayudadeblogger.com/search/label/Plantillas">Plantillas</a></li>
                                   <li><a href="http://www.ayudadeblogger.com/search/label/Slideshow">Slideshow Blogger</a></li>
                                   <li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20Blogger">Trucos Blogger</a></li>
                                   <li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20CSS%20y%20HTML">Trucos CSS</a>
                        </li></ul>
            </li>
            <li>
                        <a href="#">Ejemplo 2</a>
                        <ul>
                                   <li><a href="http://tublogdireccion.blogspot.com/search/label/Design">Nombre 1</a></li>
                                   <li><a href="http://tublogdireccion.blogspot.com/search/label/Facebook?q=Like+Button">Nombre 2</a></li>
                                   <li><a href="http://tublogdireccion.blogspot.com/search/label/Templates">Nombre 3</a></li>
                                   <li><a href="http://tublogdireccion.blogspot.com/search?q=Guest+Posts">Nombre 4</a></li>
                        </ul>
            </li>
            <li><a href="http://tublogdireccion.blogspot.com">Link Normal</a></li>
</ul>

Realiza estos cambios:

Los links que esta marcados de color azul, deberás sustituirlos por el link de cualquiera de tus etiquetas.
Las letras que están marcadas de color rojo, deberás cambiarlas por los nombres que tu quieras, eso es todo.

Dale un clic en “Guardar” y mira tu nuevo menú desplegable para blogger con imágenes incluidas.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

16 comentarios:

  1. Excelente, esto es lo que estaba buscando.
    Gracias Luis por ser un verdadero blogger.

    ResponderEliminar
  2. Muy bueno.
    necesitaba este Menú desplegable
    Gracias.

    ResponderEliminar
  3. Gracias si funciona me demore un rato porque me faltaban aprender ciertas cosas jeje pero se puede personalizar esa barra?

    ResponderEliminar
  4. Hola Alexander, claro que se puede modificar la barra, puedes cambiar de color al igual que su fondo, te recomiendo que lo dejes tal como esta. Y si lo quieres hacer me consultas.
    Saludos.

    ResponderEliminar
  5. Estupendo Luis!!, yo llevo años usando vistas dinámicas de blogger y ahora me quiero pasar a la versión normal, la de toda la vida, vaya. Así es que estoy armando uno de pruebas para ir habituándome y probar cambios, etc.
    Acabo de insertar en menú desplegable de tu tutorial, cambiado los nombres, etc. Lo que no me queda claro es: para PUBLICAR, por ejemplo en una de las etiquetas del menú desplegable EJEMPLO 1, lo debo hacer en una entrada normal y al colocar la etiqueta de blogger se me colocará solo?, es que no entiendo ya que no veo o no sé ver el botón de edición.

    Muchísimas gracias!!, un trabajo fenomenal ;)

    ResponderEliminar
    Respuestas
    1. Hola, cuando tu publicas cualquier articulo lo organizas por etiquetas. Abre tu blog, y da un clic derecho en el nombre de cualquier etiqueta y copialo, eso debes pegar en el paso 6 de este post. Ahi dice asi:
      Los links que esta marcados de color azul, deberás sustituirlos por el link de cualquiera de tus etiquetas.
      Si aun no puedes contactame en el chat de gmail, y te ayudare gustosamente.
      Saludos.

      Eliminar
  6. Oye amigo, muy bueno tu tutorial, sólo que me surgió un problema.
    A qué se debe que no me quiera seleccionar alguna opción de las que se desplegan?
    Ayuda porfa

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog para poder verlo,
      Saludos,.

      Eliminar
    2. Como acabó este tema, porque siguiendo tu tutorial, tengo el mismo problema.

      Eliminar
    3. Hola, cual es el problema que tienes. Explicalo
      Saludos.

      Eliminar
  7. Maestro

    Como puedo modificar el color de fondo y las letras de la barra de menu? muchas gracias por todo.

    ResponderEliminar
    Respuestas
    1. Hola busca esta posicion en el paso 3, color: #6b6b6b, cambia 6b6b6b por el codigo de color que quieras, ese es para el fondo.
      Saludos.

      Eliminar
  8. como hago para cambiar de color y para ponerle un buscador

    ResponderEliminar
  9. Como poner un buscador como el de ayudadeblogger?

    ResponderEliminar
  10. Hola Luis fijate que no me esta trabajando, tengo un par de días tratando de implementarlo. El menú me carga, pero no las imagenes de lado izquierdo, como que si no existiera ningún post, te dejo de manera privada mi sitio quizás me hechas una mano www.miniventa.com

    ResponderEliminar