Mostrando entradas con la etiqueta Mis Diseños. Mostrar todas las entradas

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

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TeKmsOGXJGsblNbLAYnuFAQXUHu69M05Om72GRhn_pwwU77NZW5vcKS7nZs71VmGWvBYjUmASObaYLS9DNsor9CQt4JlhDOz3EFTu1uEn_SoL6St_eTJNWENtt_GoB_O8rVnk0SMg_s/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.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TeKmsOGXJGsblNbLAYnuFAQXUHu69M05Om72GRhn_pwwU77NZW5vcKS7nZs71VmGWvBYjUmASObaYLS9DNsor9CQt4JlhDOz3EFTu1uEn_SoL6St_eTJNWENtt_GoB_O8rVnk0SMg_s/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>

leer articulo ➨

Mini calendario para el blog

5 comentaron

En estas transiciones de estacion veraniega, se me ha ocurrido diseñar este pequeño calendario a modo de widget para el que guste de ponerlo en su blog. Utilizando CSS3, una imagen para el fondo y un poquillo de Javascript, me ha salido este mini almanaque con un diseño sencillo a la par que elegante. Se actualiza automaticamente y, si pasais el raton por encima, aumenta ligeramente de tamaño.

Para ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y pegarlo alli donde quieras mostrarlo. Si lo prefieres, tambien telo puedes descargar haciendo clic aqui.

ver codigo

<center><table><tbody><tr><td><div class="app"><div class="app-calendario"><div id="weekday"></div><div id="day"></div><div style="font-size:16px;line-height: 10px;position:relative;left:-50px;bottom:60px;font-weight:bold;font-family: Century Gothic !important;-webkit-transform: rotate(2000deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);">
<a href="http://redeando.blogspot.com" target="_blank"><script>
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
if(myday == 0)
day = " "
else if(myday == 1)
day = " "
else if(myday == 2)
day = " "
else if(myday == 3)
day = " "
else if(myday == 4)
day = " "
else if(myday == 5)
day = " "
else if(myday == 6)
day = " "
if(mymonth == 0)
month = "Enero "
else if(mymonth ==1)
month = "Febrero "
else if(mymonth ==2)
month = "Marzo "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Mayo "
else if(mymonth ==5)
month = "Junio "
else if(mymonth ==6)
month = "Julio "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setiembre "
else if(mymonth ==9)
month = "Octubre "
else if(mymonth ==10)
month = "Noviembre "
else if(mymonth ==11)
month = "Diciembre "

document.write(month+ "<\/font>");
</script></a></div></div></div></td></tr></tbody></table></center>
<script>
(function() {

var date = new Date(),
weekday = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"];

document.getElementById('weekday').innerHTML = weekday[date.getDay()];
document.getElementById('day').innerHTML = date.getDate();

}) ();
</script>
<style>
.app { text-align: center; }
.app-calendario a{color:#000000 !important;}
.app-calendario {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGi8xI8byJaeWPMC0L0PPBuIWeJBuGsaVEtLD2R7Z54Qlg_4QrwqNbJPMcEVJvZM_lq6_Oy1fpD2yIr3tOZaS8whuS6CO8b3JPwzvZqLOaaDI150f6BNZzIn4V8ResOTk9tn6QGoHq4k/s1600/calendario1.png);
height: 128px;font-family: Century Gothic;cursor:pointer;
margin-bottom: 24px;
width: 128px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

}
.app-calendario:hover {
    transform: scale(1.1) rotate(0deg);
    transition: all 0.5s ease 0s;
}
#weekday{
border-radius: 35px 35px 0 0;
color: #f9f9f9;
font-size: 24px;
line-height: 26px;
position: relative;
text-transform: lowercase;
}
#day {
border-radius: 0 0 35px 35px;
color: #15181f;
font-size: 60px;letter-spacing:1px;
font-weight: bold;
line-height: 90px;
text-shadow: -1px 0 #54B0E3, 0 1px #54B0E3, 1px 0 #54B0E3, 0 -1px #54B0E3, -1px 1px 2px #54B0E3;
}
</style>

leer articulo ➨

Set de botones CSS3 para descargas

5 comentaron

Cuando queremos poner una descarga en nuestro blog/web, podemos añadir un simple enlace de texto o una imagen, pero sin duda, lo que mejor queda es un buen boton. En este caso te traigo estos 6 botones con el mismo diseño, pero cada uno con un color diferente. Estan realizados integramente con CSS3 (no contienen ninguna imagen), tienen su funcion hover, su flechita y su efecto presionado. Y como se suele decir, para muestra un boton, en este caso seis, jejeje. Aqui debajo los teneis para que veais como quedan.

