GRAN MENÚ DESPLEGABLE EN CSS PARA TU BLOG DE BLOGGER

by Blogs Famag on septiembre 09, 2020 in blogger, featured, menú

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

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:

Su instalación es fácil, tan solo copiar el código y pegarlo en un nuevo elemento de HTML > Diseño > Elementos de pagina > Añadir un gadget “HTML-Javascript”

Para añadirlo a vuestro blog o web, basta con copiar el codigo de abajo e insertarlo alli dode querais que aparezca.

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/AVvXsEjKh9NYQz4-g-izoCzbDtsAOv_twdweQl3YlsiZa_b1tOylh8Rc3xODYHCXIPINpIM26FcV0ivh0-cpUATVk62GptPIE62o1z2SgOXdiZyhw1DV_U81EI0x5vzyYjmQorV6WBzNzsWlmrhr/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/AVvXsEiPBqgkdJTtSJLqqU21pxXXHGSbpHuJKOCblhVHwhFG74WYWJwa642zgMg2QXKvnrFLlCL8PGhntaW738ELOxTp20wxaFkbzawd81FW5NhBjzABaBjsEiyD4i8XQslOLmpKVLj4r_ThUero/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>

En este Gif podeis ver como es mas o menos.

Data de la Publicación; 09-09-2020

Fuente; amorsevillista

Publicado por;

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Sobre mi

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 "43" 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.

Copyright © BLOGS KIRADOBER