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.



Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: