Hoy os traigo este menú diseñado por mí, al que he llamado así por los colores que he utilizado.
Cuando pasas el cursor por encima, los colores del fondo y texto se invierten.
Para l@s que os guste este menu tan alegre, o simplemente quede bien en vuestro blog o web y lo querais poner.Cuando pasas el cursor por encima, los colores del fondo y texto se invierten.
Lo primero es ir a la plantilla HTML y antes de ]]></b:skin> añadir los estilos CSS
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
1 Un clic en “Plantilla”
2 Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
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,
3 Busca el siguiente código
]]></b:skin>
/* Menu sol y noche
diseño, design: Johnny Vega
REDEANDO - http://redeando.blogspot.com/
----------------------------------------------- */
.redeando1 {
float: left;
width: 100%;
margin: 0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98L1CWTdu_nsf_exJTD1uhf_nUwbsDwLbSrNYFt500rSS1pSH2Qh4pmwLEjdZogusv27nsl8lTBbqvktQAzuyEyDtMRcwi2mkC_AdzKAlXkDrO5q-pxg_IUVtQLWhsFZK5J_XcUGxxVEl/s1600/buttonmenu.png);
font-size: 12px;
text-decoration: bold;
}
.redeando1 li {display: inline;}
.redeando1 li a, .menujohnny li a:visited {
float: left;
padding: 10px;
text-decoration: none;
color: #000;
font-size: 12px;
font-family: Arial Black;
border-right: 3px solid #131313;
border-top: 2px solid #131313;
border-bottom: 2px solid #131313;
text-shadow: 5px 1px 5px #fff;
}
.redeando1 li a:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyi3pDFZURl2lzQvwZJ7HWS4ZFveOP3Meqh9vUJwlhuulxIxZVk-F35Y5DPfSyTKMktHpnkz1QzmWcuC83eyhPNJ2cMJXLIq8UQvGCYrf_9onZLXQqVCLCTDrE0nPhb-yUvfW0ZZbSi4VW/s1600/buttonover.png) center center repeat-x;
font-size: 12px;
text-decoration: bold;
color: #FFF545;
}
diseño, design: Johnny Vega
REDEANDO - http://redeando.blogspot.com/
----------------------------------------------- */
.redeando1 {
float: left;
width: 100%;
margin: 0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98L1CWTdu_nsf_exJTD1uhf_nUwbsDwLbSrNYFt500rSS1pSH2Qh4pmwLEjdZogusv27nsl8lTBbqvktQAzuyEyDtMRcwi2mkC_AdzKAlXkDrO5q-pxg_IUVtQLWhsFZK5J_XcUGxxVEl/s1600/buttonmenu.png);
font-size: 12px;
text-decoration: bold;
}
.redeando1 li {display: inline;}
.redeando1 li a, .menujohnny li a:visited {
float: left;
padding: 10px;
text-decoration: none;
color: #000;
font-size: 12px;
font-family: Arial Black;
border-right: 3px solid #131313;
border-top: 2px solid #131313;
border-bottom: 2px solid #131313;
text-shadow: 5px 1px 5px #fff;
}
.redeando1 li a:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyi3pDFZURl2lzQvwZJ7HWS4ZFveOP3Meqh9vUJwlhuulxIxZVk-F35Y5DPfSyTKMktHpnkz1QzmWcuC83eyhPNJ2cMJXLIq8UQvGCYrf_9onZLXQqVCLCTDrE0nPhb-yUvfW0ZZbSi4VW/s1600/buttonover.png) center center repeat-x;
font-size: 12px;
text-decoration: bold;
color: #FFF545;
}
4 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
Luego, pegamos el codigo alli donde lo queramos mostrar
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
<ul class="redeando1">
<b>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
</b>
</ul>
<b>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
</b>
</ul>
Sustituimos donde pone URL y NOMBRE por la direccion y titulo del enlace
y asi nos quedara, como tiene que quedar.
Despues de haber insertado el código, un clic en "Guardar"
Fuente; redeando
Publicado por;
0 comentarios