add

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

14 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

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios