- julio 20, 2020
- 0 Comments
Bienvenida
Ultimas entradas
Entrada Destacada
Te comento que lo podrás realizar de forma manual y así aumentar las vistas de tus antiguos post que tal vez los usuarios que visitan tu blog no lo hayan encontrado.
Un Headline de Noticias sirve para mostrar los temas más destacados de nuestros post. La funcionalidad del Headline de Noticias para blogger es muy fácil de realizarlo,
solo vamos a copiar un código e insertarlo en un solo widget y no necesitaran ingresar en el Editor HTML de su plantilla.
- septiembre 09, 2019
- 0 Comments
Para organizar las secciones o categoría de tu blog, aquí tienes este menú que combina los colores azul y naranja con la imagen de una flechita en cada enlace.
Este menú es ideal para ponerlo en la sidebar o columna lateral del blog. Para ello, solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML/Javascript.
Sustituye lo que esta indicado en negrita el texto y las urls de tus enlaces.
Para poner mas enlaces, solo tienes que añadir la linea <li><a href="URL">TEXTO</a></li> debajo de las otras, tantas veces como quieras.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
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
<center><div id="naranzul"><ul>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
</ul></div></center>
<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
</ul></div></center>
<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
Después de haber insertado el código, un clic en "Guardar"
- septiembre 02, 2019
- 0 Comments
así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.
Colocarlo es bastante sencillo, sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega los estilos siguientes:
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
]]></b:skin>
Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}
Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
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
<div id="menuvertical">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>
</ul>
</div>
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>
</ul>
</div>
Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> una línea como esta:
--------------------------------------------------------------------------------------------------------------------
<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>
--------------------------------------------------------------------------------------------------------------------
Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de </ul> lo siguiente:
--------------------------------------------------------------------------------------------------------------------
<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 6.1</a></li>
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
</ul>
</li>
---------------------------------------------------------------------------------------------------------------------
No es un menú fuera de lo normal pero sí es bastante útil para organizar los enlaces del blog.
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; ciudadblogger
Publicado por;
- septiembre 02, 2019
- 0 Comments
El menu que os propongo en esta ocasion no es para enlazar las secciones de vuestro blog o web,
es para enlazar vuestras cuentas en las redes sociales.
Como podeis ver, esta realizado con CSS3 y cuenta con 5 botonescon los colores caracteristicos de cada red para conectar con vuestro Twitter, Google+, Facebook, Youtube y Feed RSS.
Esta diseñado esencialmente para ponerlo en la sidebar y se ajusta al tamaño de esta automaticamente.
Para añadirlo en vuestro blog o web, tan solo teneis que copiar el codigo de abajo en un Gadget “HTML-Javascript y pegarlo donde querais mostrarlo.
Recordad que teneis que poner las urls de vuestras cuentas y la de vuestro feed donde esta indicado.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
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
<div class="menusocialvertical"><ul><li><a href="https://URL DE TU TWITTER" class="twitterboton" target="_blank">sigueme en Twitter</a></li><li><a href="https://URL DE TU GOOGLE PLUS" class="googleboton" target="_blank">añademe a Google+</a></li><li><a href="http://URL DE TU FACEBOOK" class="facebookboton" target="_blank">siguememe en Facebook</a></li><li><a href="http://URL DE TU YOUTUBE" class="youtubeboton" target="_blank">mirame en YouTube</a></li>
<li><a href="http://URL DE TU FEED RSS" class="rssboton" target="_blank">suscribete al RSS</a></li></ul></div>
<style>
.menusocialvertical { width: 100%; margin: -10px;border:5px solid #000000; }
.menusocialvertical ul { margin: 0; padding: 0; }
.menusocialvertical ul li { list-style:none; padding: 0; text-transform: none;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;box-shadow: 0px 0px 10px rgba(0,0,0,.8); inset}
.menusocialvertical ul li a { color: #fff !important; display:block;font-family:verdana;font-weight:bold;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; }
.menusocialvertical ul li a:hover { color: #ffffff !important;opacity:0.5; background-color: #cdcdcd; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
.menusocialvertical ul li .rssboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .twitterboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.menusocialvertical li .facebookboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .googleboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .youtubeboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 17.5px 45px; }
</style>
<li><a href="http://URL DE TU FEED RSS" class="rssboton" target="_blank">suscribete al RSS</a></li></ul></div>
<style>
.menusocialvertical { width: 100%; margin: -10px;border:5px solid #000000; }
.menusocialvertical ul { margin: 0; padding: 0; }
.menusocialvertical ul li { list-style:none; padding: 0; text-transform: none;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;box-shadow: 0px 0px 10px rgba(0,0,0,.8); inset}
.menusocialvertical ul li a { color: #fff !important; display:block;font-family:verdana;font-weight:bold;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; }
.menusocialvertical ul li a:hover { color: #ffffff !important;opacity:0.5; background-color: #cdcdcd; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
.menusocialvertical ul li .rssboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .twitterboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.menusocialvertical li .facebookboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .googleboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.menusocialvertical ul li .youtubeboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 17.5px 45px; }
</style>
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
- septiembre 02, 2019
- 0 Comments
Existen los menús horizontales y verticales, pero también se puede crear uno que aune estas dos características.
Y eso es lo que he hecho con este menú con forma de panel, creado únicamente con CSS3, sin ningún tipo de imagen.
Como veis, consta de 9 enlaces cada uno de un color con efecto gradient (difuminado) que, al pasar el cursor por encima de ellos aparece el numero correspondiente al recuadro.
Para ponerlo en vuestro blog o web, tan solo tenéis que poner estos dos códigos, primero el CSS, que lo pondremos en la plantilla antes de </head> y guardamos.
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Coloca este código en el buscador y dale un "Enter"
</head>
Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste
<style>
.menupanel{
width: 620px;
margin-left:-7px; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menupanel:before,
.menupanel:after {
content: "";
display: table;
}
.menupanel:after {
clear: both;
}
.menupanel {
zoom:1;
}
/* -------------------------------- */
.menupanel li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff !important;font-size:22px;
}
.menupanel li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menupanel .cover{
z-index: 2;
}
.menupanel .cover .content{
overflow: visible;
}
.menupanel .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menupanel li::after{
content: counter(li);
counter-increment: li;
font: italic bold 22px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menupanel li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menupanel.cover::after{
z-index: -1;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(2),
.menupanel li:nth-child(3){
margin-top: 0;
}
.menupanel li:nth-child(1),
.menupanel li:nth-child(4),
.menupanel li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(1) .content,
.menupanel li:nth-child(1) .close{
background-color: #2c618f;
}
.menupanel li:nth-child(2),
.menupanel li:nth-child(2) .content,
.menupanel li:nth-child(2) .close{
background-color: #91ab31;
}
.menupanel li:nth-child(3),
.menupanel li:nth-child(3) .content,
.menupanel li:nth-child(3) .close{
background-color: #714a28;
}
.menupanel li:nth-child(4),
.menupanel li:nth-child(4) .content,
.menupanel li:nth-child(4) .close{
background-color: #e58600;
}
.menupanel li:nth-child(5),
.menupanel li:nth-child(5) .content,
.menupanelli:nth-child(5) .close{
background-color: #c33a00;
}
.menupanel li:nth-child(6),
.menupanel li:nth-child(6) .content,
.menupanel li:nth-child(6) .close{
background-color: #7f5dac;
}
.menupanel li:nth-child(7),
.menupanel li:nth-child(7) .content,
.menupanel li:nth-child(7) .close{
background-color: #5672b7;
}
.menupanel li:nth-child(8),
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(8) .close{
background-color: #69003f;
}
.menupanel li:nth-child(9),
.menupanel li:nth-child(9) .content,
.menupanel:nth-child(9) .close{
background-color: #393043;
}
/* -------------------------------- */
.menupanel .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.menupanel .expanded{
opacity: .95; display: block\9;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menupanel li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menupanel li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menupanel li:nth-child(7) .content, /* 7,8,9 */
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(9) .content{
bottom: 0;
}
.menupanel li:nth-child(4) .expanded, /* 4,5,6 */
.menupanel li:nth-child(5) .expanded,
.menupanel li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menupanel .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menupanel li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menupanel .close {
display: none;
border: 5px solid #fff;
color: #fff !important;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.menupanel .cover .close{
display: block;
}
</style>
.menupanel{
width: 620px;
margin-left:-7px; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menupanel:before,
.menupanel:after {
content: "";
display: table;
}
.menupanel:after {
clear: both;
}
.menupanel {
zoom:1;
}
/* -------------------------------- */
.menupanel li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff !important;font-size:22px;
}
.menupanel li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menupanel .cover{
z-index: 2;
}
.menupanel .cover .content{
overflow: visible;
}
.menupanel .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menupanel li::after{
content: counter(li);
counter-increment: li;
font: italic bold 22px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menupanel li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menupanel.cover::after{
z-index: -1;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(2),
.menupanel li:nth-child(3){
margin-top: 0;
}
.menupanel li:nth-child(1),
.menupanel li:nth-child(4),
.menupanel li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(1) .content,
.menupanel li:nth-child(1) .close{
background-color: #2c618f;
}
.menupanel li:nth-child(2),
.menupanel li:nth-child(2) .content,
.menupanel li:nth-child(2) .close{
background-color: #91ab31;
}
.menupanel li:nth-child(3),
.menupanel li:nth-child(3) .content,
.menupanel li:nth-child(3) .close{
background-color: #714a28;
}
.menupanel li:nth-child(4),
.menupanel li:nth-child(4) .content,
.menupanel li:nth-child(4) .close{
background-color: #e58600;
}
.menupanel li:nth-child(5),
.menupanel li:nth-child(5) .content,
.menupanelli:nth-child(5) .close{
background-color: #c33a00;
}
.menupanel li:nth-child(6),
.menupanel li:nth-child(6) .content,
.menupanel li:nth-child(6) .close{
background-color: #7f5dac;
}
.menupanel li:nth-child(7),
.menupanel li:nth-child(7) .content,
.menupanel li:nth-child(7) .close{
background-color: #5672b7;
}
.menupanel li:nth-child(8),
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(8) .close{
background-color: #69003f;
}
.menupanel li:nth-child(9),
.menupanel li:nth-child(9) .content,
.menupanel:nth-child(9) .close{
background-color: #393043;
}
/* -------------------------------- */
.menupanel .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.menupanel .expanded{
opacity: .95; display: block\9;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menupanel li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menupanel li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menupanel li:nth-child(7) .content, /* 7,8,9 */
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(9) .content{
bottom: 0;
}
.menupanel li:nth-child(4) .expanded, /* 4,5,6 */
.menupanel li:nth-child(5) .expanded,
.menupanel li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menupanel .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menupanel li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menupanel .close {
display: none;
border: 5px solid #fff;
color: #fff !important;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.menupanel .cover .close{
display: block;
}
</style>
Ahora, alli donde queramos mostrarlo, pegamos el siguiente codigo, en un gadget HTML/Javascript sustituyendo lo que esta en color rojo por los textos y las urls de los enlaces que queramos poner:
<ul class="menupanel">
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
</ul>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
</ul>
En Blogger también podéis añadir los 2 códigos juntos en un gadget HTML/Javascript, eso ya a gusto de cada uno/a.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
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
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
- septiembre 02, 2019
- 0 Comments
