Los menús desplegables para blogger, le dan al usuario que visita su blog a escoger las diferentes categorías que usted las destaco a en su menú.
Obtener nuevos y fabulosos menús desplegables para blogger y que funcionen en cualquier blog de blogger, es lo que La Pagina de Kiko de Blogger.com , te ayudara.
Renueve su blog de blogger con temas únicos e interesantes, convirtiéndose en un experto en blogger.
El menú desplegable para blogger que les voy a presentar solo tendrán que insertarlo en un solo widget y no necesitaran introducirlo en el editor HTML de su plantilla, es un código CSS simple que se inserta en un widget de su blog de blogger, tendrán que realizar unos simples cambios para que se muestre las categorías que ustedes quieran.
Además este nuevo menú desplegable para blogger, funciona perfectamente en todos los navegadores como Firefox, Google Chrome, Internet Explorer etc.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
Después de haber insertado el código, un clic en "Guardar"
<style>
/*------Stard by Ayudadeblogger.com--------*/
#ayudadeblogger-menu, #ayudadeblogger-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#ayudadeblogger-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#ayudadeblogger-menu:before,
#ayudadeblogger-menu:after {
content: "";
display: table;
}
#ayudadeblogger-menu:after {
clear: both;
}
#ayudadeblogger-menu {
zoom:1;
}
#ayudadeblogger-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#ayudadeblogger-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#ayudadeblogger-menu li:hover > a {
color: #fafafa;
}
*html #ayudadeblogger-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#ayudadeblogger-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#ayudadeblogger-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#ayudadeblogger-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#ayudadeblogger-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#ayudadeblogger-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#ayudadeblogger-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#ayudadeblogger-menu ul a:hover {
background-color: #B40404;
background-image: -moz-linear-gradient(#B40404, #B40404);
background-image: -webkit-gradient(linear, left top, left bottom, from(#B40404), to(#B40404));
background-image: -webkit-linear-gradient(#B40404, #B40404);
background-image: -o-linear-gradient(#B40404, #B40404);
background-image: -ms-linear-gradient(#B40404, #B40404);
background-image: linear-gradient(#B40404, #B40404);
}
#ayudadeblogger-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#ayudadeblogger-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#ayudadeblogger-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#ayudadeblogger-menu ul li:first-child a:hover:after {
border-bottom-color: #B40404;
}
#ayudadeblogger-menu ul ul li:first-child a:hover:after {
border-right-color: #B40404;
border-bottom-color: transparent;
}
#ayudadeblogger-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="ayudadeblogger-menu">
<li><a href="/">Inicio</a></li>
<li>
<a href="#">Temas</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Farandula</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Deportes</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Entretenimiento</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Musica</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li><a href="#">Contactos</a></li>
</ul>
/*------Stard by Ayudadeblogger.com--------*/
#ayudadeblogger-menu, #ayudadeblogger-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#ayudadeblogger-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#ayudadeblogger-menu:before,
#ayudadeblogger-menu:after {
content: "";
display: table;
}
#ayudadeblogger-menu:after {
clear: both;
}
#ayudadeblogger-menu {
zoom:1;
}
#ayudadeblogger-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#ayudadeblogger-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#ayudadeblogger-menu li:hover > a {
color: #fafafa;
}
*html #ayudadeblogger-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#ayudadeblogger-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#ayudadeblogger-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#ayudadeblogger-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#ayudadeblogger-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#ayudadeblogger-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#ayudadeblogger-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#ayudadeblogger-menu ul a:hover {
background-color: #B40404;
background-image: -moz-linear-gradient(#B40404, #B40404);
background-image: -webkit-gradient(linear, left top, left bottom, from(#B40404), to(#B40404));
background-image: -webkit-linear-gradient(#B40404, #B40404);
background-image: -o-linear-gradient(#B40404, #B40404);
background-image: -ms-linear-gradient(#B40404, #B40404);
background-image: linear-gradient(#B40404, #B40404);
}
#ayudadeblogger-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#ayudadeblogger-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#ayudadeblogger-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#ayudadeblogger-menu ul li:first-child a:hover:after {
border-bottom-color: #B40404;
}
#ayudadeblogger-menu ul ul li:first-child a:hover:after {
border-right-color: #B40404;
border-bottom-color: transparent;
}
#ayudadeblogger-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="ayudadeblogger-menu">
<li><a href="/">Inicio</a></li>
<li>
<a href="#">Temas</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Farandula</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Deportes</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Entretenimiento</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li>
<a href="#">Musica</a>
<ul>
<li><a href="#">Farandula</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Entretenimiento</a></li>
<li><a href="#">Musica</a></li>
</ul>
</li>
<li><a href="#">Contactos</a></li>
</ul>
Realiza estos cambios:
He marcado de tres diferentes colores en las cuales se identifica, los cambios que tendrán que realizar.
Los numerales que están marcados de color azul #, tendrán que insertar las URLs correspondientes en cada una de ellas.
El texto que esta marcado de color negrita es el nombre principal de cada puesto del menú, cámbialos por el nombre de la categoría que quieras mostrar.
Y por ultimo el texto que esta marcado de color verde, tendrán que cambiarlos por lo nombres que ustedes quieran.
Eso es todo, ahora dale un clic en “Guardar” y ubíquenlo debajo de la cabecera principal.
Nota: Si desean cambiar el color rojo del desplegable, solo basta con buscar este código B40404 y remplazar todos los códigos de color que tienen esa descripción por el código de color que quieran.
Data de la Publicación; 03-09-2019
Fuente; ayudadeblogger
Publicado por;