boton gris

boton azul

boton verde

boton rojo

boton naranja

boton amarillo

Para ponerlos en tu pagina, primero añades este codigo de estilos CSS3 en tu plantilla.

ver codigo

Una vez tengas hecho esto, ya solo te queda añadir el codigo para mostrar el boton. Eliges el color que desees y pegas el codigo correspondiente. Donde pone URL agregas la direccion que enlazara la descarga. Sustituye la palabra TEXTO por lo que quieras escribir, por ejemplo 'Descargar imagen'.

ver codigo

leer articulo ➨

Botones sociales con contadores

5 comentaron

La conexion entre un blog o web y las redes sociales es imprescindible hoy en dia, como ya sabeis. Pensando en este tema, he diseñado estos dos botones, uno de Facebook y el otro de Twitter que son '2 en uno'. Si, porque realizan la funcion de enlace a nuestro perfil y ademas disponen de un contador que marca las veces que han compartido nuestra pagina en estas redes. Para su realizacion he utilizado CSS3 (sin ningun tipo de imagen) y jQuery para se obtengan los datos automaticamente. El resultado final es este que veis aqui:

Facebook Twitter

Si quieres ponerte estos botones en tu blog o web, copia y pega el siguiente codigo donde quieras que se muestren. Donde pone URL DE TU BLOG (en color rojo) escribe la direccion de tu pagina para que funcionen los contadores. Ahora, sustituye lo esta escrito en color azul por tu direccion URL de tu Facebook y la de tu Twitter para que enlacen con tu blog.

ver el codigo

<center><div class="contadorredes"><a href="DIRECCION DE FACEBOOK" target="_blank" class="facebook">Facebook<span></span></a><a href="DIRECCION DE TWITTER" target="_blank" class="twitter">Twitter<span></span></a></div></center>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {

var url = "URL DE TU BLOG";
$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
$('.twitter span').html(data.count);
});
$.getJSON("https://graph.facebook.com/"+url, function(data) {
var sayi = data.shares;
$(".facebook span").html( sayi ? sayi : 0 );
});

})();
</script>

