cambiar el fondo, simplemente haciendo click en el boton 'Subir Imagen'.
Si, como lo estais leyendo, cualquier visitante podra subir la imagen
que quiera desde su ordenador y establecerla como fondo del blog. No
importa el tamaño que tenga, esta se expandira automaticamente. Sin
duda, un elemento curioso que sorprendera y entretendra a mas de un@.
Si quieres ponerlo en tu blog, copia el siguiente codigo y pegalo en un gadget HTML alli donde quieras mostrarlo.
<div align="center"><div style="background-image:
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2JhKDIyMCwgMjI0LCAyMjMsIDAuNjM1KSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHg9Ii0yMC43MTA3JSIgeT0iLTQxLjQyMTQlIiB3aWR0aD0iMTQxLjQyMTQlIiBoZWlnaHQ9IjI4Mi44NDI3JSIgZmlsbD0idXJsKCNnKSIgLz48L3N2Zz4=);
background-image:
-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 162, color-stop(0%,
rgba(220, 224, 223, 0.635)), color-stop(100%, #000000));
background-image: -webkit-radial-gradient(center bottom,
farthest-corner, rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: -moz-radial-gradient(center bottom, farthest-corner,
rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: -ms-radial-gradient(center bottom, farthest-corner,
rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: -o-radial-gradient(center bottom, farthest-corner,
rgba(220, 224, 223, 0.635) 0%, #000000 100%);
background-image: radial-gradient(farthest-corner at center bottom,
rgba(220, 224, 223, 0.635) 0%, #000000
100%);padding:15px;width:200px;-moz-border-radius:10px;
-webkit-border-radius: 10px; border-radius: 10px;border:3px solid
#cdcdcd;"><a href="http://redeando.blogspot.com"
target="_blank"><img border="0"
src="http://3.bp.blogspot.com/-XgNLG-uOV48/UgF2swOgzrI/AAAAAAAAKwE/VPRWDrSHtnk/s1600/CAMBIAR+FONDO.png"
/></a><input id="background_input"
type="file"/><boton id="upload_button">Subir
Imagen</boton></div></div>
<link
href='http://fonts.googleapis.com/css?family=Cabin+Condensed:400,700'
rel='stylesheet' type='text/css'>
<style>
body {
background-size: cover;
background-position: center center;
}
input[type="file"] {
display: none
}
boton {
color: rgba(255, 255, 255, 0.85);
font-family: 'Cabin Condensed', sans-serif;
letter-spacing: 2px;cursor:pointer;
font-size: 20px;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
border: none;
border-radius: 5px;
padding: 5px 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0
rgba(0, 0, 0, 0.2);
}
boton:hover {opacity:0.7}
boton:active {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.25);
}
</style>
<script>
var file,
render;
document.getElementById("upload_button").addEventListener("click",
function(){
document.getElementById("background_input").click();
}, false);
document.getElementById("background_input").addEventListener("change",
function(ev){
file = ev.target.files[0];
if(!file.type.match("image.*")) {
alert("This file isn't image or it's unsupported format");
return;
}
reader = new FileReader();
reader.addEventListener("load", (function(theFile) {
return function(e) {
document.body.style.backgroundImage = "url('" + e.target.result +
"')";
};
})(file), false);
reader.readAsDataURL(file);
}, false);
</script>
Si tienes Blogger, tan solo tienes que hacer click en este boton y se añadira automaticamente como un gadget mas.
0 comentarios:
Publicar un comentario
muchas gracias por comentar ;)