Ultimas entradas

Entradas Destacadas

PÁGINA DE BIENVENIDA

PÁGINA DE BIENVENIDA

MENÚ DESPLEGABLE EN UN GADGET HTML-JAVASCRIPT

By Blogs Famag - lunes, agosto 05, 2019

MENÚ DESPLEGABLE EN UN GADGET HTML-JAVASCRIPT .






Pués sí, hoy cumplo como se diría últimamente en Google .

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.

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

Si queréis verlo en acción copia este código y pegarlo en este probador y lo veras integro.: 




Para instalarlo en vuestro Bloc en un Gadget solo tenéis que seguir estos pasos:




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/AVvXsEj1_FVQ6raW38AoH07MC0iAMqj8QifVCh3dK6gU6eQabmFaK6UetF9WrQFhUQv-HKOdo-YQETFiZ1iFspVAGWGGVXsUd54c6ymGG8LR2GOCCyvgve90oVy_SVMooAIJt3v1pEdDXgvvZ3f6/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/AVvXsEi9-6Gk_ajk5HynI8imZC-l3mlsK3bHpSTm5iGO-IOpxL4en8eR2wjvqYUDR5WApGbSINPvmTOu6J7ACz1FgJBBDK-aqlTT4nMyRe-Rl4SJqsBQ7zYDuzcbHA1RQiIhCbzTZzM8enxE6027/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>


Despues de haber insertado el código, un clic en  "Guardar"



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

 Fuente;  amorsevillista

 Publicado por;                                                                               



  • Share:

You Might Also Like

0 comentarios