<style>
.contadorredes a {
margin: 2px;color:#ffffff !important;
}
.contadorredes .facebook {
font: bold 18px Trebuchet MS;display: inline-block;
padding: 10px 15px 10px 15px;border:2px solid #3B5998;
text-shadow: -1px 0 #3B5998, 0 1px #3B5998, 1px 0 #3B5998, 0 -1px #3B5998, -1px 1px 2px #3B5998;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
-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);background: #cedce7;background: -moz-linear-gradient(top, #cedce7 0%, #3b5998 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#3b5998));
background: -webkit-linear-gradient(top, #cedce7 0%,#3b5998 100%);
background: -o-linear-gradient(top, #cedce7 0%,#3b5998 100%);
background: -ms-linear-gradient(top, #cedce7 0%,#3b5998 100%);
background: linear-gradient(to bottom, #cedce7 0%,#3b5998 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#3b5998',GradientType=0 );}
.contadorredes .facebook:hover {background: #3b5998;
background: -moz-linear-gradient(top, #3b5998 0%, #cedce7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b5998), color-stop(100%,#cedce7));
background: -webkit-linear-gradient(top, #3b5998 0%,#cedce7 100%);
background: -o-linear-gradient(top, #3b5998 0%,#cedce7 100%);
background: -ms-linear-gradient(top, #3b5998 0%,#cedce7 100%);
background: linear-gradient(to bottom, #3b5998 0%,#cedce7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#cedce7',GradientType=0 );}
.contadorredes .facebook span {
background: #3B5998;padding: 1px 4px;margin-left:5px;border-radius: 2px;font-size: 14px;}
.contadorredes .twitter {
display: inline-block;font: bold 18px Trebuchet MS;padding: 10px 15px 10px 15px;border:2px solid #32B0D9;text-shadow: -1px 0 #32B0D9, 0 1px #32B0D9, 1px 0 #32B0D9, 0 -1px #32B0D9, -1px 1px 2px #32B0D9;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;-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);background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 0%, #32b0d9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#32b0d9));
background: -webkit-linear-gradient(top, #cedce7 0%,#32b0d9 100%);
background: -o-linear-gradient(top, #cedce7 0%,#32b0d9 100%);
background: -ms-linear-gradient(top, #cedce7 0%,#32b0d9 100%);
background: linear-gradient(to bottom, #cedce7 0%,#32b0d9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#32b0d9',GradientType=0 );}
.contadorredes .twitter:hover {background: #32b0d9;
background: -moz-linear-gradient(top, #32b0d9 0%, #cedce7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#32b0d9), color-stop(100%,#cedce7));
background: -webkit-linear-gradient(top, #32b0d9 0%,#cedce7 100%);
background: -o-linear-gradient(top, #32b0d9 0%,#cedce7 100%);
background: -ms-linear-gradient(top, #32b0d9 0%,#cedce7 100%);
background: linear-gradient(to bottom, #32b0d9 0%,#cedce7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b0d9', endColorstr='#cedce7',GradientType=0 );}
.contadorredes .twitter span {
background: #32B0D9;margin-left:5px;padding: 1px 4px;border-radius: 2px;font-size: 14px;}
</style>

leer articulo ➨

Iconos sociales con animacion hover oblicua

comentar

Utilizando las posibilidades que nos ofrece el CSS3, he diseñado estos geniales iconos sociales. No existe ninguna imagen en su realizacion, para los logos he utilizado un tipo de fuente especial llamada fontawesome. Les he dado forma circular y un fondo degradado utilizando la propiedad linear-gradient, dandoles asi un toque mas elegante. Al pasar el cursor sobre ellos, cambia el color del fondo y de la fuente, produciendo una animacion de abajo a arriba en modo oblicuo. Esto se consigue usando la propiedad transition y con algunas lineas de codigo de estilo mas. Si te gustan y los quieres poner en tu blog o web, elige el modelo que mas te guste y copia el codigo correspondiente, sustituyendo el texto en color rojo por las direcciones url de tus redes sociales y la de tu feed RSS.

(NOTA: Este efecto oblicuo se puede apreciar perfectamente en el navegador Firefox. En otros como Chrome, la animacion se vera de otra manera, pero de todos modos quedara muy bien.)

ver codigo

<center><div id="socialob"><ul>
<li id="twitter"><div><a href="TU DIRECCION DE TWITTER" target="_blank"><span class="fontawesome-twitter"></span></a></div></li>
<li id="facebook"><div><a href="TU DIRECCION DE FACEBOOK" target="_blank"><span class="fontawesome-facebook"></span></a></div></li>
<li id="google-plus"><div><a href="TU DIRECCION DE GOOGLE+" target="_blank"><span class="fontawesome-google-plus"></span></a></div></li>
<li id="rss"><div><a href="TU DIRECCION DEL FEED" target="_blank"><span class="fontawesome-rss"></span></a></div></li>
</ul></div></center>

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
#socialob {
margin: 0px;font-size: 82.5%;
padding: 0 0px;width:260px;
}
#socialob ul {
list-style: none;
padding: 0;
margin: 0;
padding: 5px 5px;
text-align: center;
border-radius: 10px;
}
#socialob ul li {
display: inline-block;
padding: 0px;line-height:1.0;
margin: 0px 2px;
border: 0px solid white;
border-radius: 30px;
background-color: white;
box-shadow: inset 0px 0px 10px #128cc9;
-webkit-box-shadow: inset 0px 0px 10px #128cc9;
min-width: 20px;
text-align: center;
width: 50px;
height: 50px;
position: relative;
}
#socialob ul li div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0px solid white;
border-radius: 30px;
background: #99ddfc;
background: -moz-linear-gradient(top, #99ddfc 0%, #128cc9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99ddfc), color-stop(100%,#128cc9));
background: -webkit-linear-gradient(top, #99ddfc 0%,#128cc9 100%);
background: -o-linear-gradient(top, #99ddfc 0%,#128cc9 100%);
background: -ms-linear-gradient(top, #99ddfc 0%,#128cc9 100%);
background: linear-gradient(to bottom, #99ddfc 0%,#128cc9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ddfc', endColorstr='#128cc9',GradientType=0 );
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
transition: width: 1s, height 1s, top 1s, left 1s;
}
#socialob ul li a {
width: 20px;
height: 20px;
text-decoration: none;
position: absolute;
top: 15px;
left: 15px;
-webkit-transition: top 1s, left 1s;
transition: top 1s, left 1s;
}
#socialob ul li a span {
font-size: 1.9em;
color: white;
-webkit-transition: color 1s;
transition: color 1s;
}
#socialob ul li:hover div {
width: 0px;
height: 0px;
top: 25px;
left: 25px;
}
#socialob ul li:hover a {
color: white;
top: -10px;
left: -10px;
}
#socialob ul li:hover a span {
color: #128cc9;
}
</style>

ver codigo

<center><div id="socialob"><ul>
<li id="twitter"><div><a href="TU DIRECCION DE TWITTER" target="_blank"><span class="fontawesome-twitter"></span></a></div></li>
<li id="facebook"><div><a href="TU DIRECCION DE FACEBOOK" target="_blank"><span class="fontawesome-facebook"></span></a></div></li>
<li id="google-plus"><div><a href="TU DIRECCION DE GOOGLE+" target="_blank"><span class="fontawesome-google-plus"></span></a></div></li>
<li id="rss"><div><a href="TU DIRECCION DEL FEED" target="_blank"><span class="fontawesome-rss"></span></a></div></li>
</ul></div></center>

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
#socialobb {
margin: 0px;font-size: 82.5%;
padding: 0 0px;width:260px;
}
#socialobb ul {
list-style: none;
padding: 0;
margin: 0;
padding: 5px 5px;
text-align: center;
border-radius: 10px;
}
#socialobb ul li {
display: inline-block;
padding: 0px;line-height:1.0;
margin: 0px 2px;
border: 0px solid white;
border-radius: 30px;
background-color: white;
box-shadow: inset 0px 0px 10px #ed9017;
-webkit-box-shadow: inset 0px 0px 10px #ed9017;
min-width: 20px;
text-align: center;
width: 50px;
height: 50px;
position: relative;
}
#socialobb ul li div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0px solid white;
border-radius: 30px;
background: #f6e6b4;
background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017));
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%);
background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%);
background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%);
background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 );
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
transition: width: 1s, height 1s, top 1s, left 1s;
}
#socialobb ul li a {
width: 20px;
height: 20px;
text-decoration: none;
position: absolute;
top: 15px;
left: 15px;
-webkit-transition: top 1s, left 1s;
transition: top 1s, left 1s;
}
#socialobb ul li a span {
font-size: 1.9em;
color: white;
-webkit-transition: color 1s;
transition: color 1s;
}
#socialobb ul li:hover div {
width: 0px;
height: 0px;
top: 25px;
left: 25px;
}
#socialobb ul li:hover a {
color: white;
top: -10px;
left: -10px;
}
#socialobb ul li:hover a span {
color: #ed9017;
}
</style>

ver codigo

<center><div id="socialob"><ul>
<li id="twitter"><div><a href="TU DIRECCION DE TWITTER" target="_blank"><span class="fontawesome-twitter"></span></a></div></li>
<li id="facebook"><div><a href="TU DIRECCION DE FACEBOOK" target="_blank"><span class="fontawesome-facebook"></span></a></div></li>
<li id="google-plus"><div><a href="TU DIRECCION DE GOOGLE+" target="_blank"><span class="fontawesome-google-plus"></span></a></div></li>
<li id="rss"><div><a href="TU DIRECCION DEL FEED" target="_blank"><span class="fontawesome-rss"></span></a></div></li>
</ul></div></center>

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
#socialobbb {
margin: 0px;font-size: 82.5%;
padding: 0 0px;width:260px;
}
#socialobbb ul {
list-style: none;
padding: 0;
margin: 0;
padding: 5px 5px;
text-align: center;
border-radius: 10px;
}
#socialobbb ul li {
display: inline-block;
padding: 0px;line-height:1.0;
margin: 0px 2px;
border: 0px solid white;
border-radius: 30px;
background-color: white;
box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
min-width: 20px;
text-align: center;
width: 50px;
height: 50px;
position: relative;
}
#socialobbb ul li div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0px solid white;
border-radius: 30px;
background: #cdcdcd;
background: -moz-linear-gradient(top, #cdcdcd 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdcdcd), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #cdcdcd 0%,#000000 100%);
background: -o-linear-gradient(top, #cdcdcd 0%,#000000 100%);
background: -ms-linear-gradient(top, #cdcdcd 0%,#000000 100%);
background: linear-gradient(to bottom, #cdcdcd 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#000000',GradientType=0 );
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
transition: width: 1s, height 1s, top 1s, left 1s;
}
#socialobbb ul li a {
width: 20px;
height: 20px;
text-decoration: none;
position: absolute;
top: 15px;
left: 15px;
-webkit-transition: top 1s, left 1s;
transition: top 1s, left 1s;
}
#socialobbb ul li a span {
font-size: 1.9em;
color: white;
-webkit-transition: color 1s;
transition: color 1s;
}
#socialobbb ul li:hover div {
width: 0px;
height: 0px;
top: 25px;
left: 25px;
}
#socialobbb ul li:hover a {
color: white;
top: -10px;
left: -10px;
}
#socialobbb ul li:hover a span {
color: #000000;
}
</style>

