Esta íntegramente realizado con CSS, es decir que no utiliza ninguna imagen de fondo.
Para ponerlo en Blogger puedes añadir si quieres los dos códigos juntos en un gadget HTML/Javascript.
Y si quieres ponerlos por separado, primero añade el codigo CSS en la plantilla antes entre las etiquetas <head> y guardas.
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 type="text/css">
.violetagradius{width:100%;
height:52px;z-index:3000;
}
.izmvg{float:left;
width:40px;
height:52px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
}
.izmvg,.demvg,.violetagradius a{background: -moz-linear-gradient(bottom, #663399, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#663399), to(#FFFFFF));
border: 2px solid #444444;
}
.demvg{-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
float:left;
width:40px;
height:52px;
border-left:none;
}
.violetagradius a{float:left;
display:block;
height:52px;
border-left:none;
font-family:Helvetica;
line-height:52px;
font-size:18px;
font-weight:900;
text-decoration:none;
color:#FFFFFF !important;
padding:0px 30px 0px 30px;
border-right: 2px solid #444444;-webkit-text-shadow: 2px 1px 2px #000000;-moz-text-shadow: 2px 1px 2px #000000;text-shadow: 2px 1px 2px #000000;
}
.violetagradius a:hover{ background: -moz-linear-gradient(bottom, #441177, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#441177), to(#FFFFFF));
color:#FFFFCC !important;
}
.clear{clear:both;
}
</style>
.violetagradius{width:100%;
height:52px;z-index:3000;
}
.izmvg{float:left;
width:40px;
height:52px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
}
.izmvg,.demvg,.violetagradius a{background: -moz-linear-gradient(bottom, #663399, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#663399), to(#FFFFFF));
border: 2px solid #444444;
}
.demvg{-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
float:left;
width:40px;
height:52px;
border-left:none;
}
.violetagradius a{float:left;
display:block;
height:52px;
border-left:none;
font-family:Helvetica;
line-height:52px;
font-size:18px;
font-weight:900;
text-decoration:none;
color:#FFFFFF !important;
padding:0px 30px 0px 30px;
border-right: 2px solid #444444;-webkit-text-shadow: 2px 1px 2px #000000;-moz-text-shadow: 2px 1px 2px #000000;text-shadow: 2px 1px 2px #000000;
}
.violetagradius a:hover{ background: -moz-linear-gradient(bottom, #441177, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#441177), to(#FFFFFF));
color:#FFFFCC !important;
}
.clear{clear:both;
}
</style>
Aquí teneis el codigo HTML para colocarlo alli donde quieras mostrar el menu, escribiendo los enlaces donde pone URL y el texto donde esta indicado en color rojo. Si quieres añadir mas enlaces, solo tienes que poner la linea <a href="URL">TEXTO</a> a continuacion de las otras, tantas veces como quieras.
<div class="violetagradius"><span class="izmvg"></span><a href="URL">TEXTO</a><a href="URL">TEXTO</a><a href="URL">TEXTO</a><span class="demvg"></span></div>
Despues de haber insertado el código, un clic en "Guardar"
Fecha de la Publicación; 29-07-2019
Fuente; redeando
Publicado por;
