Boton para que cambien el fondo de tu blog con una imagen

1 comentó

En otros tres articulos ( 1 , 2 , 3 ) ya os mostre otros widgets en los que los visitantes podian cambiar los colores o texturas del fondo del blog a su antojo. Pues por si no teniamos bastante, aqui os presento lo ultimo de lo ultimo. Este widget diseñado por mua, permitira a los usuarios de vuestro blog 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@.


Aqui teneis el resultado y como quedara, ideal para ponerlo en la sidebar. Podeis probarlo subiendo la imagen que querais.


Subir Imagen



Si quieres ponerlo en tu blog, copia el siguiente codigo y pegalo en un gadget HTML alli donde quieras mostrarlo.

ver codigo
<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.