Menu Jquery para blogger


Es momento de publicar un nuevo menú para utilizarlo en nuestros blogs de blogger. Anteriormente publique diferentes tipos de menús para usarlo en blogger, los podrán ver en este link, Menús para blogger. Este nuevo menú para blogger nos desplegara un sub menú de forma horizontal con un color diferente en cada categoría. Es fácil de instalar en nuestro blog de blogger, voy hacer que este menú para blogger sea tan simple su instalación, y así no puedan tener problemas.

Menu Jquery para blogger

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


Ahora nos dirigimos a trabajar

Ir a Blogger

Primer Paso:

Menu Jquery para blogger

Da un clic en “Plantilla”, luego otro 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.



1 Busca este código <head> y justo debajo de el inserta los siguientes códigos

<script src='http://yourjavascript.com/302734841/jquery-pack-colourful.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/331403477/jcarousel-colourful.js' type='text/javascript'> </script>
    <script src='http://yourjavascript.com/942435317/mt-colourful.js' type='text/javascript'/>

2 También deberás encontrar esta línea de código body { y debajo de el pega el siguiente código

margin:0px
padding:0px;

3 Luego busca este otro código

<body>

Si no existe ese código en tu editor HTML podrás buscar este otro código

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

E inserta el siguiente código abajo del código que encontraste

<!--Star colorful by www.grupodelecluse.com-->
<style>
/*------- Color Tabs Menu by www.ayudadeblogger.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
      margin: 0;  padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
    border-left: 1px solid #cfcfcf;
        border-right: 0px solid #cfcfcf;
    background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
    font-size: 12px; font-family: helvetica, arial, sans-serif;
    list-style: none;  margin: 0 auto;  padding: 0;
    width: 960px;
}
#nav ul {
     margin: 0;
  
}
:focus {
    outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
    display: block;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 33px;
    padding: 0 13px 0 10px;
    color: #333;
    text-decoration: none;
    background: url(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {
    padding: 0 33px 0 10px;
    text-indent: -9999px;
    background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
    position: absolute;
    top: 33px;
    left: -1px;
    overflow: hidden;
    width: 960px;
    display: none;
    z-index: 999;
list-style: none;
  padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left;   }
ul#nav li ul.sub-nav li a {
    float: none;
    background: none;
    font-size: 11px;
    text-transform: none;
    color: #fff;
    line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>
              
               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>INICIO</a></li>

                <li class='top-link' id='mbt'><a href='#'>CATEGORIA 1</a>
                    <ul class='sub-nav'>
                    <li><a href='#'>SUB CATEGORIA 1.1</a></li>
                    <li><a href='#'>SUB CATEGORIA 1.2</a></li>
                    <li><a href='#'>SUB CATEGORIA 1.3</a></li>
                    <li><a href='#'>SUB CATEGORIA 1.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='#'>CATEGORIA 2</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB CATEGORIA 2.1</a></li>
                    <li><a href='#'>SUB CATEGORIA 2.2</a></li>
                    <li><a href='#'>SUB CATEGORIA 2.3</a></li>
                    <li><a href='#'>SUB CATEGORIA 2.4</a></li>
                    <li><a href='#'>SUB CATEGORIA 2.5</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-news'><a href='#'>CATEGORIA 3</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB CATEGORIA 3.1</a></li>
                    <li><a href='#'>SUB CATEGORIA 3.2</a></li>
                    <li><a href='#'>SUB CATEGORIA 3.3</a></li>
                    <li><a href='#'>SUB CATEGORIA 3.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='#'>CATEGORIA 4</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB CATEGORIA 4.1</a></li>
                    <li><a href='#'>SUB CATEGORIA 4.2</a></li>
                    <li><a href='#'>SUB CATEGORIA 4.3</a></li>
                    <li><a href='#'>SUB CATEGORIA 4.4</a></li>
                    <li><a href='#'>SUB CATEGORIA 4.5</a></li>
                    <li><a href='#'>SUB CATEGORIA 4.6</a></li>
                    <li><a href='#'>SUB CATEGORIA 4.7</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='#'>CATEGORIA 5</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB CATEGORIA 5.1</a></li>
                    <li><a href='#'>SUB CATEGORIA 5.2</a></li>
                    <li><a href='#'>SUB CATEGORIA 5.3</a></li>
                    <li><a href='#'>SUB CATEGORIA 5.4</a></li>
                    <li><a href='#'>SUB CATEGORIA 5.5</a></li>
                    </ul>
                </li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>

<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>
-->
              

                  <li style='clear: both;'/>
            </ul>
</div>
<!--END OF COLORFUL BY AYUDADEBLOGGER-->

Realiza estos cambios:

Cambia el texto que esta marcado de colore rojo por el texto que tu quieras que aparezca en tu nuevo menú, al igual deberás insertar el link del post que quieres dar a conocer en este nuevo menú, donde esta el símbolo numeral marcado de color azul #.

Si quieres aumentar una nueva categoría en tu menú, deberás copiar el siguiente código después de </a>

<ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB CATEGORIA 6.1</a></li>
                    <li><a href='#'>SUB CATEGORIA 6.2</a></li>
                    <li><a href='#'>SUB CATEGORIA 6.3</a></li>
                    <li><a href='#'>SUB CATEGORIA 6.4</a></li>
                    <li><a href='#'>SUB CATEGORIA 6.5</a></li>
                    <li><a href='#'>SUB CATEGORIA 6.6</a></li>
                    <li><a href='#'>SUB CATEGORIA 6.7</a></li>
                    </ul>


Recuerda que cuando vayas a colocar esta nueva categoría, deberás borrar el código que esta marcado de color amarillo <!--  -->

Si quieres cambiar el tamaño del menú, cámbialo en el código que dice width: 960px; por el que tu quieras.

Eso es todo, ahora dale un clic en “Guardar plantilla”, listo mira tu nuevo menú en tu blog de blogger.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos.

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

12 comentarios:

  1. me gusta mucho este menu, pero se podria poner mas abajo ?? solo por curiosidad

    ResponderEliminar
  2. hola luis, creo que este es el que mas me gusta de todos los menús que e visto por aquí, el detalle de la casita la forma de los submenus, puedo poner un montón sin casi ni perdida de espacio, ¿¿pero podre ponerlo debajo de la cabecera??, gracias luis eres un genio

    ResponderEliminar
  3. jo supongo que no puedo poner el menú debajo de la cabecera, que rabia queda tan bonito

    ResponderEliminar
  4. Hola José si es posible, colocar el menú debajo de la cabecera, a continuacion te dejo como hacerlo.
    Si quieres ponerlo debajo de la cabecera no necesitas buscar el codigo del paso 3, ahora necesitaras buscar este codigo:
    (cabecera)' type='Header'/>

    Y veras dos codigos mas abajo que son el cierre del /div Debajo del codigo de /div que encontrastes inserta todo el codigo que esta en el paso 3, eso es todo.
    Saludos.

    ResponderEliminar
  5. http://cactusyaficiones.blogspot.com.es/

    dioss gracias luis chavez, eres un gran maestro, gracias por todo hay tienes el enlace si quieres verlo, dentro de poco días pondré el dominio ...

    ResponderEliminar
  6. Hola José de nada, ya vi tu blog y esta muy bien, te quedo chavere, cualquier pregunta no dedes en hacermelo saber y cuando este conectado te ayudare.
    Saludos

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. LUIS COMO INTEGRO CONTENIDOS AL MENU Y A LOS SUB MENUS. TE DEJO EL E-MAIL. expopuntaarte@gmail.com. TE PIDO SI ME AYUDAS. DARWIN

    ResponderEliminar
  9. para que funcione te ha faltado cerrar los scripts uno y tres.

    ResponderEliminar
  10. hola una pregunta, su menu me funciona muy bien , pero tengo una curiosidad, el menu se podria haber hacia abajo en vez de horizontalmente????,

    ResponderEliminar
  11. Hola, muchas gracias por el aporte. Te queria preguntar cual es la "rutina" para que quede inmovilizado el menu. De manera que si se hace "scroll" para abajo navegando por las entradas, este se siga viendo.

    Desde ya muchas gracias.

    ResponderEliminar