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.
A continuación mire su demostración en
mi blog de demos
Ahora nos dirigimos a trabajar
Ir a Blogger
Primer Paso:
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='"loading" + 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcY52aEE-6K3uTarp3GhRDwCzgYtKLDDbbZgsRzrrP83DMlEXlH81LfzjFwe5hAe-Dvw2Z3IXsuK4wLOHKKuSPO0GpwYZQBbrHHTPa_N15Sy1ENg0nGSKKpSJ9Oz_JuBK6hK3GZb6kAlY/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/AVvXsEhcY52aEE-6K3uTarp3GhRDwCzgYtKLDDbbZgsRzrrP83DMlEXlH81LfzjFwe5hAe-Dvw2Z3IXsuK4wLOHKKuSPO0GpwYZQBbrHHTPa_N15Sy1ENg0nGSKKpSJ9Oz_JuBK6hK3GZb6kAlY/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/AVvXsEgBOwl4j2ck9eZtKUwXHTsc35cz8yvEt1cCrulvzE4w0DuZwrU6mzkGwrl63qnLxuYb8fB75QYZVy7wLCR6tQ8PM8IDRBe4tmhJVdtEZwqP54bFN9PeySXFD7Dx8JK9AdRdOrC0mEnT1PY/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/AVvXsEiONokZ_f28PoAqIu74fHyo6QorLHDCT8L5DVuqcFX1zfEccfzeU5LIO128LKkOOmC2sifDSiEY7ArHOSVXK_KTRQl4-CrLVBMgVMsOik-80DOUTaltdIBns96mOL78qWmdFWCoBRbkLUE/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/AVvXsEiONokZ_f28PoAqIu74fHyo6QorLHDCT8L5DVuqcFX1zfEccfzeU5LIO128LKkOOmC2sifDSiEY7ArHOSVXK_KTRQl4-CrLVBMgVMsOik-80DOUTaltdIBns96mOL78qWmdFWCoBRbkLUE/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/AVvXsEjGiTwuFhAlJMySzKPGLtTbukRAKoTFND3WUFL96N0Fvg4D2fPlZ1TbS2g6uU97sDvnFVIwBgg0Y7Lz6z-6P6V-k4kppiV_pWVouc61Lt8Uyt9y0PIspMydW4nYYoeLBV65okbPcP8E6vQ/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/AVvXsEguSdQEatIpiwyBEbona8vTeL9aisIOxvU1bJra3VjA54EXYcxN3aBod6ReQcobf4pIpLvoxcLlOCwUEUKBBI9AD8l9BxagvY5-Nn27clyvxrqc-LY93O6c6wT7njjrIo_BuoEtOjdIEMk/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/AVvXsEihw1IAFynwPmJjR5qnvbXn48Vd_PGOzdaCY7Ev8qGC8c66HBRkdIWBax74Arf7m8g4RUhG3Ij0-MiHdXcINBXeCqm4budy7Gv5ZoUkGhQkh2fXAVOdpOUxSAsfwl41SuIw-qGKvaDsOFc/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/AVvXsEj8Qc-HgPEoeQgK3yjYqDXXD1v2PDC0TmjNkFRsmMsuwLCV4xnBNIaXvXyd4aGaowIecbEz6SUEDAfnAgfr2X0-GTfm0HwVg9NR7ZfaW8-YzlPalSjQTSGJVJ5xrxB0FAgr-04hbhVdsS0/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/AVvXsEhPWlHYkbAvJJjhXyOWiD8A9wzzLQ1p9UDn2VV-dzYE3TAi7Z3jYHvYVlQqIQA9ypY_HqA6EERD3J8cZwRWhyWD3y6Ov9h6Azw_aMxFV7BwMnWb4wsZd-EfogZwqKWV5HV4UJGZ031w-VQ/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
me gusta mucho este menu, pero se podria poner mas abajo ?? solo por curiosidad
ResponderEliminarhola 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
ResponderEliminarjo supongo que no puedo poner el menú debajo de la cabecera, que rabia queda tan bonito
ResponderEliminarHola José si es posible, colocar el menú debajo de la cabecera, a continuacion te dejo como hacerlo.
ResponderEliminarSi 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.
http://cactusyaficiones.blogspot.com.es/
ResponderEliminardioss 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 ...
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.
ResponderEliminarSaludos
Este comentario ha sido eliminado por el autor.
ResponderEliminarLUIS COMO INTEGRO CONTENIDOS AL MENU Y A LOS SUB MENUS. TE DEJO EL E-MAIL. expopuntaarte@gmail.com. TE PIDO SI ME AYUDAS. DARWIN
ResponderEliminarpara que funcione te ha faltado cerrar los scripts uno y tres.
ResponderEliminarHola, esta todo perfectamente.
EliminarSaludos.
hola una pregunta, su menu me funciona muy bien , pero tengo una curiosidad, el menu se podria haber hacia abajo en vez de horizontalmente????,
ResponderEliminarHola, 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.
ResponderEliminarDesde ya muchas gracias.