MENÚ VERTICAL DESPLEGABLE PARA BLOGGER

MENÚ VERTICAL DESPLEGABLE PARA BLOGGER.

Ayer me dio Buscar por internet los menús que habían y encontré uno del Mítico AmorSevillista que tenia uno con cuatro colores diferentes que me Molaron un montón y aquí os lo traigo.

Se trata de un menú horizontal con Menús sin Submenús para blogs que requieran pocas pestañas, 

Para implantarlo en vuestros blog solo necesitaréis introducir el código en un gadget en Html/Javascript. Os recomiendo por su longitud, situarlo bajo la cabecera.

Yo lo he personalizado con mis colores (blanco y rojo), pero os lo dejo con otros colores.

Si el tamaño os resulta bastante grande, reducir el texto donde dice: font-size: 10pt; colocar 8-7, menos, nó, porque se verían las letras muy pequeñas.

Un clic en “Diseño”

 Clic en “Añadir un gadget”

 Busca el widget que dice “HTML-Javascript” y ábrelo

 Coloca el siguiente codigo en el interior

Estos son los códigos para la plantilla con fondo blanco. 

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Verdana, Arial,comic;
font-size: 10pt;

}

#menu div.barraMenu {

text-align: center;
}

#menu div.barraMenu a.botonMenu {

background-color: #FFFFFF;
BORDER:SOLID 1PX;
border-color:#6A0707;
color: #6A0707;

-moz-border-radius: 6px ;
-Webkit-border-radius: 6px ;

cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #6A0707;

color: WHITE;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #791B10;
color:red;
}
</style>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 1</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 2</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 3 B</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 4</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 5</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 6</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 7</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 8</b> </a>
</div></div>

Esta para una plantilla blanca con el fondo Negro y letras Blancas

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Verdana, Arial,comic;
font-size: 10pt;

}

#menu div.barraMenu {

text-align: center;
}

#menu div.barraMenu a.botonMenu {

background-color: #000000;
BORDER:SOLID 1PX;
border-color:#6A0707;
color: #ffffff;

-moz-border-radius: 6px ;
-Webkit-border-radius: 6px ;

cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #6A0707;

color: WHITE;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #791B10;
color:red;
}
</style>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 1</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 2</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 3 B</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 4</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 5</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 6</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 7</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 8</b> </a>
</div></div>

Esta para una plantilla blanca con el fondo beig o marrón y letras Blancas

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Verdana, Arial,comic;
font-size: 10pt;

}

#menu div.barraMenu {

text-align: center;
}

#menu div.barraMenu a.botonMenu {

background-color: #CEB37C;
BORDER:SOLID 1PX;
border-color:#6A0707;
color: #ffffff;

-moz-border-radius: 6px ;
-Webkit-border-radius: 6px ;

cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #453516;

color: WHITE;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #ffffff;
color:brown;
}
</style>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 1</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 2</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 3 B</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 4</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 5</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 6</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 7</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://elrinconoscurodekiradober.blogspot.com/"><b>MENÚ 8</b> </a>
</div></div>

Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.

 Fecha de la Publicación; 06-01-2019

 Fuente; amorsevillista

 Publicado por;