­
­

Ultimas entradas

ULTIMAS ENTRADAS

thumb

PÁGINA DE BIENVENIDA

thumb

ICONOS HOVER A BLANCO Y NEGRO & VICEVERSA

ICONOS HOVER A BLANCO Y NEGRO & VICEVERSA . Utilizando los filtros del CSS3 podemos obtener este efecto, en el que al pasar el cursor por cualquier imagen, esta cambia de color a...
thumb

BOTONES PARA BLOGGER HECHOS CON HTML

BOTONES PARA BLOGGER HECHOS CON HTML . Esta clase de botones grises hechos con HTML son muy utiles, porque los puedes poner donde quieras en tu web sin complicaciones.  Basta ...
thumb

PRESENTACIÓN DE IMÁGENES APILADAS EN BLOGGER

PRESENTACIÓN DE IMÁGENES APILADAS EN BLOGGER . Cuando queremos mostrar una galería de imagenes en nuestro blog, pienso que la manera estética de hacerla es fundamental.  S...
thumb

MENÚ DESPLEGABLE CON IMÁGENES PARA BLOGGER

MENÚ DESPLEGABLE CON IMÁGENES PARA BLOGGER . Es tiempo de compartir con todos los bloggeros del mundo un fabuloso menú desplegable para blogger con imágenes. Este truco para blo...
thumb

AÑADIR REFLEJO A LAS IMÁGENES CON UN SCRIPT

AÑADIR REFLEJO A LAS IMÁGENES CON UN SCRIPT . Ahora podemos hacer que las imagenes se vean como reflejadas en un espejo sin necesidad de utilizar ningún editor ni photoshop. Solamente...
thumb

PERSONALIZAR LA BARRA DE DESPLAZAMIENTO DE MÍ BLOG

PERSONALIZAR LA BARRA DE DESPLAZAMIENTO DE MÍ BLOG.   jScrollPane : Es un script de jQuery que permite cambiar la barra de desplazamiento del blog, es decir, el scrollbar del...
thumb

IMÁGENES QUE SE DESCOMPONEN CON BUSTIFY

IMÁGENES QUE SE DESCOMPONEN CON BUSTIFY. Bustify es un Javascript creado por Matthew Lein que 'rompe' cualquier imagen en una serie de cuadros. Es decir, que al pasar el cu...
thumb

MENÚ LATERAL DESLIZANTE PARA REDES SOCIALES

MENÚ LATERAL DESLIZANTE PARA REDES SOCIALES . Este es un menú para nuestro blog que tiene la particularidad de no sólo ser lateral sino también tener un pequeño efecto deslizante. Se o...
thumb

MENÚ HORIZONTAL CON EFECTO ZOOM

MENÚ HORIZONTAL CON EFECTO ZOOM. ul.arrowunderline{ list-style-type:none; margin:0; padding:0; text-align:center; font-size:16px; } ul.arrowunderline li{ display:inline; margin-right...
thumb

UN MENÚ HORIZONTAL PARA BLOGGER

UN MENÚ HORIZONTAL PARA BLOGGER. div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraOdP-dmjBGOonjA3l62yhisiSSy2p-HXxFy7uX2g9zKP2Yjp5P...
thumb

MENÚ DESPLEGBLE RESPONSIVE EN MI BLOG DE BLOGGER

MENÚ DESPLEGBLE RESPONSIVE EN MI BLOG DE BLOGGER . ¿Crear un menú desplegable Responsive en mi blog? ¿Menú desplegable gratis totalmente Responsive se muestre correctamente en un tel...
thumb

MENÚ DESPLEGABLE PARA BLOGGER V3

MENÚ DESPLEGABLE PARA BLOGGER V3 . Insertar de forma fácil y sencilla un menú desplegable para mi blog de Blogger? Con tres simples pasos  instalaras un Menú desplegable en su bl...
thumb

MENÚ DESPLEGABLE PARA BLOGGER MEGA MENÚ V2

MENÚ DESPLEGABLE PARA BLOGGER MEGA MENÚ V2 . Como siempre "La Pagina de los Widgets" te presenta temas interesantes para que lo utilices en tu blog de blogger completame...
thumb

MENÚ SENCILLO PARA BLOGGER

MENÚ SENCILLO PARA BLOGGER . Este menu gris efecto 'tab' es simple, pero a la vez efectivo y elegante. Si quieres ponerlo en tu sitio, coloca este codigo en la parte CSS de tu we...
thumb

MENÚ VERTICAL DESPLEGABLE AZUL PARA BLOGGER

MENÚ VERTICAL DESPLEGABLE AZUL PARA BLOGGER . Tras un largo periplo de widgets y gadgets para Blogger vuelvo de nuevo con un menú vertical desplegable y totalmente responsive con...
thumb

MENÚ VERTICAL PARA BLOGGER HECHO CON CSS

MENÚ VERTICAL`PARA BLOGGER HECHO CON CSS. En el día de hoy vamos a ver como agregar a un sitio web un genial menú (ya que este truco no solo sirve para los blogs de Blogger sino ta...
thumb

MENÚ HORIZONTAL CON SUBMENÚES Y UN EFECTO DE BALANCEO

MENÚ HORIZONTAL CON SUBMENÚES Y UN EFECTO DE BALANCEO . Este es un menú horizontal con submenúes y un efecto de balanceo para nuestro blog de Blogger. Fácil de colocar, tan solo un códig...
thumb

MENÚ VERTICAL PARA LA SIDEBAR DE NUESTRO BLOG CON HOVER ZOOM-OUT

MENÚ VERTICAL PARA LA SIDEBAR DE NUESTRO BLOG CON HOVER ZOOM-OUT . TEXTO ENLACE TEXTO ENLACE TEXTO ENLACE TEXTO ENLACE TEXTO ENLACE .menuzoomout ul { width: 100%; m...
thumb

MENÚ TIPO ACORDEÓN ESTILO GALERÍA DE IMÁGENES

MENÚ TIPO ACORDEÓN TIPO GALERÍA DE IMÁGENES . Uno de nuestros lectores nos preguntaba cómo se hacía un menú de estos que tienen un estilo tipo acordeón. Este específicamente fue crea...

MAGNÍFICO MENÚ DESPLEGABLE EN UN SOLO WIDGET EN CSS

By Blogs Famag - sábado, agosto 17, 2019

MAGNÍFICO MENÚ DESPLEGABLE EN UN SOLO WIDGET EN CSS .






Pero vayamos a lo que realmente nos importa y ello es este magnífico 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 necesidades, lleva incorporado un buscador interno del blog.

Si queréis verlo en acción podéis ir mi probador de códigos copiar el código y pegad lo en el probador y lo veréis tal como es. :





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

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







<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/AVvXsEiF9uasySJd_A38uHkv9ZY9e_u3uBY0cnZdaXBXDYeKvlE8PIrdk5hGPhNKVSrqKZ53smy0M9BlvStC4-EysX4cND0Id0w9Ja-Z-kK1p4u936PVoiKkHlVUXepquYCKFNjJKZyPuXvaBbkR/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/AVvXsEjrw5CaGe2keM4C2TD6vYibW8bnc1U0ZeZ1mbSRcn45Cg2gE7iL2ySOkhEcFpXVGm6mymTZ1rNlJuOKAbpE64BkVwI23k5nZ3JVLDXbwf8-rlNz-LKNgOwWaP0GSZoMDc3v0QYGmBN8CEpH/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>




Después de haber insertado el código, un clic en  "Guardar"








Data de la Publicación; 17-08-2019

 Fuente;  amorsevillista

 Publicado por;                                                                          








  • Share:

You Might Also Like

0 comentarios