GRAN MENÚ DESPLEGABLE EN CSS PARA TU BLOC DE BLOGGER

GRAN MENÚ DESPLEGABLE EN CSS PARA TU BLOC DE BLOGGER.

Antes de nada quiero dar las gracias a todos aquellos que me habéis felicitado en este día tan especial para mí en las distintas Redes Sociales.
Pués sí, hoy cumplo como se diría últimamente en Google, "medio siglo +1".

Pero vayamos a lo que realmente nos importa y ello es este mágnifico menú desplegable que se está utilizando en muchísimos blog

y es realmente útil para mostrar gran información de contenido sin saturar el diseño.

Entendiendo un poco de CSS,  lo podéis configurar y adaptar a vuestras nesecidades, lleva incorporado un buscador interno del blog.

Lo podemos instalar bajo la cabecera del blog, añadiendo un gadget HTML/JAVA e introduciendo el código siguiente:

Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

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

4-Coloca el siguiente codigo en el interior

<style>
body, ul, li {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
text-align:left;
}
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:33px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #A60202;
background: -moz-linear-gradient(top, #D10303, #840000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D10303), to(#840000));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #fff;
background: -moz-linear-gradient(top, #fff, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #fff;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("http://i40.servimg.com/u/f40/13/20/23/83/drop11.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://i40.servimg.com/u/f40/13/20/23/83/drop11.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#fff;
background: -moz-linear-gradient(top, #fff, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
color:#000;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #000;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#B10E02;
}
#menu li:hover div a:hover {
color:#000;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Better style on light background */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#000;
color: #fff;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#fff;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
#searchthis {
float:right;
}
#search-btn {
background:#ffffff;
width:60px;
float:center;
margin-top:5px;
}
#search-box {
width:180px;
float:center;
margin-top:5px;
}
</style>
<ul id="menu">
<li><a href="http://www.amorsevillista.com/" class="drop">INICIO</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Bienvenidos !</h2>
</div>
<div class="col_2">
<img src="https://lh4.googleusercontent.com/-e4im_YFGbrI/AAAAAAAAAAI/AAAAAAAAAEo/Gy1gc7w34Rk/s102-c-k/photo.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p>Amor Sevillista, es un blog con temática sobre el Sevilla FC, con trucos y tutoriales para Blogger.</p>
</div>
<div class="col_2">
<p><a class='barraMenu' href='http://www.sevillistasporelmundo.com/h69-sigueamor' onclick='window.open(this.href, this.target, &apos;width=1100,height=700,top=0px,left=100px&apos;); return false;'><h2>SÍGUENOS en las Redes Sociales</h2></a></p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">Sevilla FC</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Equipos</h2>
</div>
<div class="col_1">
<h3>S.F.C.</h3>
<ul>
<ul class="greybox">
<li><a href='http://www.amorsevillista.com/2010/02/plantilla-sfc_24.html' >Plantilla</a></li>
<li><a class='barraMenu' href='http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm' onclick='window.open(this.href, this.target, &apos;width=280,height=580,top=20px,left=100px&apos;); return false;'>Clasificación</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=300,top=20px,left=100px&apos;); return false;'>Resultados</a></li>
</ul>
</ul></div>
<div class="col_1">
<h3>Atlético</h3>
<ul>
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/2010/01/plantilla-sfc-atletico.html">Plantilla</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm' onclick='window.open(this.href, this.target, &apos;width=370,height=455,top=20px,left=100px&apos;); return false;'>Clasificación 2ªB</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultados-2b-h35.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=260,top=20px,left=100px&apos;); return false;'>Resultados </a></li>
</ul>
</ul></div>
<div class="col_1">
<h3>C-Gº10</h3>
<ul>
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/p/sevilla-c.html">Plantilla</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm' onclick='window.open(this.href, this.target, &apos;width=280,height=455,top=20px,left=100px&apos;); return false;'>Clasificación</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=260,top=20px,left=100px&apos;); return false;'>Resultados</a></li>
</ul>
</ul></div>
<div class="col_1">
<h3>Femenino</h3>
<ul>
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/p/sevilla-femino.html">Plantilla</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/h33-clasificacion-femino' onclick='window.open(this.href, this.target, &apos;width=520,height=430,top=20px,left=100px&apos;); return false;'>Clasificación</a> </li>
</ul>
</ul></div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li><a href="#" class="drop">Secciones</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/2010/05/indice-de-entradas.html">Indice de Entradas</a></li>
<li><a href="http://www.amorsevillista.com/2010/12/tabla-de-colores.html">Tabla de Colores</a></li>
<li><a href="http://www.amorsevillista.com/p/pruebas-en-html.html">Pruebas en HTML</a></li>
<li><a href="http://www.amorsevillista.com/p/conversor-html.html">Conversor HTML</a></li>
<li><a href="http://www.amorsevillista.com/2012/03/solicita-tu-cabecera.html">Solicita tu Cabecera</a></li>
<li><a href="http://www.amorsevillista.com/p/escribe-para-as.html">Escribe para A.S.</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">Trucos Blogger</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Lista de Trucos</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/search/label/gadget">Gadget</a></li>
<li><a href="http://www.amorsevillista.com/search/label/menu">Menú</a></li>
<li><a href="http://www.amorsevillista.com/search/label/formulario">Formularios</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/search/label/twitter">Twitter</a></li>
<li><a href="http://www.amorsevillista.com/search/label/facebook">Facebook</a></li>
<li><a href="http://www.amorsevillista.com/search/label/slider">Slider</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/search/label/entradas">Entradas</a></li>
<li><a href="http://www.amorsevillista.com/search/label/fondos">Fondos</a></li>
<li><a href="http://www.amorsevillista.com/search/label/iconos">Iconos</a></li>
</ul>
</div>
<div class="col_3">
<h2>Algunos ejemplos de Trucos</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwoNYigs3byeBYNL3EogpaMW9uurQE8J3_Igh__QUGQAZKVGT41FnqeTlBKJktS1qcwVL6nK8lXOHLwxGcG5tT1D2VNkT7T-4M4pC9nE2bce363Hs5xrf8OnKvK96gnIxAJwlbSWptMTr/s1600/Sin+t%25C3%25ADtulo-1.gif" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Al igual que el año pasado de nuevo os traigo el gadget donde vamos a mostrar las Web Oficiales de los distintos equipos de la Primera División. <a href="http://www.amorsevillista.com/2012/06/gadget-de-equipos-de-la-liga-bbva.html">Leer más...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5753EUmP9N_4B1aU2t6znqOeLWdEmAiK83WALDXlsF6YRz3hWIrMFz88WHL3P35HJgF7O4rxDzKxW6xOZvtJN1KdKaGspmqxzgVI_9kF7llBgqXopANuSGqS5MKj59RJK8PRH2UO4OnXo/s1600/MENU.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Normalmente todos los Blog usamos un menú de navegación en la parte superior del blog que ayuda a los lectores a navegar y organizar facilmente nuestros enlaces. <a href="http://www.amorsevillista.com/2012/07/menu-horizontal-solo-con-css.html">Leer más...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
<li><a href="#" class="drop">Multimedia</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/p/descargas-del-sevilla-fc_11.html">Descargas</a></li>
<li><a href="http://www.amorsevillista.com/p/videos-del-sevilla-fc.html">Videos</a></li>
<li><a href="http://www.amorsevillista.com/p/sonidos-sevillistas.html">Audio</a></li>
<li><a href="http://www.amorsevillista.com/p/fondos-blogger-del-sevilla-fc.html">Fondos S.F.C. Blogger</a></li>
<li><a href="http://www.amorsevillista.com/p/giffaviconcursor-del-sevilla-fc.html">Gifs,Favicón</a></li>
<li><a href="http://www.amorsevillista.com/p/trivial-sevillista.html">Juegos</a></li>
</ul>
</div>
</div>
</li>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form>
</ul>

Listo a Disfrutarlo.

Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis con el nombre Menú desplegable en CSS

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

 Fuente;

 Publicado por;