leer articulo ➨

Cabecera personalizada en Blogger que cambia de color

1 comentó

Que duda cabe que la cabecera o header de nuestro blog es el primer elemento que vemos al acceder a el. Por eso, si queremos que nuestra pagina sea visualmente atractiva, tenemos que empezar a personalizarla por esta parte. Para ello he realizado este diseño como una opcion posible, utilizando CSS3 y jQuery. Para el que quiera ponerlo, yo recomiendo las plantillas originales de Blogger, aunque tambien debe funcionar en cualquier otra que tengamos instalada, todo depende de los nombres en los codigos que haya puesto su diseñador. Si deseas añadir esta cabecera tuneada, recuerda que no tienes que tener ninguna imagen en el gadget de esta. Su particularidad es que cada vez que entres al blog, la cabecera cambiara de color aleatoriamente. Aparte de esto, el texto estara centrado y en 3D, tendra los bordes ligeramente redondeados y cuenta con sombreado tanto en su interior como en su exterior. Podeis ver una demostracion en mi blog de pruebas. Para comprobar como cambia su color de fondo, recargad la pagina tantas veces como querais.

ver demo

Si quieres poner este diseño a la cabecera de tu blog, tan solo tienes que hacer click en el siguiente boton y se añadira como un gadget mas.

$(document).ready(function () {
    var colors = ["#FF4A37", "#FF5D37", "#FF7437", "#FF8737", "#FF9537", "#FFA337", "#FFB137", "#37BBFF", "#379FFF", "#3787FF", "#376FFF", "#3753FF", "#74DF00", "#A4A4A4", "#FFFF00", "#FE2EF7"];
    $('header').each(function () {
        var rand = Math.floor(Math.random() * colors.length);
        $('header').css("background-color", colors[rand]);
    });
});

})();
  </script>
