GRAN MENÚ DESPLEGABLE EN CSS PARA TU BLOC DE BLOGGER

By Blogs Famag 7:31 0 comentarios

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>
<div class="dropdown_2columns">
<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, 'width=1100,height=700,top=0px,left=100px'); return false;'><h2>SÍGUENOS en las Redes Sociales</h2></a></p>
</div>
</div>
</li>
<li><a href="#" class="drop">Sevilla FC</a>
<div class="dropdown_4columns">
<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, 'width=280,height=580,top=20px,left=100px'); 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, 'width=270,height=300,top=20px,left=100px'); 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, 'width=370,height=455,top=20px,left=100px'); 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, 'width=270,height=260,top=20px,left=100px'); 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, 'width=280,height=455,top=20px,left=100px'); 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, 'width=270,height=260,top=20px,left=100px'); 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, 'width=520,height=430,top=20px,left=100px'); return false;'>Clasificación</a> </li>
</ul>
</ul></div>
</div>
</li>
<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>
<div class="dropdown_3columns align_right">
<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>
</li>
<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;

About author: Blogs Famag

Cress arugula peanut tigernut wattle seed kombu parsnip. Lotus root mung bean arugula tigernut horseradish endive yarrow gourd. Radicchio cress avocado garlic quandong collard greens.

0 comentarios:

Suscribirse a: Enviar comentarios (Atom)

Autor

Hola Amigos lectores, voy a describiros en rasgos cortos Quien soy realmente, porque cuando entras en una página piensas como será el menda que está detrás del tinglado. Empecemos me llamo Francisco Martinez Gich natural de Canet de Mar "Barcelona" estoy retirado hace bastante tiempo, para recuperar un poco el tiempo empecé a montar un Blog en blogger después otro y otro hasta la cantidad de "53" blogs, diréis tú estás loco y yo os diré que si porque vosotros no sabéis el trabajo que conlleva todo esto y más si quieres ser un poco regular.

Mis Páginas

Blog Almacen Kiradober

ALMACEN BLOGS FMG

BLOGS KIRADOBER

TECLEANDO PARA TI 2019

TOP IMAGEN ÚNICA

BLOG IMAGEN ZERO

CARATULAS DISCOGRAFÍCAS KIRADOBER

CRONICA MUSICAL NEGRA

DISCOGRAFÍAS COMPLETAS KIKO

EL MUNDO DE KIKO

EL RINCON OSCURO DE KIRADOBER

ESCAPARATE DIGITAL 2019

FAMAG KIRADOBER

FMG TUTORIALES PARA BLOGGER

GADGETS KIRADOBERMAN

HISTORIA DE UN PUEBLO

HISTORIAS MUSICALES

IMAGEN ÚNICA TOP

LA PAGINA DE FEANCISCO

LA PAGINA DE KIKO DE BLOGGER

LA PAGINA DE LOS WIDGETS

MARQUESINAS FAMAG

MARQUESINAS KIRADOBER

mi espacio digital cero

PLANTILLAS KIRADOBER

NUBE DIGITAL KIRADOBER

PLANTILLAS PARA BLOGGER FAMAG

PRUEBAS INICIALES

RED MUNDO MUSICAL

RELAJATE, PASA, Y LEE

SLIDERS KIRADOBER

TEMAS IMPOSIBLES

TEMAS KIRADOBER

TODO ES POSIBLE EN MI BLOG

TODO MUSICA KIKO

TODO TOP VÍDEOS

TRUCOS PARA BLOGGER KIRADOBER

TUTORIALES BOGGER KIRADOBER

un territorio ignoto

EL RINCON OSCURO DE KIRADOBER