MENÚ CON JQUERY PARA BLOGGER

MENÚ CON 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.


Ahora nos dirigimos a trabajar


Primer Paso:

Un clic en “Plantilla”





 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.



 Busca este código

<head>

Ingrese el siguiente script justo abajo del código que encontraste









<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'/>


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;


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

 Un clic en “Plantilla”




 Un clic en “Editar HTML”



Ahora se le abrirá el Editor HTML de su plantilla




En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.




 Busca este código


<body>

Ingresa el siguiente código justo 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXWjAdxU-_4oWFhdYyeuUp5WABTwfq-1Ubg90wZ4SANLx5lFuMjw3igRwTWSuRCuRHadazXWIM8WGkdQwXEhTbuxzTU5je_SdTP2r3_VMnOUz562Ojjd7QX-e9XCCySSv0Z29cr9fQ5g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXWjAdxU-_4oWFhdYyeuUp5WABTwfq-1Ubg90wZ4SANLx5lFuMjw3igRwTWSuRCuRHadazXWIM8WGkdQwXEhTbuxzTU5je_SdTP2r3_VMnOUz562Ojjd7QX-e9XCCySSv0Z29cr9fQ5g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_OHvn97gV2u9BmWVKHG8pIojF0_JW42VE4L-9qopXLyR49HRIwelaylF-Io-p4KLMaob4HFEeNFPPM0ZbocBrUyYdiSaXx_OdXsXFGfSMMLlE5tty-by1cz4XVf-PmGGwPKMltkZ46s/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyfFLYFCZ6KOXMOrWLoyCLg3WsZImYc-Y-gEGeVw7Yg3W25qzhPut6w8bC8iTSBMtqK1dEwmQxxsXv4BL9WfCtPKFQQZaQ7r2owUS48nVeUlYLPkiVC3KKjSMQci3_xPVCGGhJ7btcEUc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyfFLYFCZ6KOXMOrWLoyCLg3WsZImYc-Y-gEGeVw7Yg3W25qzhPut6w8bC8iTSBMtqK1dEwmQxxsXv4BL9WfCtPKFQQZaQ7r2owUS48nVeUlYLPkiVC3KKjSMQci3_xPVCGGhJ7btcEUc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2V-bu6DNAUX19kQZRdr5V-gDEbKNAnf9egHy1EbYeKmkC2Ibd_vgHagmARMZb_qXTn5M2oFtkpzKTi6xWmpdLdIGHZl81yLzT4LHAWdaHO16zYLYV6t4I7fs_V7nGUFGct0sBOfn6Do/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlQBK1UiulYN0cGZ3JMyerPwvZ0BBi5oYHnM3_gAxjwoRwW2BCw5MWwGo08xRMxHO2SGk4RvY6I0LZB7j0Lpovx8ISl48cx-tgZARB3qqlJAiRpo2bsErprw7FDHvRmtp1ZbzZzxc-L0/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtIbNVVZo7mPS8-DUDjw9iwWpNhKDXnVEWsYnYjC6vZPQGPZF7yKUydrBkU7pFsJTvcBe90qPGNS0bkLeIagTdJ9eXsa7GF_PGkzC7gmOgBzaSZyviNgOl5-qly7S9Z4406eFQDZkYDE/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCaXuO110ri-mcTOmGpJEuceUB7-OmJ4_EFP49z8s0g7fI5eigSyc840NRK5bgLzmGYXU1MeZlpabrc3mx8WmKghLyfBwqtWbhjkUfEqKV0neWC3ScjBDu8yJmTSymv4B1vl1gf5ZAuw/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMTDjUplLFTPbaswzONzV56we8lm1abLpVGvRRkBJBlapeLgvvpbx0qR1PWTbgzsoEjtayT5AUNKJXQg3v6x7tu4Kg7L0lyzV9WnIaIjUJz00iprWgNvElMmc9XRyDYHHiv2q9oC9wWw/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 en negrita 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.





 Data de la Publicación; 03-09-2019

 Fuente;  ayudadeblogger

 Publicado por;