<style>
.title, .title a{color:#ffffff !important;font-family: 'Archivo Black', sans-serif !important;text-align:center;font-size:50px !important;text-shadow: rgb(187, 187, 187) 0px 1px 0px,rgb(181, 181, 181) 0px 2px 0px,rgb(172, 172, 172) 0px 3px 0px,rgb(160, 160, 160) 0px 4px 0px,rgb(145, 145, 145) 0px 5px 0px,rgb(127, 127, 127) 0px 6px 0px,rgba(0, 0, 0, 0.199219) 0px 7px 1px,rgba(0, 0, 0, 0.296875) 0px 8px 6px !important;}
header{-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;border:6px solid #ffffff;-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,.8) inset;-moz-box-shadow: 0px 0px 30px rgba(0,0,0,.8) inset;box-shadow: 0px 0px 30px rgba(0,0,0,.8) inset;}
.header-outer {-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);}
</style>
<link href="http://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet" type="text/css" />

leer articulo ➨

Rotador de banners

4 comentaron

Cuando queremos intercambiar enlaces con otros blogs o webs, lo mejor y mas atrayente es hacerlo mediante banners. Pero a veces, esto supone 'inundar' nuestro blog de imagenes que nos ocupan mucho sitio. La mejor solucion es poner un rotador de banners, asi podremos añadir las imagenes que queramos en un solo espacio. Pensando en este tema, he diseñado este rota-banners con CSS3 y jQuery, en el que las imagenes van cambiando con un efecto fade suave automaticamente.

Para añadirlo a tu blog, tienes que copiar el codigo de abajo y pegarlo donde quieras mostrarlo. Donde esta indicado en color rojo, pones las urls de los enlaces y de las imagenes de cada banner. si quieres añadir mas, tienes que poner la linea <div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div> tantas veces como quieras. Si quieres poner menos banners, elimina las que te sobren.

El tamaño que le he dado a las imagenes es de 300x150 px. Si quieres modificarlo, tienes que hacerlo en la siguiente linea del codigo:

Pero entonces tambien tendras que modificar el tamaño del contenedor principal en la siguiente linea:

Una vez lo tengamos, nos quedara asi:

☆ webs amigas ☆

ver el codigo

leer articulo ➨