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(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
12 comentarios: