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.

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.

<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.

Que es una Etiqueta, más información en este enlace

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

TAGS: Menu desplegableTrucos CSS y HTML

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.