tag:blogger.com,1999:blog-85440717679708467392024-03-12T18:55:42.337+01:00REDEANDORecursos y diseños para tu blog o web. Entretenimiento, humor, webmaster y todo lo bueno de internet.Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comBlogger489125tag:blogger.com,1999:blog-8544071767970846739.post-20916145794622629162019-10-30T22:50:00.004+01:002019-10-30T22:54:21.561+01:00SEGUIDME EN TWITTER <br />
<br />
<br />
VAMOS, SEGUIDME EN TWITTER. AHORA REDEANDO SEGUIRA EN UN TONO DISTINTO Y SEGUIRA MOLANDO TANTO O MAS QUE ANTES. DADLE CLICK ABAJO Y UNIROSA MI CUENTA DE TWITTER.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center><a title="Sigueme en Twitter" href="https://twitter.com/johnnyuve" target="_blank"><img width="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2GsdRsgCRRuVNZkr1kxYY9aSarhszL-7ndR-Gun1yV32GUfEPHuz1nuJQ5QhWca0esYzNy0_1HjyHkAm7jNQHVUpugZj5Xi6DtlRG86aDBHqeHWhNG1vg4kirNS0v_ewpkxVw0-RdgA/s1600/twitter2.gif" /></a><br />
</center><br />
<br />
<br />
<br />
<br />
<br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-76451601852416950752014-08-03T21:28:00.000+02:002014-08-03T21:28:15.680+02:00Iconos sociales Oro, Plata y Bronce<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ17odaZh_WUQjDC3abYaKVC5xmR-qFLMCCEG9K20a8mM_ahwA8WnTTqFZs9aZ4rZvU7BgeweYkzHnYnx4LlR3Xh2v6P8l66U_bpwWzXsjjok0HtPBTk1AC1S5jkILID-6G776WX86p1s/s1600/iconos+metal.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ17odaZh_WUQjDC3abYaKVC5xmR-qFLMCCEG9K20a8mM_ahwA8WnTTqFZs9aZ4rZvU7BgeweYkzHnYnx4LlR3Xh2v6P8l66U_bpwWzXsjjok0HtPBTk1AC1S5jkILID-6G776WX86p1s/s1600/iconos+metal.png" /></a></div><br />
<br />
<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;"><a href="http://www.aha-soft.com/" style="background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.aha-soft.com"); background-origin: padding-box; background-position: 1px center; background-repeat: no-repeat; background-size: 16px auto; color: #CEDEEF !important; letter-spacing: 2px; padding-left: 22px; text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;" target="_blank"><b>Aha-Soft</b></a> nos proporciona gratuitamente estos <b>3 packs</b> de iconos sociales con los tonos y colores de estos metales nobles para que los pongamos en nuestro blog.<br />
<br />
Cada pack contiene <b>221</b> iconos de cada tamaño, disponibles en estas dimensiones: 24x24, 32x32, 40x40, 48x48, 64x64, 72x72, 96x96 píxeles, en formato <b>PNG</b>, <b>ICO</b> y formatos ICNS.<br />
<br />
Elige el que mas te guste y descargatelo:</span></span></div><br />
<br />
<div align="center"><div class="buttonn gray"><div class="shine"></div><a style="color: #FFF !important;" href="http://www.aha-soft.com/free-icons/free-gold-button-icons/" target="_blank">ICONOS ORO</a></div><div class="buttonn blue"><div class="shine"></div><a style="color: #FFF !important;" href="http://www.aha-soft.com/free-icons/free-silver-button-icons/" target="_blank">ICONOS PLATA</a></div><div class="buttonn green"><div class="shine"></div><a style="color: #FFF !important;" href="http://www.aha-soft.com/free-icons/free-bronze-button-icons/" target="_blank">ICONOS BRONCE</a></div></div><br />
<style>
.buttonn {
min-height: 1.5em;
display: inline-block;
padding: 12px 20px;
margin: 0px 15px 15px 0px;
cursor: pointer;
opacity: 0.9;
font-family:century gothic;
color: #FFF !important;
font-size: 18px;
letter-spacing: 1px;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;
font-weight:bold;
background: #434343;
border: 1px solid #242424;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-webkit-transition: all 0.1s linear;
-khtml-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.buttonn:hover {
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.buttonn:active {
-webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.shine {
display: block;
position: relative;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
padding: 0px 12px;
top: -12px;
left: -24px;
height: 1px;
-webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
-khtml-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
-moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
-o-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
-webkit-transition: all 0.3s ease-in-out;
-khtml-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.buttonn:hover .shine {left: 24px;}
.buttonn:active .shine {opacity: 0;}
.buttonn.gray {background: #E7BF3A;}
.buttonn.blue {background: #BFBFBF;}
.buttonn.green {background: #C88E73;}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-37140191761236157042014-08-03T15:16:00.001+02:002014-08-03T20:07:56.741+02:00Cabecera con estilo veraniego<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><a bp.blogspot.com="" ="https://www.blogger.com/null" http:="" imageanchor="1" k3hgcp4omk0="" ogjkibppdy="" qhk5nzxi="" s1600="" style="clear: right; float: right; margin-left: 1em; position:relative;" verano.gif=""><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWFXY7-8J5G5lCjgOn5lUZlxx7TFKiKZegUSRCpXE3osByprQ-X6cNOStYUJ_4sW2XvULi9-7Rs0iwhT2VgFWhAGxaQpq7b9AL5z1G2wV0SszzujD4ajiA-CtNlhXq8ayKEgdfw4faJow/s1600/verano.gif" /></a><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">¡Ay que calor hace en agosto! Tomando el sol un ratito tumbado en la playa, se me ocurrio este codigo para decorar el blog. Se trata de un sol animado para que luzca en nuestra cabecera al que le podemos poner un texto y una nube que tambien se mueve de izquierda a derecha sin parar, todo ello realizado con CSS.</span></span></div><br />
<br />
<center><a style="letter-spacing:2px;border-radius:50px;" href="http://pruebasredeando.blogspot.com.es/2014/08/veranito.html" class="botongrisglossy" target="_blank">ver demo</a></center><br />
<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Si te gusta y quieres ponerlo en tu blog o web para darle un toque veraniego, copia el siguiente codigo y pegalo en tu plantilla <b>antes</b> de la etiqueta <b></body></b> y guarda los cambios. Para <b>modificar el texto</b>, hazlo donde esta en indicado en <b>rojo</b>, para el <b>color</b> de este, modifica lo que esta en <b>azul</b> y para el <b>tamaño</b> de la letra, donde esta en color <b>verde</b>.</span></span></div><br />
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;"><div style="position:relative;left:7px;text-align:left;" class="pre"><br />
<b><div id="sol"><span style="font-size:25px;color:<span style="color: #3d85c6;">#FF0000</span>;font-family:impact;z-index:3;position:relative;top:60px;left:5%;font-weight:bold;text-shadow: 0px 4px 4px rgba(150, 150, 150, 1);"><span style="color: red;">VERANO 2014</span></span><div></div><div></div><div></div><div></div></div><div id="nube"></div><br />
<style><br />
#sol {<br />
width: 150px;<br />
height: 150px;<br />
position: absolute;z-index:2;<br />
top: 25px;<br />
left: 40%;<br />
}<br />
#sol *, #sol *:before, #sol *:after {<br />
position: absolute;<br />
}<br />
#sol div {<br />
top: 50%;<br />
left: 50%;<br />
}<br />
#sol div:before, #sol div:after {<br />
content: "";<br />
top: 0;<br />
left: 0;<br />
height: inherit;<br />
width: inherit;<br />
background: inherit;<br />
}<br />
#sol div:before {<br />
-moz-transform: rotate(60deg);<br />
-ms-transform: rotate(60deg);<br />
-webkit-transform: rotate(60deg);<br />
transform: rotate(60deg);<br />
}<br />
#sol div:after {<br />
-moz-transform: rotate(-60deg);<br />
-ms-transform: rotate(-60deg);<br />
-webkit-transform: rotate(-60deg);<br />
transform: rotate(-60deg);<br />
}<br />
#sol div:nth-child(even) {<br />
-webkit-animation: rotateR 12s infinite linear;<br />
-moz-animation: rotateR 12s infinite linear;<br />
-ms-animation: rotateR 12s infinite linear;<br />
animation: rotateR 12s infinite linear;<br />
}<br />
#sol div:nth-child(odd) {<br />
-webkit-animation: rotateL 12s infinite linear;<br />
-moz-animation: rotateL 12s infinite linear;<br />
-ms-animation: rotateL 12s infinite linear;<br />
animation: rotateL 12s infinite linear;<br />
}<br />
#sol div:nth-child(1) {<br />
animation-duration: 49s;<br />
background: rgba(255, 217, 31, 0.2);<br />
width: 144px;<br />
height: 144px;<br />
margin-top: -72px;<br />
margin-left: -72px;<br />
margin-right: 0;<br />
margin-bottom: 0;<br />
}<br />
#sol div:nth-child(2) {<br />
animation-duration: 53s;<br />
background: rgba(255, 217, 31, 0.3);<br />
width: 138px;<br />
height: 138px;<br />
margin-top: -69px;<br />
margin-left: -69px;<br />
margin-right: 0;<br />
margin-bottom: 0;<br />
}<br />
#sol div:nth-child(3) {<br />
animation-duration: 57s;<br />
background: rgba(255, 217, 31, 0.5);<br />
width: 132px;<br />
height: 132px;<br />
margin-top: -66px;<br />
margin-left: -66px;<br />
margin-right: 0;<br />
margin-bottom: 0;<br />
}<br />
#sol div:nth-child(4) {<br />
animation-duration: 61s;<br />
background: rgba(255, 255, 171, 0.5);<br />
width: 126px;<br />
height: 126px;<br />
margin-top: -63px;<br />
margin-left: -63px;<br />
margin-right: 0;<br />
margin-bottom: 0;<br />
background-image: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);<br />
background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);<br />
background-image: radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);<br />
}<br />
#nube {<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCP316I7vvFzrLwg8Uy2IR4xp9xAUpIl8eQfUrtvnE8RV0ftw2dYMAG4nBcPrBOkLqxuVbbinIU52ifnyNSy5I7Qtxnkg6uZx8Eif4RbtSI_cZKZxQizkrDoW1GVo04vzW3QlsTd-cSw/s1600/nube.png);<br />
width:175px;height:104px;opacity:0.7;z-index:2;<br />
position: absolute;<br />
top: 100px;right: 40%;<br />
-webkit-animation: right 50s linear -3s infinite;<br />
-moz-animation: right 50s linear -3s infinite;<br />
-ms-animation: right 50s linear -3s infinite;<br />
animation: right 50s linear -3s infinite;<br />
}<br />
@-webkit-keyframes right {<br />
from {<br />
right: 20%;<br />
}<br />
<br />
50% {<br />
right: 70%;<br />
}<br />
<br />
to {<br />
right: 20%;<br />
}<br />
}<br />
@-moz-keyframes right {<br />
from {<br />
right: 20%;<br />
}<br />
<br />
50% {<br />
right: 70%;<br />
}<br />
<br />
to {<br />
right: 20%;<br />
}<br />
}<br />
@-ms-keyframes right {<br />
from {<br />
right: 20%;<br />
}<br />
<br />
50% {<br />
right: 70%;<br />
}<br />
<br />
to {<br />
right: 20%;<br />
}<br />
}<br />
@keyframes right {<br />
from {<br />
right: 20%;<br />
}<br />
<br />
50% {<br />
right: 70%;<br />
}<br />
<br />
to {<br />
right: 20%;<br />
}<br />
}<br />
@-webkit-keyframes shakeOne {<br />
50% {<br />
-moz-transform: rotate(68deg);<br />
-ms-transform: rotate(68deg);<br />
-webkit-transform: rotate(68deg);<br />
transform: rotate(68deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(62deg);<br />
-ms-transform: rotate(62deg);<br />
-webkit-transform: rotate(62deg);<br />
transform: rotate(62deg);<br />
}<br />
}<br />
@-moz-keyframes shakeOne {<br />
50% {<br />
-moz-transform: rotate(68deg);<br />
-ms-transform: rotate(68deg);<br />
-webkit-transform: rotate(68deg);<br />
transform: rotate(68deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(62deg);<br />
-ms-transform: rotate(62deg);<br />
-webkit-transform: rotate(62deg);<br />
transform: rotate(62deg);<br />
}<br />
}<br />
@-ms-keyframes shakeOne {<br />
50% {<br />
-moz-transform: rotate(68deg);<br />
-ms-transform: rotate(68deg);<br />
-webkit-transform: rotate(68deg);<br />
transform: rotate(68deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(62deg);<br />
-ms-transform: rotate(62deg);<br />
-webkit-transform: rotate(62deg);<br />
transform: rotate(62deg);<br />
}<br />
}<br />
@keyframes shakeOne {<br />
50% {<br />
-moz-transform: rotate(68deg);<br />
-ms-transform: rotate(68deg);<br />
-webkit-transform: rotate(68deg);<br />
transform: rotate(68deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(62deg);<br />
-ms-transform: rotate(62deg);<br />
-webkit-transform: rotate(62deg);<br />
transform: rotate(62deg);<br />
}<br />
}<br />
@-webkit-keyframes shakeTwo {<br />
50% {<br />
-moz-transform: rotate(-17deg);<br />
-ms-transform: rotate(-17deg);<br />
-webkit-transform: rotate(-17deg);<br />
transform: rotate(-17deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(-23deg);<br />
-ms-transform: rotate(-23deg);<br />
-webkit-transform: rotate(-23deg);<br />
transform: rotate(-23deg);<br />
}<br />
}<br />
@-moz-keyframes shakeTwo {<br />
50% {<br />
-moz-transform: rotate(-17deg);<br />
-ms-transform: rotate(-17deg);<br />
-webkit-transform: rotate(-17deg);<br />
transform: rotate(-17deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(-23deg);<br />
-ms-transform: rotate(-23deg);<br />
-webkit-transform: rotate(-23deg);<br />
transform: rotate(-23deg);<br />
}<br />
}<br />
@-ms-keyframes shakeTwo {<br />
50% {<br />
-moz-transform: rotate(-17deg);<br />
-ms-transform: rotate(-17deg);<br />
-webkit-transform: rotate(-17deg);<br />
transform: rotate(-17deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(-23deg);<br />
-ms-transform: rotate(-23deg);<br />
-webkit-transform: rotate(-23deg);<br />
transform: rotate(-23deg);<br />
}<br />
}<br />
@keyframes shakeTwo {<br />
50% {<br />
-moz-transform: rotate(-17deg);<br />
-ms-transform: rotate(-17deg);<br />
-webkit-transform: rotate(-17deg);<br />
transform: rotate(-17deg);<br />
}<br />
<br />
100% {<br />
-moz-transform: rotate(-23deg);<br />
-ms-transform: rotate(-23deg);<br />
-webkit-transform: rotate(-23deg);<br />
transform: rotate(-23deg);<br />
}<br />
}<br />
@-webkit-keyframes rotateL {<br />
from {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-moz-keyframes rotateL {<br />
from {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-ms-keyframes rotateL {<br />
from {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@keyframes rotateL {<br />
from {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-webkit-keyframes rotateR {<br />
from {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
}<br />
@-moz-keyframes rotateR {<br />
from {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
}<br />
@-ms-keyframes rotateR {<br />
from {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
}<br />
@keyframes rotateR {<br />
from {<br />
-moz-transform: rotate(0deg);<br />
-ms-transform: rotate(0deg);<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
<br />
to {<br />
-moz-transform: rotate(360deg);<br />
-ms-transform: rotate(360deg);<br />
-webkit-transform: rotate(360deg);<br />
transform: rotate(360deg);<br />
}<br />
}<br />
<br />
</style></b><br />
<br />
</div></div></center><br />
<br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-32759421689389381682014-07-31T20:54:00.000+02:002014-07-31T20:54:17.692+02:00Shakira, la mas seguida en Facebook<div align="center"><div class="borde-animado-imagenes col-1 row-1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5F8E4ZNco8x2RKlA20TSFHWVZnmordzhj58DorcTorgIWV2zhQzI4QHhN4ZRpsd1OkmYWGZDIeBnHQCrl7TaQF_HpTsQFTME24H1leInXm5fvn4xzc4oEqkb0ooB6s412a8l9XZw_kMQ/s1600/shakira+facebook.png" /></div></div><br />
<br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: 22px;"><span style="font-family: 'Nunito', sans-serif;">La cantante colombiana ha marcado otro hito en su carrera, ya repleta de reconocimientos internacionales. Ahora, tras superar los <b>100 millones de fans</b> en <a href="https://www.facebook.com/shakira" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.facebook.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;color:#3B5999 !important;"><b>Facebook</b></a>, se ha convertido en la mas seguida en esta popular red social, por delante de <b>Ronaldo</b> (<b>92 millones</b>) y <b>Rihanna</b> (<b>89</b>).</span></span></div><br />
<br />
<br />
<style>
.borde-animado-imagenes.col-1 {
width: 600px; /* Ancho de la imagen */
height: 408px; /* Alto de la imagen */
border-width: 10px 10px; /* Ancho de los bordes */
border-radius: 7px; /* Bordes redondeados */
}
@keyframes borde-animado-imagenes-row-1{
0% {
border-color: #3B5999;
border-top-color: black;
}
25% {
border-color: #3B5999;
border-right-color: black;
}
50% {
border-color: #3B5999);
border-bottom-color: black;
}
75% {
border-color: #3B5999;
border-left-color: black;
}
100% {
border-color: #3B5999;
border-top-color: black;
}
}
.borde-animado-imagenes {
border: 15px solid #3B5999;
}
.borde-animado-imagenes.row-1 {
animation: borde-animado-imagenes-row-1 750ms linear infinite;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-491687008731746122014-07-27T21:36:00.000+02:002014-07-27T21:36:40.874+02:00GIFS REDEANDO BLOG - Volumen 1<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigv2JOpCPEXJyJp-xer_x78rzrJq6fGDEWX6pQVX-fC3FNBKPI0AnZPcfpWErBvdWo07jpJoOPDliajoI4sqSSVRhEzWSmeCi61F1pIpI_D50oejvsLDCjhOZLxgPCA91eGw3z2UNhoxg/s1600/rb.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigv2JOpCPEXJyJp-xer_x78rzrJq6fGDEWX6pQVX-fC3FNBKPI0AnZPcfpWErBvdWo07jpJoOPDliajoI4sqSSVRhEzWSmeCi61F1pIpI_D50oejvsLDCjhOZLxgPCA91eGw3z2UNhoxg/s1600/rb.gif" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Siempre me han gustado las imagenes en movimiento y soy un aficionadillo haciendo practicas, de las cuales he publicado bastantes para ilustrar los articulos de este blog.<br />
<br />
He recopilado en este pack unas 20 imagenes para el que guste descargarselas llamado: ¡¡¡<b>GIFS REDEANDO BLOG - Volumen 1</b>!!!</span></span></div><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNFNePjJD67mDeRk1onEj_soz55wTp_FiW9lYcw8UXPC6I1_4lX82eh371AXLDcKW_W-AVqqE7_XYPpDf5XYZhJY0S4q7yNm1bYFfxPd3zQ3DkPmTODDS9QUmsUsPxWnYq64WIR_kZB4/s1600/expendables+3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="-webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg);border:1px solid #000000;-webkit-box-shadow: 10px 10px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 10px 10px 5px 0px rgba(50, 50, 50, 0.75);padding:3px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNFNePjJD67mDeRk1onEj_soz55wTp_FiW9lYcw8UXPC6I1_4lX82eh371AXLDcKW_W-AVqqE7_XYPpDf5XYZhJY0S4q7yNm1bYFfxPd3zQ3DkPmTODDS9QUmsUsPxWnYq64WIR_kZB4/s1600/expendables+3.gif" width="600" /></a></div><br />
<br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Estos GIFS los he realizado extrayendolos bien de videos, haciendo fotomontajes y utilizando programas para capturas y editores varios. Espero que os gusten y espero hacer mas y mejores imagenes en el Volumen two.</span></span></div><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3p0fMfajNC79d2iv1o60cfHkNYY6OGJOOwlkOMJOaZrGD-uBsyPRp8T0NLmRf9AF29S0RR-KyMVuLPH69sIs0OMlsRwjzYP1XERzkDBP22IotJx1hu4ygVEhvGzwaQerjZkqMHhWWmI/s1600/Madrid.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="-webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg);border:1px solid #000000;padding:3px;-webkit-box-shadow: -10px 10px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -10px 10px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -10px 10px 5px 0px rgba(50, 50, 50, 0.75);" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3p0fMfajNC79d2iv1o60cfHkNYY6OGJOOwlkOMJOaZrGD-uBsyPRp8T0NLmRf9AF29S0RR-KyMVuLPH69sIs0OMlsRwjzYP1XERzkDBP22IotJx1hu4ygVEhvGzwaQerjZkqMHhWWmI/s1600/Madrid.gif" /></a></div><br />
<br />
<br />
<br />
<center><a href="https://sites.google.com/site/redeando1/GIFS%20REDEANDO%20BLOG%20-%20Volumen%201.zip?attredirects=0&d=1" target="_blank" class="default" id="bbutton">descargar GIFS REDEANDO BLOG</a></center><br />
<br />
<style>
#bbutton {
position: relative;
margin: 0 .5em .5em .5em;
padding: .35em 1em;
font-size: 24px;
font-weight: bold;
color: #4f4f4f !important;
text-shadow: 0 1px 1px #fff;
background: #ddd;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
background: -moz-linear-gradient(top, #ededed, #c4c4c4);
border: 1px solid #acacac;
border-top-color: #bdbdbd;
border-bottom-color: #949494;
border-radius: .214em;
-webkit-border-radius: .214em;
-moz-border-radius: .214em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
cursor: pointer;
}
#bbutton:hover,
#bbutton:focus {
box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
#bbutton:active {
background: #ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
border-color: #a6a6a6;
border-top-color: #939393;
border-bottom-color: #bcbcbc;
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
-o-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
}
#bbutton.default {
color: #1c4257;
background: #a3cde3;
background: -webkit-gradient(linear, left top, left bottom, from(#b9e0f5), to(#85b2cb));
background: -moz-linear-gradient(top, #b9e0f5, #85b2cb);
border: 1px solid #759bb1;
border-top-color: #8ab0c6;
border-bottom-color: #587e93;
}
#button.default:hover,
#button.default:focus {
box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
-o-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
}
#bbutton.default:active {
background: #8abcd7;
background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
background: -moz-linear-gradient(top, #81afc8, #b7def4);
border-color: #6e94a9;
border-top-color: #567c91;
border-bottom-color: #88aec4;
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
-o-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
}
#bbutton[disabled],
#bbutton[disabled]:active {
color: #a7a7a7;
background: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
background: -moz-linear-gradient(top, #f6f6f6, #e1e1e1);
border-color: #d4d4d4;
border-top-color: #dedede;
border-bottom-color: #c9c9c9;
cursor: default;
}
#button[disabled]:hover,
#button[disabled]:focus {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-17131289133091964222014-07-27T16:47:00.000+02:002014-07-27T16:53:45.006+02:00Pixels, imaginacion ochentera<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62W6GyRekaIGaiPDoFkK5WqWuIAi64Ohn-Bx58rj6ailJpnRLcELOGIWXP8h30o69aI7EkwIdWyIzy_20HzXZgjQ49e8ATxfbLxuXC0CVYYAYkLhrXV0mUdhRjTIwoT0_Abw9lsYVEH0/s1600/pixels.jpg) repeat scroll;"><br />
<br />
<center><div style="background: #000000; opacity: 0.5; padding-left: 20px; padding-right: 20px; text-align: justify; width: 550px;"><br />
<div class="separator" style="clear: both; text-align: justify;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX68UrkBO8jAJd1ZyBxrbO4M5gLAzBuodHknKh9aM2LlsMHPQceSKIKCk_rnfneSeP9JsM4uOksJQ3mKw2gC4ZxZTrlhW0HLC_bxea8J2IJRZkgkvbvhOusOq28k1pw3QbRQJ1MdSFiTo/s1600/pixel.jpg.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em;margin-top: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX68UrkBO8jAJd1ZyBxrbO4M5gLAzBuodHknKh9aM2LlsMHPQceSKIKCk_rnfneSeP9JsM4uOksJQ3mKw2gC4ZxZTrlhW0HLC_bxea8J2IJRZkgkvbvhOusOq28k1pw3QbRQJ1MdSFiTo/s1600/pixel.jpg.png" /></a></div><span style="font-size: 16px;"><span style="color: white; font-family: 'Press Start 2P', cursive;">Pixels es un corto creado por Patrick Jean que homenajea la época de los ochenta con esa pasión por el píxel y la imaginación a raudales. Un corto que nos sitúa en nuestro mundo, teniendo que afrontar una invasión de personajillos sacados de los videojuegos de antaño. Una misión que se nos antoja complicada, ya que sus ataques nos convertirán en seres pixelados.</span></span><br />
<br />
</div></center><br />
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MAI7u50Rki6XGdUV1t62INQc4Oxz42os1o-MFOha2l-1XlF37o_-Tj-PNe1_e6FRiZDplztM1iVqylHx8O5_NnZ000nFG5D7F11lLaybOPn7Zade2VFgVqk4HCOhFqWYYI0wyx2i97z6/s1600/fondo+video+REDEANDO.png) no-repeat top left; height: 620px; margin: 0 auto; padding-bottom: 0px; width: 620px;"><div style=" margin: 0 auto; position: relative; top: 72px;left:48px;"><iframe src="//player.vimeo.com/video/10829255?title=0&byline=0&portrait=0" width="517" height="335" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
</div></div></div><link href="http://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" type="text/css"></link>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-92215482095616813812014-07-20T12:19:00.002+02:002014-07-20T12:19:38.961+02:00Bordes animados en las imagenes<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95Qy11tlO3SV2aSRtLkOmlTO9J5_jx3HAneN7VX_yj4qaOmk5jp-z8aMRcfVosW_TNFWT5D9VUQBHZ224J4x32ja-Zqf09SP8HB2FEHIdPaub827Foe1GaVDCm3p-xQSCTQ1e0TZ394M/s1600/redeando+etiqueta.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95Qy11tlO3SV2aSRtLkOmlTO9J5_jx3HAneN7VX_yj4qaOmk5jp-z8aMRcfVosW_TNFWT5D9VUQBHZ224J4x32ja-Zqf09SP8HB2FEHIdPaub827Foe1GaVDCm3p-xQSCTQ1e0TZ394M/s1600/redeando+etiqueta.png" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Vamos a ver como utilizando un codigo cortito, aprovechando las posibilidades de animacion que nos da el CSS, le daremos un toque mas cool a nuestras imagenes.<br />
<br />
Este truquillo nos permitira hacer que los bordes de nuestras instantaneas 'cobren vida', sin utilizar para ello ninguna otra imagen adicional.<br />
<br />
Aqui podeis ver 2 ejemplos con el efecto en marcha, una imagen con los bordes redondeados y la otra no.</span></span></div><br />
<br />
<br />
<center><div class="borde-animado-imagenes col-1 row-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaSI2U7Wj64ezMePK7xrbHnZ-ogjmm322JbSmPhUhsTl8o9G4KWZ3tZ6eOPeBfEXfPdmPYK1W1HYgtLcUZ2x8FN32PD11K6z11kTfSmL9PzPUuHsm_72OBsRoHnMWHKTCHxy3cgOhnbc/s1600/supergirl.png" /></div></center><br />
<br />
<br />
<center><div class="borde-animado-imagenes col-1 row-1" style="border-radius:20px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjub4yMowb87wPb_vtFQQDULlqe2-GerB8RVwOU81OJzykfcPkGoqSHgHOl4Qv17RiP-FXuTskhQPTf8YuuBpMKhwf6TheSluGwfnxY6ifAVZ7kFfAgBujsNojpu9Q5zjzqA822nizohyphenhypheno/s1600/1a9b8ca75c9066da_o.jpg" width="500" height="334"/></div></center><br />
<br />
<br />
<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Para poner una o varias imagenes con los bordes animados en tu blog o web, primero <b>copia y pega</b> el siguiente codigo. Añade la url de la instantanea donde esta señalado en <b>verde</b>. <b>Segun el tamaño</b> en px que tenga la imagen quieras añadir, sera el mismo que tienes que escribir <b>modificando donde esta indicado en color rojo</b> (con informacion en azul). Tambien puedes variar el <b>tamaño de los bordes</b> y el <b>radio</b> de estos.</span></span></div><br />
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;"><b><div class="borde-animado-imagenes col-1 row-1"><img src="<span style="color: #6aa84f;">URL DE LA IMAGEN</span>" /></div><br />
</b><br />
<b><style><br />
.borde-animado-imagenes.col-1 {<br />
width: <span style="color: red;">500px</span>; <span style="color: #3d85c6;">/* Ancho de la imagen */</span><br />
height: <span style="color: red;">334px</span>; <span style="color: #3d85c6;">/* Alto de la imagen */</span><br />
border-width: <span style="color: red;">15px 15px<span style="color: black;">;</span></span> <span style="color: #3d85c6;">/* Ancho de los bordes */</span><br />
border-radius: <span style="color: red;">20px</span>; <span style="color: #3d85c6;">/* Bordes redondeados */</span><br />
}<br />
@keyframes borde-animado-imagenes-row-1{<br />
0% {<br />
border-color: rgba(0, 0, 0, 0.25); <br />
border-top-color: black;<br />
}<br />
<br />
25% {<br />
border-color: rgba(0, 0, 0, 0.25); <br />
border-right-color: black;<br />
}<br />
<br />
50% {<br />
border-color: rgba(0, 0, 0, 0.25);<br />
border-bottom-color: black;<br />
}<br />
<br />
75% {<br />
border-color: rgba(0, 0, 0, 0.25);<span style="color: #3d85c6;"></span><br />
border-left-color: black;<br />
}<br />
<br />
100% {<br />
border-color: rgba(0, 0, 0, 0.25);</b><br />
<b> border-top-color: black;<br />
}<br />
}<br />
<br />
.borde-animado-imagenes {<br />
border: 15px solid black; <br />
}<br />
.borde-animado-imagenes.row-1 {<br />
animation: borde-animado-imagenes-row-1 750ms linear infinite;<br />
}<br />
</style></b><br />
</div></center><br />
<br />
<br />
<style>
@keyframes borde-animado-imagenes-row-1{
0% {
border-color: rgba(0, 0, 0, 0.25);
border-top-color: black;
}
25% {
border-color: rgba(0, 0, 0, 0.25);
border-right-color: black;
}
50% {
border-color: rgba(0, 0, 0, 0.25);
border-bottom-color: black;
}
75% {
border-color: rgba(0, 0, 0, 0.25);
border-left-color: black;
}
100% {
border-color: rgba(0, 0, 0, 0.25);
border-top-color: black;
}
}
.borde-animado-imagenes {
border: 15px solid black;
}
.borde-animado-imagenes.row-1 {
animation: borde-animado-imagenes-row-1 750ms linear infinite;
}
.borde-animado-imagenes.col-1 {
width: 500px;
height: 334px;
border-width: 15px 15px;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-91711137073780741482014-07-16T19:10:00.000+02:002014-07-16T19:10:03.169+02:00Publica tus feeds con Social Stream Widget<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjObwG-OAIMNm8iCoo2OHh6kz0aL38x9qabPrTloSNsh2OV8usyd1M2HbPGvwyT1cU9ydn3TA2bP1hE1KxuRjgy5WIOJ-52WDOyOWjKjhQV47QDU_74rpszx9lw1Zu4aSiZXZHbjoC9w/s1600/Social+Stream+Widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="-webkit-box-shadow: -7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -7px 7px 5px 0px rgba(50, 50, 50, 0.75);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjObwG-OAIMNm8iCoo2OHh6kz0aL38x9qabPrTloSNsh2OV8usyd1M2HbPGvwyT1cU9ydn3TA2bP1hE1KxuRjgy5WIOJ-52WDOyOWjKjhQV47QDU_74rpszx9lw1Zu4aSiZXZHbjoC9w/s1600/Social+Stream+Widget.png" /></a></div><br />
<br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">La web <a href="http://www.socialstreamwidget.com" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.socialstreamwidget.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;"><b>Social Stream Widget</b></a> nos ofrece un recurso muy interesante para poner en el blog, y ademas gratuitamente.<br />
<br />
Este widget nos publicara automaticamente todos los feeds RSS de nuestro blog, asi como los de nuestras redes sociales, como podeis ver aqui debajo mismito.<br />
<br />
No requiere de ningun tipo de registro, llegamos, elegimos los que nos interesen, añadimos la url RSS del blog y las de las redes sociales, bien sea el link o la numeracion de la cuenta.<br />
<br />
Una vez tengamos esto, pasamos a personalizarlo a nuestro gusto, y despues clicamos en el boton 'Finish & Grab Code', donde nos proporcionaran el codigo listo para copiar y pegar.<br />
<br />
</span></span></div><br />
<script type="text/javascript" src="http://q4socialstream.q4web.com/SocialBuilder/js/jqueryQ4.min.js"></script><div id="SocialStream"></div><script type="text/javascript" src="http://q4socialstream.q4web.com/SocialBuilder/js/q4SocialStream.js"></script><script type="text/javascript">var Q4$ = jQuery.noConflict();Q4$("#SocialStream").SocialWidget({"SocialStreams":{"blog":{"label":"Blog","url":"http://redeando.blogspot.com/feeds/posts/default?alt=rss"},"facebook":{"label":"Facebook","url":"208808342516279"},"twitter":{"label":"Twitter","url":"redeandoblog"},"youtube":{"label":"Youtube","url":"JohnnyUve"}},"selector":"#SocialStream","theme":{"name":"tabsplane","shell":{"background":"#ffffff","color":"#000000","links":"#333333","height":"370"},"tweets":{"background":"none","color":"#333","links":"#333"}},"widgetTitle":"","timeout":30000});</script><br />
<br />
<center><a href="http://www.socialstreamwidget.com" class="botongriselegante" target="_blank">visitar Social Stream Widget</a></center><br/><br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-3254757402690057562014-07-10T23:14:00.000+02:002014-07-10T23:14:42.491+02:00Juego de San Fermin 'Bull Run Fever'<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrE8BLtmMzUMP_1QGbLO-GB_Phyphenhypheng10FrmqN4XwC4WEG12zOf2yD0WOY3IVfX9ViympSr977Z2gF_wPigWqpYoVB-BsrzctKMVIbBhwLQukbjZr2502wLkQNbDjR20LJqZ2IC5T07fl5RY/s1600/juego+san+fermin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:1px solid #655C57;-webkit-box-shadow: 0px 6px 14px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 6px 14px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 6px 14px 0px rgba(50, 50, 50, 0.75);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrE8BLtmMzUMP_1QGbLO-GB_Phyphenhypheng10FrmqN4XwC4WEG12zOf2yD0WOY3IVfX9ViympSr977Z2gF_wPigWqpYoVB-BsrzctKMVIbBhwLQukbjZr2502wLkQNbDjR20LJqZ2IC5T07fl5RY/s1600/juego+san+fermin.png" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Aprovechando las fechas en las que estamos, os traigo este juego proporcionado por la web <a href="http://www.juegosflasher.com/juego-flash-Bull-Run-Fever.html" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.juegosflasher.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;color:#FFC600 !important;text-shadow: -1px 2px 2px #676867;"><b>Juegos Flasher</b></a> basado en las popularisimas fiestas de Pamplona.<br />
<br />
Disfruta de los encierros de San Fermines de una forma segura corriendo desde tu casa. Atento al chupinazo y empieza la carrera, recoge objetos que te ayudaran a salir de alli sin ninguna cornada, esquivando los obstaculos que encuentres.<br />
<br />
Si te gusta y quieres ponerlo en tu blog o web, simplemente copia y pega el codigo de abajo y pegalo alli donde quieras mostrarlo.<br />
</span></span></div><br />
<br />
<div style="text-align:center;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;color: #969798;font-size: 20px;"><b>CONTROLES:</b></span></span></div><div align="center"><ul class="game-controls center"><li><span class="type kb-arrows"></span><span class="action">Moverte</span></li><li><span class="type kb-spacebar"></span><span class="action">Saltar</span></li></ul></div><br />
<div align="center"><embed width="600" height="450" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" menu="false" src="https://a954da7b-a-62cb3a1a-s-sites.googlegroups.com/site/redeando1/bullrunfever.swf"></div><section class='window'><label>CODIGO</label><pre><div align="center"><embed width="600" height="450" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" menu="false" src="https://a954da7b-a-62cb3a1a-s-sites.googlegroups.com/site/redeando1/bullrunfever.swf"></div></pre></section><br />
<style>
.window {
margin:20px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.25);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.25);
box-shadow:0 1px 4px rgba(0,0,0,.25);
border-radius:4px;
}
.window label {
border:1px #a8a8a8 solid;
border-top:1px #b0b0b0 solid;
background-color: #444444;
background-image:-webkit-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:-moz-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:-ms-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:-o-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:linear-gradient(to bottom, #E5E5E5, #AEAEAE);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#E5E5E5', EndColorStr='#AEAEAE');
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow:inset 0 1px 0 #f2f2f2;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:13px;
margin:0;
padding:3px 0;
display:block;
text-align:center;
color:#464646;
text-shadow:0 1px 0 rgba(255,255,255,.75);
}
pre {
background:#1a1a1a;
display:block;
margin:0;
padding:12px 15px;
color:#E8E8E7;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
font-size:12px;
font-family:droid-sans-mono, monospace;
text-shadow:0 1px 0 #000;
overflow-x:scroll;
}
</style><br />
<style>
.game-controls {
margin-top: 8px;
}
.game-controls .type {
background: url("https://a954da7b-a-62cb3a1a-s-sites.googlegroups.com/site/redeando1/sprite.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 30px;
vertical-align: middle;
}
.game-controls .action {
margin-left: 4px;
}
.game-controls > li {
color: #969798;
display: inline-block;
font-size: 12px;
margin-bottom: 20px;
margin-right: 20px;
text-transform: uppercase;
vertical-align: top;
}
.game-controls .webcam {
background-position: -769px -608px;
width: 26px;
}
.game-controls .mouse-left-click {
background-position: -892px -608px;
height: 40px;
width: 40px;
}
.game-controls .mouse-right-click {
background-position: -956px -608px;
height: 40px;
width: 40px;
}
.game-controls .mouse-move {
background-position: -832px -608px;
height: 40px;
width: 40px;
}
.game-controls .kb-enter {
background-position: -608px -608px;
width: 28px;
}
.game-controls .kb-spacebar {
background-position: -320px -608px;
width: 64px;
}
.game-controls .kb-shift {
background-position: -416px -608px;
width: 44px;
}
.game-controls .kb-alt {
background-position: -480px -608px;
width: 44px;
}
.game-controls .kb-control {
background-position: -544px -608px;
width: 44px;
}
.game-controls .kb-wasd {
background-position: -96px -608px;
width: 90px;
}
.game-controls .kb-wasd-arrows {
background-position: -96px -608px;
width: 188px;
}
.game-controls .kb-arrows {
background-position: -194px -608px;
width: 90px;
}
.game-controls .kb-full {
background-position: -673px -608px;
width: 68px;
}
.game-controls .kb-generic-key {
background-position: -32px -608px;
color: #616365;
font-size: 12px;
line-height: 28px;
text-align: center;
text-shadow: 0 1px 0 #fff;
text-transform: uppercase;
width: 30px;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-81620954800523220622014-06-15T19:47:00.000+02:002014-06-15T19:47:30.378+02:00Edita tus videos automaticamente con Magisto<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Wwtms-KZiyv1Cwb_9jeWzHA5dF0nDXupGzg8MRguAnKp4qUjJtl4TbsVEfeuvCF1WJB-oTyJ7B4fZhiM69zkNB8hTH3Q7Qs1Jdhr7k3N_6rSPBIGzeHxdf96eLu91rGPXx87sjdnaCc/s1600/magisto.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Wwtms-KZiyv1Cwb_9jeWzHA5dF0nDXupGzg8MRguAnKp4qUjJtl4TbsVEfeuvCF1WJB-oTyJ7B4fZhiM69zkNB8hTH3Q7Qs1Jdhr7k3N_6rSPBIGzeHxdf96eLu91rGPXx87sjdnaCc/s1600/magisto.png" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Con 14 millones de usuarios, <a href="http://www.magisto.com" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.magisto.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 3px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 2px;padding-bottom: 4px;color:#65C8D3 !important;"><b><span style="color:#ffffff !important;">m</span>agisto</b></a> permite hacer montajes y presentaciones con tus fotos y/o videos gratuitamente. Tiene la particularidad de que realiza el montaje del video de forma automatica, casi magica, seleccionando los mejores momentos y añadiendo cambios de planos, efectos, etc... mientras suena la musica que se haya seleccionado. Los videos creados con Magisto se comparten facilmente en la red ya que, ademas de las conocidas redes sociales y el correo electronico, los videos se pueden enviar directamente a Youtube e incluso publicarlos en nuestro blog o web.</span></span></div><br />
<br />
<center><div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocgdjc6lzwRL-OuPdsUCP-r9UNjh8HENFo5H3KEwc-YLGB5yxGDnpbss0ssLdR1XlVYZkHoa6Rcw0UauVpYnoaj0x4o73Plvn5L5pHHSM_FV6_zyGqGl44Gw9Yk6tWaAGOGsNH0q-tPs/s1600/322bbau5Bc5.png)no-repeat center center;padding-top:78px;"><div style="position:relative;top:-59px;left:-1px;"><iframe height="324" width="576" frameborder="0" src="http://www.magisto.com/embed/PgEYOl1QGjA_Q0xnCzE"></iframe></div></div></center><br />
<br />
<center><a style="letter-spacing:2px;" href="http://www.magisto.com/" target="_blank" class="botonagr"><span>visitar Magisto</span></a></center><br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-55760224115523149102014-06-10T19:15:00.000+02:002014-06-10T19:15:07.751+02:00Mini-juegos del Mundial 2014 de Brasil<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Motivadas por el famoso Mundial futbolero de este año, algunas compañias desarrolladoras han sacado algunos jueguecitos dedicados al evento que se celebra en Brasil.<br />
<br />
Se trata de juegos sencillos en formato flash para echar unas partiditas online sin mas pretensiones que pasar un rato, sin grandes alardes graficos.<br />
<br />
Lo curioso es que los 3 que he encontrado por la red (por el momento) tienen la misma tematica: los penaltis.</span></span></div><br />
<div align="center"><div style="padding-left:30px;padding-right:30px;padding-top:120px;padding-bottom:60px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWO7P53YawTplm1SgdcsfGdoLkI6TeBwtuT3J91EfXnnptbQ4RA6QhHbd-Qk3MI8wC8NIMKRp20ZxHKWnZNqo1OdhBaln0YIqybnZJZVen62GDCQBHh91B_dWZGEVR80hnS3mz8EkDG-Q/s1600/10181532Ny5YOxWM.png) no-repeat center center"><div style="position:relative;top:-45px;-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;background:#1C9F43;width:450px;padding:10px;border:2px solid #F8E602;"><object width="450" height="300"><param name="movie" value="//www.youtube.com/v/-befR4wHsjQ?version=3&hl=es_ES&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/-befR4wHsjQ?version=3&hl=es_ES&rel=0" type="application/x-shockwave-flash" width="450" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object></div></div></div><br />
<br />
<div class="or-spacer"><div class="mask"></div><span><i><b>1</b></i></span></div><br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">El primero se llama "<b>World Cup Brazil 2014</b>" y esta realizado por el portal deusx.com. Los graficos son bastante decentes, eliges seleccion y compites contra las demas tirando penaltis con sus correspondientes efectos de balon y tambien intentandolos parar como arquero. La pagina que lo publica tambien nos da la posibilidad de insertarlo en nuestro blog o web mediante un codigo que nos proporcionan. Para acceder al juego, clica en la siguiente imagen:</span></span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a target="_blank" href="http://www.crazygames.com/game/world-cup-brazil-2014" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:1px solid #000000;-webkit-box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbw1GRAobPnjMvnM2qa2r8JOX1yZXObJz8neOznsqk4QVGke-rKoyGqPtNmzJGFK6_22BuUO81hz_xmuBvEC-T3vFfl2Pc8P00ErzHNgd4hcyqxOvTl4n8sUGsm2haKWLziX16aIdMN8I/s1600/mundial+2014+juego1.png" /></a></div><br />
<br />
<br />
<br />
<br />
<div class="or-spacer"><div class="mask"></div><span><i><b>2</b></i></span></div><br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">A continuacion, tenemos otro llamado "<b>2014 Soccer World Cup</b>" y desarrollado por Giochi Sport, en el que los graficos son mas sencillos en lo que futbolistas tienen un diseño mas humoristico. Tambien se nos permite elegir seleccion, para competir lanzando en este caso faltas con barrera contraria incluida. Para acceder al juego, clica en la siguiente imagen:</span></span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a target="_blank" href="http://www.yoypo.com/es/copa-mundial-de-futbol-2014/jugar" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:1px solid #000000;-webkit-box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyVB6pcSfhsN74UjNjjO65FAXL41c9Sn21xrs4aLUIBvYbWQg9pG2JpUMA7m_rTDz18nykXtFJvpCZ_tU36i3GjuU-19otPy7Ozwk1DccH_Le3TxlbCAAcsTJNa4nWTMQxL9B-Jtj5HUI/s1600/mundial+2014+juego2.png" /></a></div><br />
<br />
<br />
<br />
<br />
<div class="or-spacer"><div class="mask"></div><span><i><b>3</b></i></span></div><br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Por ultimo tenemos "<b>Penalty World Cup Brazil</b>", realizado por la company Yoypo, en la que la metodologia sera (como no) lanzar penaltis. La diferencia esta en que en este mini-juego controlaremos al famomosisimo Cristiano Ronaldo y por lo tanto a la seleccion de Portugal. Lo curioso es que al primer equipo que nos enfrentaremos es a la seleccion 'La Roja' Española. Para acceder al juego, clica en la siguiente imagen:</span></span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a target="_blank" href="http://8iz.com/game/penalty-world-cup-brazil" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:1px solid #000000;-webkit-box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 7px 7px 0px rgba(50, 50, 50, 0.75);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJK_Qzy78J0BUuCIItdHpXymagyDMpS3XKP0DloRAjaL-26JnAfUCzN2xX1Imr-zssUC1Y-QYuFF_OzIEKuJAxVPPvjTu_Z7Ulxjq2cFde0QOPsipMA9Y2qQC-IKdFzeLh2F_OVcbRPI/s1600/mundial+2014+juego3.png" /></a></div><br />
<br />
<br />
<br />
<style>
.or-spacer {
margin:0 auto;
width: 550px;
position: relative;
}
.or-spacer .mask {
overflow: hidden;
height: 20px;
}
.or-spacer .mask:after {
content: '';
display: block;
margin: -25px auto 0;
width: 100%;
height: 25px;
border-radius: 125px / 12px;
box-shadow: 0 0 8px black;
}
.or-spacer span {
width: 50px;
height: 50px;
position: absolute;
bottom: 100%;
margin-bottom: -25px;
left: 50%;
margin-left: -25px;
border-radius: 100%;
box-shadow: 0 2px 4px #999;
background: white;
}
.or-spacer span i {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
border-radius: 100%;
border: 1px dashed #aaa;
text-align: center;
line-height: 40px;
font-style: normal;
color: #999;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-57533623413026369242014-06-02T15:22:00.000+02:002014-06-02T16:12:03.335+02:00Fondo de noche estrellada para el blog<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHJASZfD4mjrjenB7m-0TsisfWCN90Djg8x-ovxTX0eQMUzmAfa6XzphCEcvL6YO1gD2EQ4V8cT-gV_vLEMhW1KINJlgwtCk4-35afFD3jDUPtH3RMVeWxfxJSlCthspvnK4JyHoD9Iw/s1600/fondo+estrellas.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;border:1px solid #cdcdcd;--webkit-box-shadow: -8px 6px 9px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -8px 6px 9px 0px rgba(50, 50, 50, 0.75);
box-shadow: -8px 6px 9px 0px rgba(50, 50, 50, 0.75);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHJASZfD4mjrjenB7m-0TsisfWCN90Djg8x-ovxTX0eQMUzmAfa6XzphCEcvL6YO1gD2EQ4V8cT-gV_vLEMhW1KINJlgwtCk4-35afFD3jDUPtH3RMVeWxfxJSlCthspvnK4JyHoD9Iw/s1600/fondo+estrellas.gif" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">En realidad se trata de un codigo muy sencillo, utilizando las posibilidades que nos da el <b>CSS</b> (en este caso el CSS3), las aprovecharemos para que nos de un fondo original sin recargar demasiado nuestra pagina.<br />
<br />
Indicado para los blogs o webs con el background principal oscuro, podemos mostrar a modo simulatorio unas estrellitas que centellean y parpadean sin parar como si el fondo de nuestro sitio se pareciera a un universo relajante.<br />
<br />
Para este tipo de asuntos, se suelen utilizar imagenes o texturas en formato gif, lo cual puede retardar un poco la carga de dicha pagina. Por eso y como ya he comentado anteriormente, he usado 2 imagenes estaticas y el CSS para darles las animaciones y transiciones pertinentes con un efecto suave, a la par que elegante y muy muy 'ligero' a nuestro querido <b>body</b>.<br />
<br />
Puedes ver una demo de como queda <a href="http://pruebasredeando.blogspot.com.es/" target="_blank"><b>clicando aqui</b></a>. Si te ha gustado y quieres ponertelo en tu pagina, copia el codigo de abajo y pegalo entre las etiquetas <b><body></b> de tu plantilla.</span></span></div><br />
<br />
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo fondo de noche estrellada</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;"><b><div class="estrellas"></div><br />
<style><br />
@keyframes move-twink-back {<br />
from {background-position:0 0;}<br />
to {background-position:-10000px 5000px;}<br />
}<br />
@-webkit-keyframes move-twink-back {<br />
from {background-position:0 0;}<br />
to {background-position:-10000px 5000px;}<br />
}<br />
@-moz-keyframes move-twink-back {<br />
from {background-position:0 0;}<br />
to {background-position:-10000px 5000px;}<br />
}<br />
@-ms-keyframes move-twink-back {<br />
from {background-position:0 0;}<br />
to {background-position:-10000px 5000px;}<br />
}<br />
.estrellas {<br />
position:absolute;<br />
top:0;<br />
left:0;<br />
right:0;<br />
bottom:0;<br />
width:100%;<br />
height:100%;<br />
display:block;<br />
}<br />
<br />
body {<br />
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghj9bINwCLBHb0eisbsNyPta830j-lSGy4cxwQnPh2D7G5VW6meZHUR8pBe_FeU-IlijZx23mDRFoBk_BkS5cma2urzcwJYMsWepbzT_1KfppJMQLfe_Uio4al0zMDPqxWNOyNByDPCdg/s1600/estrellas.png) repeat top center;<br />
}<br />
<br />
.estrellas{<br />
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_g8J7zQ1NSrzDIvootgPmtS9ivyjNQcAK1vhkReSLqVfyVYx-2v_Z4f5IV9LvFXGToZauTFFTYCXb5nLSVPAKZkG6ox8slt6hPqK0f6xck9jjnZa1vPSYCWLOf272Ezj7SmMgA5PTWQ/s1600/twinkling.png) repeat top center;<br />
z-index:-2;<br />
<br />
-moz-animation:move-twink-back 100s linear infinite;<br />
-ms-animation:move-twink-back 100s linear infinite;<br />
-o-animation:move-twink-back 100s linear infinite;<br />
-webkit-animation:move-twink-back 100s linear infinite;<br />
animation:move-twink-back 100s linear infinite;<br />
}<br />
</style></b><br />
</div></center><br />
<br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-21245252299895730632014-05-27T22:35:00.000+02:002014-05-27T22:35:05.564+02:00Crea animaciones graciosas en Anmish<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYnNbynN60ij6lsQN3cSOApUDUOsrGhxGoUV0Macs1Fb_Ak8_6bZxxtuxl1r1FkKBA1eCH0GQGysRuoes2rE5MAJmRLnyC-r1-CJ0J4N9MHru_ttJOpkylneAu3G8Awl-_cEiK3hzFC50/s1600/Anmish.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYnNbynN60ij6lsQN3cSOApUDUOsrGhxGoUV0Macs1Fb_Ak8_6bZxxtuxl1r1FkKBA1eCH0GQGysRuoes2rE5MAJmRLnyC-r1-CJ0J4N9MHru_ttJOpkylneAu3G8Awl-_cEiK3hzFC50/s1600/Anmish.png" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;"><a href="
http://anmish.com" target="_blank" style="background-color: transparent;text-shadow: -2px 1px 1px #000000;"><b>Anmish</b></a> es una interesante aplicacion gratuita que permite a los usuarios crear animaciones online con una gran cantidad de personajes conocidos dibujados como caricaturas o puppets, algo que puede resultar muy gracioso, dependiendo de la creatividad del usuario.<br />
<br />
Este sitio cuenta con las herramientas necesarias para agregar voces al personaje y asi generar un buen discurso que durante el video se podran ir realizando ajustes con las tomas de las posiciones de las camara, pero para hacer uso del mismo es necesario registrarse.<br />
<br />
Una vez lo tengamos, se nos proporcionara el codigo para insertar la animacion en formato flash, como podeis ver (y oir) aqui debajo.<br />
</span></span></div><br />
<br />
<center><div style="-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;width:580px;padding:7px;background:#677073;-webkit-box-shadow: 0px 6px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 6px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 6px 8px 0px rgba(50, 50, 50, 0.75);"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="580" height="446" id="GAROread" align="middle"><param name="movie" value="http://anmish.com/Sound/Sound/GAROread.swf" /><param name=FlashVars value="filename=1074673046555.ogg"><!--[if !IE]>--><object type="application/x-shockwave-flash" data="http://anmish.com/Sound/Sound/GAROread.swf" width="580" height="446"><param name="movie" value="http://anmish.com/Sound/Sound/GAROread.swf" /><param name=FlashVars value="filename=1074673046555.ogg "><!--<![endif]--><a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a><!--[if !IE]>--></object><!--<![endif]--></object></div></center>
<br/><br/>
<center><a href="http://anmish.com" target="_blank" class="botonagr"><span>visitar Anmish</span></a></center><br />
<br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-10154118082468073402014-05-25T23:45:00.000+02:002014-05-25T23:56:06.586+02:00Widgets del Mundial de futbol 2014<div class="separator" style="clear: both; text-align: center;"><a ="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="-webkit-box-shadow: 0px 10px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 12px 0px rgba(50, 50, 50, 0.75);border:2px solid #4e4e4e;background: #959595;
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -o-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -ms-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 );
" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiphbZ5ZvTPAPrKYewLQgoNgRuAkScPkLHo_2NNZijzg2pMyf9pjF6cgKofN8PD0FrR4bviSEM7z07pFIWnXOI0RkGLI4DLhK0lLKX43Bc6BWM8BIuOkU1Y6LHRqCWw0JGMZ1mpG-CYw/s1600/widgets+mundial.png" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Como el proximo Mundial de futbol de Brasil esta ahi a la vuelta de la esquina y siempre que puedo intento traer cosillas para vuestro blog o web relacionadas con la actualidad, aqui teneis estos widgets con motivo de tal evento. Si sale alguno mas nuevo en el transcurso de este tiempo, lo incluire tambien en este articulo proximamente. Que os gusta alguno y quereis ponerlo en vuestra pagina, pues solo teneis que copiar el codigo correspondiente y pegarlo alli donde querais mostrarlo.</span></span></div><br />
<br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">El primero corre acuenta de <a href="http://mycountdown.org" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.mycountdown.org"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;color:#BD7BB4 !important;"><b>my<span style="color:#652C90 !important;">countdown</span></b></a>, una web dedicada a esto de los contadores. Con motivo de la copa del mundo de este año, han realizado este sencillo widget flash con el logo oficial y un contador regresivo que marca el tiempo que falta para que empiece el mundial.</span></span></div><br />
<div align="center"><div style="border:1px solid #6C6D6C;width:500px;padding:25px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
"><div align="center"><script src="http://mycountdown.org/countdown.php?cp2_Hex=ffffff&cp1_Hex=1c5292&img=3&hbg=&fwdt=250&lab=0&ocd=FIFA World Cup&text1=World Cup&text2=Brasil World Cup!&group=Sports&countdown=FIFA World Cup&widget_number=3012&timezone=UTC" type="text/javascript"></script></div><br />
<center><textarea id="prcode" class="prcode" onfocus="this.select()" rows="4" cols="45"><div align="center"><script src="http://mycountdown.org/countdown.php?cp2_Hex=ffffff&cp1_Hex=1c5292&img=3&hbg=&fwdt=250&lab=0&ocd=FIFA World Cup&text1=World Cup&text2=Brasil World Cup!&group=Sports&countdown=FIFA World Cup&widget_number=3012&timezone=UTC" type="text/javascript"></script></div></textarea></center></div></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">El siguiente nos lo proporciona la pagina oficial de la <a href="http://es.fifa.com/newscentre/widgets/" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.fifa.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;"><b>FIFA</b></a>, en el que nos informan puntualmente de todas las noticias y resultados del campeonato.</span></span></div><br />
<div align="center"><div style="border:1px solid #6C6D6C;width:500px;padding:25px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
"><div align="center"><object width='300' height='400' id='flashWorldCup' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'> <param name='movie' value='http://www.fifa.com/flash/widgets/fwcqualifiers/main.swf?team=esp&lang=s'/><param name='bgcolor' value='#ffffff'/><param name='quality' value='high'/><param name='wmode' value='transparent'/><param name='flashvars' value='lang=s&team=esp'><embed width='300' height='400' flashvars='lang=s&team=esp' wmode='transparent' quality='high' bgcolor='#ffffff' name='flashWorldCup' id='flashWorldCup' src=http://www.fifa.com/flash/widgets/fwcqualifiers/main.swf?team=esp&lang=s type='application/x-shockwave-flash'/></object></div><center><textarea id="prcode" class="prcode" onfocus="this.select()" rows="4" cols="45"><div align="center"><object width='300' height='400' id='flashWorldCup' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'> <param name='movie' value='http://www.fifa.com/flash/widgets/fwcqualifiers/main.swf?team=esp&lang=s'/><param name='bgcolor' value='#ffffff'/><param name='quality' value='high'/><param name='wmode' value='transparent'/><param name='flashvars' value='lang=s&team=esp'><embed width='300' height='400' flashvars='lang=s&team=esp' wmode='transparent' quality='high' bgcolor='#ffffff' name='flashWorldCup' id='flashWorldCup' src=http://www.fifa.com/flash/widgets/fwcqualifiers/main.swf?team=esp&lang=s type='application/x-shockwave-flash'/></object></div></textarea></center></div></div><br/><br/>
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">La web del gobierno brasileño llamada <a href="http://www.copa2014.gov.br/es/widgetebanners" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.copa2014.gov.br"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;color:#19A75F !important;"><b>Portal de la Copa</b></a> nos ofrece este widget en el que estaremos al tanto de todo lo que acontece en el pais relacionado con el mundial 2014.</span></span></div><br/>
<div align="center"><div style="border:1px solid #6C6D6C;width:500px;padding:25px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
"><div align="center"><script text="text/javascript">widget_largura="257px";widget_altura="467px";url="http://www.copa2014.gov.br/es/widgets_noticias/all/all";</script><script text="text/javascript" src="http://www.copa2014.gov.br/sites/all/themes/copa_v2/js/widget_portaldacopa.js"></script></div><center><textarea id="prcode" class="prcode" onfocus="this.select()" rows="4" cols="45"><div align="center"><script text="text/javascript">widget_largura="257px";widget_altura="467px";url="http://www.copa2014.gov.br/es/widgets_noticias/all/all";</script><script text="text/javascript" src="http://www.copa2014.gov.br/sites/all/themes/copa_v2/js/widget_portaldacopa.js"></script></div></textarea></center></div></div><style>
textarea {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1U92xPT81vAycKO1dnyTbG1bn2_C-V9TNhtCPO5HzcXuSLtZa-C5Fflj9ek3zRXihsje_9u2_fS1a4VqovoigrlRmPsdGlAkltST-WyqHIXoRk8wpjsQw_5rzonmYIHSKfrfllbnZYn8/s109/Screenshot_2.jpg") repeat scroll 0 0 transparent;
border: 1px solid #6C6D6C;
color: #000000 !important;padding-top:10px;
}
</style>
<br/>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-30177180615996951332014-04-25T00:49:00.000+02:002014-04-25T00:49:32.562+02:00Barcelona Televisió en tu web<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg760Wil5szHjxrrT_kU928tn-1oNNQUEZZSzLZhAOIkmiGNmMFcmhBD463paYDHfTSwpJYobHkpVNC4fKYIjo3VKiUnNbfmjnUME1ZjaBR6nb2QQTshHYVkXTf9JpMtcwZqWLjhGvFAA8/s1600/barcelona+televisio.png" imageanchor="1" style="clear: right; float: right; margin-top: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg760Wil5szHjxrrT_kU928tn-1oNNQUEZZSzLZhAOIkmiGNmMFcmhBD463paYDHfTSwpJYobHkpVNC4fKYIjo3VKiUnNbfmjnUME1ZjaBR6nb2QQTshHYVkXTf9JpMtcwZqWLjhGvFAA8/s1600/barcelona+televisio.png" /></a></div><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;"><a href="http://www.btv.cat/" style="background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.btv.cat"); background-origin: padding-box; background-position: 1px center; background-repeat: no-repeat; background-size: 16px auto; color: #EC0000 !important; padding-left: 18px;" target="_blank"><b>Barcelona Televisió</b></a> es el canal de televisión local publico de la ciudad condal, lleva emitiendo desde el año 1994 y actualmente tambien lo hace por internet. Desde su <a href="http://www.btv.cat/" style="background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.btv.cat"); background-origin: padding-box; background-position: 1px center; background-repeat: no-repeat; background-size: 16px auto; color: #EC0000 !important; padding-left: 18px;" target="_blank"><b>pagina oficial</b></a> nos dan la posibilidad de añadir su reproductor online en nuestro blog o web. Por si te interesa este canal (totalmente en catalan), y quieres ponerlo en tu pagina, tan solo tienes que copiar el codigo correspondiente (tambien lo puedes copiar en el mismo reproductor) y pegarlo alli donde quieras mostrarlo.</span></span></div><br />
<br />
<center><div style="width:530px;height:px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;padding:35px;border:4px solid #3A3A3A;background: #959595;
background: -moz-linear-gradient(-45deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
background: -webkit-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -o-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -ms-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: linear-gradient(135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 );-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.8);box-shadow: 0px 0px 15px rgba(0,0,0,.8);
"><iframe id='flumotion_iframe_player' name='flumotion_iframe_player' src='http://play.barcelonatv2.webtv.flumotion.com/play/player?playerId=7&podId=1323' scrolling='no' frameborder=0 width='528px' height='420px' allowFullScreen webkitallowfullscreen mozallowfullscreen></iframe><br />
<br />
<center><textarea id="prcode" class="prcode" onfocus="this.select()" rows="4" cols="60"><div align="center"><iframe id='flumotion_iframe_player' name='flumotion_iframe_player' src='http://play.barcelonatv2.webtv.flumotion.com/play/player?playerId=7&podId=1323' scrolling='no' frameborder=0 width='600px' height='400px' allowFullScreen webkitallowfullscreen mozallowfullscreen></iframe></div></textarea></center></div></center><br />
<br />
<style>
textarea {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1U92xPT81vAycKO1dnyTbG1bn2_C-V9TNhtCPO5HzcXuSLtZa-C5Fflj9ek3zRXihsje_9u2_fS1a4VqovoigrlRmPsdGlAkltST-WyqHIXoRk8wpjsQw_5rzonmYIHSKfrfllbnZYn8/s109/Screenshot_2.jpg") repeat scroll 0 0 transparent;
border: 2px solid #000000;
color: #000000 !important;padding-top:10px;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-30941049338099424942014-04-14T23:32:00.000+02:002014-04-15T05:52:44.555+02:00Formulario de busqueda original para el blog<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghMS85h2u18GyaAvS0tB2kZM0G4K-h5UmZ1qKUa6yeAKMMalNGoUxDfKxXP4wrjIq5G0EJ3bfWp_0CcaMpGs1_wsooa09AfSeEkhXGfY6Jt5szoCd6Mnni32cjQykyJcYE0sn2eimM5Tk/s1600/buscador.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="background: #e8e8e8;
background: -moz-linear-gradient(-45deg, #e8e8e8 0%, #ffffff 20%, #e2e2e2 38%, #ffffff 53%, #d8d8d8 76%, #ffffff 87%, #d3d3d3 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e8e8e8), color-stop(20%,#ffffff), color-stop(38%,#e2e2e2), color-stop(53%,#ffffff), color-stop(76%,#d8d8d8), color-stop(87%,#ffffff), color-stop(100%,#d3d3d3));
background: -webkit-linear-gradient(-45deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
background: -o-linear-gradient(-45deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
background: -ms-linear-gradient(-45deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
background: linear-gradient(135deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d3d3d3',GradientType=1 );
-webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;padding:10px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghMS85h2u18GyaAvS0tB2kZM0G4K-h5UmZ1qKUa6yeAKMMalNGoUxDfKxXP4wrjIq5G0EJ3bfWp_0CcaMpGs1_wsooa09AfSeEkhXGfY6Jt5szoCd6Mnni32cjQykyJcYE0sn2eimM5Tk/s1600/buscador.gif" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Con un sencillo diseño, original y gracioso, os presento este formulario de busqueda realizado integramente utilizando CSS. Una manera diferente de presentar esta utilidad imprescindible para todo buen blog que se precie. Se puede utilizar en Blogger y en practicamente todas las plataformas blogueras. Si os gusta y quereis ponerlo en vuestro blog, elegid un de los dos, copiad el codigo correspondiente y pegadlo donde querais mostrarlo. <b>Sustituid la parte que esta en color rojo por la direccion URL de vuestro blog</b>. Si vuestro blog tiene el fondo claro, aconsejo elegir el primer modelo, de tenerlo oscuro, el segundo.</span></span></div><br />
<br />
<center><div style="width:500px;padding:20px;border:1px solid #cdcdcd;-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;"><br />
<div class="contenedorform"><div class="textoindicativo">buscador -> </div><form class="buscabusca" action='http://redeando.blogspot.com/search' method='get' target="_blank"><input type="text" placeholder="buscar..." required name="q"></div></form><br />
<br />
<br />
<br />
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;"><b><div class="contenedorform"><br />
<div class="textoindicativo"><br />
buscador -> </div><br />
<form class="buscabusca" action='<span style="color: red;">http://redeando.blogspot.com</span>/search' method='get' target="_blank"><br />
<input type="text" placeholder="buscar..." required name="q"></div><br />
</form><br />
<style><br />
.contenedorform{<br />
width:250px;<br />
margin: 0 auto; <br />
}<br />
.textoindicativo{<br />
font-family: 'Gochi Hand', cursive;<br />
font-size:27px;font-weight:bold;<br />
float:left;padding-top:6px;color: #111;<br />
position:relativeM;<br />
}<br />
<br />
input:focus{<br />
border:0;<br />
outline:0;<br />
font-family:Century Gothic;<br />
font-size:15px;color:#5D5E5E;<br />
}<br />
<br />
.buscabusca{<br />
width:20px;<br />
height:20px;<br />
border: 4px solid #111;<br />
border-radius:10px;<br />
transition:<br />
height .2s ease .5s,<br />
width .5s ease 0s;<br />
position:relative;<br />
float:left;<br />
margin-left:5px;<br />
top:5px;<br />
}<br />
<br />
.buscabusca input{<br />
font-weight:700;<br />
height:0px;<br />
width:0px;<br />
border:0;<br />
margin:0;<br />
padding:0 10px;<br />
background:transparent;<br />
}<br />
<br />
.buscabusca:after{<br />
content:"";<br />
position:absolute;<br />
width:1px;<br />
height:7px;<br />
bottom:-8px;<br />
right:-5px;<br />
background:#111;<br />
border: 2px solid #111;<br />
transform:rotate(-45deg);<br />
transition:all .2s ease;<br />
}<br />
<br />
.buscabusca:hover{<br />
width:100px;<br />
height:30px;<br />
transition:<br />
height .2s ease,<br />
width .2s ease .2s;<br />
}<br />
<br />
.buscabusca:hover input{<br />
width:100%;<br />
height:100%;<br />
transition:all .2s ease;<br />
}<br />
</style><br />
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'></b><br />
</div></center><br />
</div></center><br />
<br />
<br />
<center><div style="background:#000;width:500px;padding:20px;-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;"><br />
<div class="contenedorform2"><div class="textoindicativo2">buscador -> </div><form class="buscabusca2" action='http://redeando.blogspot.com/search' method='get' target="_blank"><input type="text" placeholder="buscar..." required name="q""></div></form><br />
<br />
<br />
<br />
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;"><b><div class="contenedorform2"><br />
<div class="textoindicativo2"><br />
buscador -> </div><br />
<form class="buscabusca2" action='<span style="color: red;">http://redeando.blogspot.com</span>/search' method='get' target="_blank"><br />
<input type="text" placeholder="buscar..." required name="q"></div><br />
</form><br />
<style><br />
.contenedorform2{<br />
width:250px;<br />
margin: 0 auto; <br />
}<br />
.textoindicativo2{<br />
font-family: 'Gochi Hand', cursive;<br />
font-size:27px;font-weight:bold;<br />
float:left;padding-top:6px;<br />
position:relativeM;color: #cdcdcd;<br />
}<br />
<br />
input:focus{<br />
border:0;<br />
outline:0;font-family:Century Gothic;<br />
font-size:15px;color: #cdcdcd;<br />
}<br />
<br />
.buscabusca2{<br />
width:20px;<br />
height:20px;<br />
border: 4px solid #cdcdcd;<br />
border-radius:10px;<br />
transition:<br />
height .2s ease .5s,<br />
width .5s ease 0s;<br />
position:relative;<br />
float:left;<br />
margin-left:5px;<br />
top:5px;<br />
}<br />
<br />
.buscabusca2 input{<br />
font-weight:700;<br />
height:0px;<br />
width:0px;<br />
border:0;<br />
margin:0;<br />
padding:0 10px;<br />
background:transparent;<br />
}<br />
<br />
.buscabusca2:after{<br />
content:"";<br />
position:absolute;<br />
width:1px;<br />
height:7px;<br />
bottom:-8px;<br />
right:-5px;<br />
background:#cdcdcd;<br />
border: 2px solid #cdcdcd;<br />
transform:rotate(-45deg);<br />
transition:all .2s ease;<br />
}<br />
<br />
.buscabusca2:hover{<br />
width:100px;<br />
height:30px;<br />
transition:<br />
height .2s ease,<br />
width .2s ease .2s;<br />
}<br />
<br />
.buscabusca2:hover input{<br />
width:100%;<br />
height:100%;<br />
transition:all .2s ease;<br />
}<br />
</style><br />
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'></b><br />
</div></center><br />
</div></center><style>
.contenedorform{
width:250px;
margin: 0 auto;
}
.textoindicativo{
font-family: 'Gochi Hand', cursive;
font-size:27px;font-weight:bold;
float:left;padding-top:6px;color: #111;
position:relativeM;
}
input:focus{
border:0;
outline:0;
font-family:Century Gothic;
font-size:15px;color:#5D5E5E;
}
.buscabusca{
width:20px;
height:20px;
border: 4px solid #111;
border-radius:10px;
transition:
height .2s ease .5s,
width .5s ease 0s;
position:relative;
float:left;
margin-left:5px;
top:5px;
}
.buscabusca input{
font-weight:700;
height:0px;
width:0px;
border:0;
margin:0;
padding:0 10px;
background:transparent;
}
.buscabusca:after{
content:"";
position:absolute;
width:1px;
height:7px;
bottom:-8px;
right:-5px;
background:#111;
border: 2px solid #111;
transform:rotate(-45deg);
transition:all .2s ease;
}
.buscabusca:hover{
width:100px;
height:30px;
transition:
height .2s ease,
width .2s ease .2s;
}
.buscabusca:hover input{
width:100%;
height:100%;
transition:all .2s ease;
}
</style><br />
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'><br />
<style>
.contenedorform2{
width:250px;
margin: 0 auto;
}
.textoindicativo2{
font-family: 'Gochi Hand', cursive;
font-size:27px;font-weight:bold;
float:left;padding-top:6px;
position:relativeM;color: #cdcdcd;
}
input:focus{
border:0;
outline:0;font-family:Century Gothic;
font-size:15px;color: #cdcdcd;
}
.buscabusca2{
width:20px;
height:20px;
border: 4px solid #cdcdcd;
border-radius:10px;
transition:
height .2s ease .5s,
width .5s ease 0s;
position:relative;
float:left;
margin-left:5px;
top:5px;
}
.buscabusca2 input{
font-weight:700;
height:0px;
width:0px;
border:0;
margin:0;
padding:0 10px;
background:transparent;
}
.buscabusca2:after{
content:"";
position:absolute;
width:1px;
height:7px;
bottom:-8px;
right:-5px;
background:#cdcdcd;
border: 2px solid #cdcdcd;
transform:rotate(-45deg);
transition:all .2s ease;
}
.buscabusca2:hover{
width:100px;
height:30px;
transition:
height .2s ease,
width .2s ease .2s;
}
.buscabusca2:hover input{
width:100%;
height:100%;
transition:all .2s ease;
}
</style><br />
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-91509654556724467022014-04-11T21:29:00.000+02:002014-04-11T21:29:08.339+02:00Batman cumple 75 tacos<center><div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBsRlcfvrIpd7MWM9fBoqRtYO9H_eM9iDvzujb_Fw9nAbVgCWn751T4mY58ASFNnh0ciKv-dNGglFbIFecEr7-1jypn6xJ0kXZt9a05c20rfd7c2jwEIiwb-sgvC92TwKWqVSyV3gm9j0/s1600/batman_6pz.jpg)no-repeat #000000;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><a "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_YNr8urM9U5gSIuFsKPubjW2ghpkQJyvlL8aH2Wq5PlJe5MWF23YZ6FKhkPkUgWQyMHoKmWddxNJR_WMvek9IZEdk-jAEqfGIMBuiRHJzJrDhusfza2CYtbecknpZB2E_GgWXS_ICmW4/s1600/batman.gif" imageanchor="1" style="clear: right; float: right; margin-top: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_YNr8urM9U5gSIuFsKPubjW2ghpkQJyvlL8aH2Wq5PlJe5MWF23YZ6FKhkPkUgWQyMHoKmWddxNJR_WMvek9IZEdk-jAEqfGIMBuiRHJzJrDhusfza2CYtbecknpZB2E_GgWXS_ICmW4/s1600/batman.gif" /></a><span style="font-size: large;"><span style="color: #cdcdcd; font-family: 'Nunito', sans-serif;">Si hace un año se cumplia el 75 aniversario de Superman, ahora le toca el turno al hombre murcielago. Pues si amig@s, porque Batman se creo un mes de mayo de 1939 por Bob Kane y Bill Finger. Para commemorar tal evento, Bruce Timm, (co-responsable de Batman: The Animated Series) ha realizado este corto que remite a los origenes del personaje. Un 'look de 1939', segun sus responsables, coprotagonizada por un conocido villano de Batman: Hugo Strange.</span></span></div><br />
<br />
<center><div style="width:530px;height:px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;padding:35px;border:4px solid #3A3A3A;background: #959595;
background: -moz-linear-gradient(-45deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
background: -webkit-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -o-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -ms-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: linear-gradient(135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 );-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.8);box-shadow: 0px 0px 15px rgba(0,0,0,.8);
"><div style="border-top:3px solid #4F4F4F;border-right:2px solid #000000;"><object width="528" height="420"><param name="movie" value="//www.youtube.com/v/IFwOS2R9o_8?hl=es_ES&version=3&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/IFwOS2R9o_8?hl=es_ES&version=3&rel=0" type="application/x-shockwave-flash" width="528" height="420" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
</div></div></center><br />
<br />
<br />
</div></center>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-47870594708426504652014-04-09T19:29:00.001+02:002014-04-09T19:29:39.810+02:00Reproductores para videos de YouTube<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNq26i3A4HncUebiFme434k582dS63J_cX_eZxF-vZWs9bwBbZ71aGLxLJCvGohZEknd9nxU3n54FSYA-w6_1RYEnM_N7KcCFf1ht3qyDYVm_WzrR7yZU7kWKLlKqS6o_WgrvXiiblw0/s1600/youtube+widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNq26i3A4HncUebiFme434k582dS63J_cX_eZxF-vZWs9bwBbZ71aGLxLJCvGohZEknd9nxU3n54FSYA-w6_1RYEnM_N7KcCFf1ht3qyDYVm_WzrR7yZU7kWKLlKqS6o_WgrvXiiblw0/s640/youtube+widget.png" style="-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;border:4px solid #262626;-webkit-box-shadow: 0px 10px 14px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 14px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 14px 0px rgba(50, 50, 50, 0.75);" width="520" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Si quieres mostrar los videos de YouTube en tu blog o web de una manera diferente, aqui te traigo estos 2 reproductores tan originales en formato flash que, ademas son personalizables y te permiten poner el titulo que tu quieras. Puedes verlos en funcionamiento aqui debajo, elige el que mas te guste y copia el codigo correspondiente. Si deseas descargarte los archivos flash (swf) para alojarlos donde tu quieras, puedes hacerlo clicando <a href="https://sites.google.com/site/redeando1/reproductores%20flash%20youtube.zip?attredirects=0&d=1" target="_blank"><b>aqui</b></a>.</span></span></div><center><object type="application/x-shockwave-flash" height="410" width="610" data="https://sites.google.com/site/redeando1/1.swf"><param name="movie" value="https://sites.google.com/site/redeando1/1.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=Torrente 5&&Video_url=http://www.youtube.com/v/stRGxxOWt5k?version=2;autoplay=0;loop=1&" /></object></center><center><section class='window'><label>CODIGO</label><pre><b><object type="application/x-shockwave-flash" height="410" width="610" data="https://sites.google.com/site/redeando1/1.swf"><param name="movie" value="https://sites.google.com/site/redeando1/1.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=<span style="color: #3d85c6;">TEXTO</span>&&Video_url=http://www.youtube.com/v/<span style="color: red;">VIDEO</span>?version=2;autoplay=<span style="color: #6aa84f;">0</span>;loop=1&" /></object></b>
</pre></section></center>
<br/><br/>
<center><img alt="" border="0" height="12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcOgve8iF3B0h2AtoEg1c77vRSXcQMVttjJnjRnCrbVECEY6ztoDywVPUb0AZoPAMw4_5vcx98i8sYAIEITcM3frsR8xxDOMF9q1eLvgsmytjC7eh1kRuSd2Dzf2oFYYJbGnMNNj1cck/s640/separator1.png" width="640" class="sinborde" height="8"/></center>
<center><object type="application/x-shockwave-flash" height="410" width="610" data="https://sites.google.com/site/redeando1/2.swf"><param name="movie" value="https://sites.google.com/site/redeando1/2.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=Los Mercenarios 3&&Video_url=http://www.youtube.com/v/5bPJrbzjLls?version=2;autoplay=0;loop=1&" /></object></center><center><section class='window'><label>CODIGO</label><pre><b><object type="application/x-shockwave-flash" height="410" width="610" data="https://sites.google.com/site/redeando1/2.swf"><param name="movie" value="https://sites.google.com/site/redeando1/2.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=<span style="color: #3d85c6;">TEXTO</span>&&Video_url=http://www.youtube.com/v/<span style="color: red;">VIDEO</span>?version=2;autoplay=<span style="color: #6aa84f;">0</span>;loop=1&" /></object></b>
</pre></section></center>
<br/><br/>
<center><img alt="" border="0" height="12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcOgve8iF3B0h2AtoEg1c77vRSXcQMVttjJnjRnCrbVECEY6ztoDywVPUb0AZoPAMw4_5vcx98i8sYAIEITcM3frsR8xxDOMF9q1eLvgsmytjC7eh1kRuSd2Dzf2oFYYJbGnMNNj1cck/s640/separator1.png" width="640" class="sinborde" height="8"/></center><br/><br/>
<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;"><u><b>CONFIGURACION:</b></u> Para poner un video, tienes que copiar la <b>id</b> de YouTube de dicho video, que aparece en la barra de direcciones (ver imagen de abajo) y pegarlo en lugar de donde pone <span style="color: red;"><b>VIDEO</b></span> (en color rojo). El titulo lo añades donde pone <span style="color: #3d85c6;"><b>TEXTO</b></span> (en azul). Si quieres que se reproduzca automaticamente, cambias el <span style="color: #6aa84f;"><b>0</b></span> (en verde) por el 1, de lo contrario, lo dejas tal cual.</span></span></div>
<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMCXRfdwIiNkDETQwz9FtMvg_Yz3ePi5CoNxt-2dOfQCsljuOHMSO72g6ICkhxhk_FASc3GplPnmy4d0tP2vCMvaX7Dse2o4IlZ9HdKEHfkfSm4OuCHekqU0GQk58F8Ey9rHXv15cIWU/s1600/id.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMCXRfdwIiNkDETQwz9FtMvg_Yz3ePi5CoNxt-2dOfQCsljuOHMSO72g6ICkhxhk_FASc3GplPnmy4d0tP2vCMvaX7Dse2o4IlZ9HdKEHfkfSm4OuCHekqU0GQk58F8Ey9rHXv15cIWU/s1600/id.png" width="350" /></a></div>
<br/><br/>
<style>
.window {
margin:0px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.25);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.25);
box-shadow:0 1px 4px rgba(0,0,0,.25);
border-radius:4px;width:500px;
}
.window label {
border:1px #a8a8a8 solid;
border-top:1px #b0b0b0 solid;
background-color: #444444;
background-image:-webkit-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:-moz-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:-ms-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:-o-linear-gradient(top, #E5E5E5, #AEAEAE);
background-image:linear-gradient(to bottom, #E5E5E5, #AEAEAE);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#E5E5E5', EndColorStr='#AEAEAE');
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow:inset 0 1px 0 #f2f2f2;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:13px;
margin:0;
padding:3px 0;
display:block;
text-align:center;
color:#464646;
text-shadow:0 1px 0 rgba(255,255,255,.75);
}
pre {
background:#CDCDCD;
display:block;
margin:0;
padding:12px 15px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
font-size:12px;
font-family:droid-sans-mono, monospace;
overflow-x:scroll;
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-85380163852971764772014-04-03T20:53:00.000+02:002014-04-03T20:53:00.379+02:00Escudo del Capitan America con animacion<div style="padding-left: 20px; padding-right: 20px; text-align: justify;">
<a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hGBmdRaC_B5VYOPCS05v3TurlNq53Nm3UEv4qq3SOnO554ZSfmU0PU-P7jq36kJ3bkb0QgKTfo-mHMxNgqmtyvqtLXIG4YoJce_f0qbR8mbF1wXSUfNiUsmMQFgmAKOKpbVnbC3kDr8/s1600/capitan+america.png" imageanchor="1" style="clear: right; float: right; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hGBmdRaC_B5VYOPCS05v3TurlNq53Nm3UEv4qq3SOnO554ZSfmU0PU-P7jq36kJ3bkb0QgKTfo-mHMxNgqmtyvqtLXIG4YoJce_f0qbR8mbF1wXSUfNiUsmMQFgmAKOKpbVnbC3kDr8/s1600/capitan+america.png" /></a><span style="font-size: 21px;"><span style="font-family: 'Nunito', sans-serif;">Ahora que esta de moda el Capitan America por sus recientes peliculas, os presento este diseño del escudo del mitico heroe de las barras y estrellas. Como podeis ver, es identico al del comic, esta animado como si se 'autodibujara' y realizado usando <a href="http://es.wikipedia.org/wiki/Scalable_Vector_Graphics" target="_blank">SVG</a> y CSS3.</span></span></div>
<br/><br/>
<div align="center"><svg width="502px" height="502px" viewBox="0 0 502 502" version="1.1">
<circle class="capitanamerica" stroke="#D52120" fill="#D52120" cx="251" cy="251" r="250"></circle>
<circle class="capitanamerica" stroke="#F7F7F7" fill="#F7F7F7" cx="251" cy="251" r="205"></circle>
<path class="capitanamerica" d="M251,411 C339.365564,411 411,339.365564 411,251 C411,162.634436 339.365564,91 251,91 C162.634436,91 91,162.634436 91,251 C91,339.365564 162.634436,411 251,411 Z" stroke="#D52120" fill="#D52120"></path>
<circle class="path" stroke="#4990E2" fill="#4990E2" cx="251" cy="251" r="115"></circle>
<polygon class="capitanamerica" stroke="#F7F7F7" fill="#F7F7F7" points="250.999997 308.5 183.404701 344.036958 196.314251 268.768479 141.6285 215.463048 217.202359 204.481515 251.000001 136 284.797664 204.481532 360.371518 215.463103 305.685744 268.768494 318.595296 344.03696 "></polygon>
</svg></div>
<br/><br/><br/>
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver el codigo utilizado</a><div style="display: none;color:#000;background:#F7F7F7;border:0px solid #999999;text-align:left;padding:20px;border-radius:20px;-webkit-box-shadow: -4px 5px 5px 0px rgba(48, 50, 50, 0.5);
-moz-box-shadow: -4px 5px 5px 0px rgba(48, 50, 50, 0.5);
box-shadow: -4px 5px 5px 0px rgba(48, 50, 50, 0.5);">
<b><div align="center"><svg width="502px" height="502px" viewBox="0 0 502 502" version="1.1"><br /><circle class="capitanamerica" stroke="#D52120" fill="#D52120" cx="251" cy="251" r="250"></circle><br /><circle class="capitanamerica" stroke="#F7F7F7" fill="#F7F7F7" cx="251" cy="251" r="205"></circle><br /><path class="capitanamerica" d="M251,411 C339.365564,411 411,339.365564 411,251 C411,162.634436 339.365564,91 251,91 C162.634436,91 91,162.634436 91,251 C91,339.365564 162.634436,411 251,411 Z" stroke="#D52120" fill="#D52120"></path><br /><circle class="path" stroke="#4990E2" fill="#4990E2" cx="251" cy="251" r="115"></circle><br /> <polygon class="capitanamerica" stroke="#F7F7F7" fill="#F7F7F7" points="250.999997 308.5 183.404701 344.036958 196.314251 268.768479 141.6285 215.463048 217.202359 204.481515 251.000001 136 284.797664 204.481532 360.371518 215.463103 305.685744 268.768494 318.595296 344.03696 "></polygon><br /></svg></div><br /><style><br />.capitanamerica {<br /> stroke-dashoffset:1600;<br /> stroke-dasharray:1600;<br /> -webkit-animation: draw 5s linear infinite;<br /> -moz-animation: draw 5s linear infinite;<br /> animation: draw 5s linear infinite;<br /> fill-opacity: 0;<br />}<br /><br />@-webkit-keyframes draw {<br /> 30%{stroke-dashoffset:0; fill-opacity: 0;}<br /> 50%{fill-opacity:1;} <br /> 100%{stroke-dashoffset:0; fill-opacity:1;} <br />}<br /><br />@-moz-keyframes draw {<br /> 30%{stroke-dashoffset:0; fill-opacity: 0;}<br /> 50%{fill-opacity:1;} <br /> 100%{stroke-dashoffset:0; fill-opacity:1;} <br />}<br /><br />@keyframes draw {<br /> 30%{stroke-dashoffset:0; fill-opacity: 0;}<br /> 50%{fill-opacity:1;} <br /> 100%{stroke-dashoffset:0; fill-opacity:1;} <br />}<br /></style></b>
</div></center>
<br/>
<style>
.capitanamerica {
stroke-dashoffset:1600;
stroke-dasharray:1600;
-webkit-animation: draw 5s linear infinite;
-moz-animation: draw 5s linear infinite;
animation: draw 5s linear infinite;
fill-opacity: 0;
}
@-webkit-keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
@-moz-keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
@keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-77748945991263591732014-03-28T21:57:00.000+01:002014-03-29T00:19:28.290+01:00Entradas populares con forma de cubo 3D para Blogger<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzkizvD2nLBSW870_2EMbh30x8EDmH7I3cbIBPWsPRhBqIvvaRHV5c3IYrXdXFvP_JvU6MQ532MTrf6yOvEqT2_J0fB1-I8b-9gym12b51yYw-b-vbAzYt8No7VCjTco7IYaPxf6ADyI/s1600/cubo3d.gif" imageanchor="1" style="clear: right; float: right; margin-left: 1em; margin-top: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzkizvD2nLBSW870_2EMbh30x8EDmH7I3cbIBPWsPRhBqIvvaRHV5c3IYrXdXFvP_JvU6MQ532MTrf6yOvEqT2_J0fB1-I8b-9gym12b51yYw-b-vbAzYt8No7VCjTco7IYaPxf6ADyI/s1600/cubo3d.gif" /></a><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Todos los que utilizamos la plataforma de Blogger, conocemos el gadget de <b>entradas populares</b>, que nos informa de los articulos mas visitados de nuestro blog. El aspecto 'de casa' de este artilugio es un poquito simple, pero siempre se puede rediseñar como ya os he mostrado en otras tantas entradas. En este caso lo vamos a 'convertir' en un cubo que ira girando con efecto 3D, mostrando los posts en cada una de sus caras.</span></span></div><br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Para instalarlo en el blog, obviamente debemos tener el gadget de entradas populares, marcando solamente la casilla de <b>imagen en miniatura</b>, como podeis ver en esta imagen.</span></span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoM21VK4qPoJ2tsb9kDklSLKC6IYGa8EQl6B5lxbNXW7oczoZY5iTB6cNVOvcTzJPgxidmNFGeiIExr07q1ZTM0XbK0KJwTtS5QO0dgcmXqCOWFHZbvoyR5qwCTuIP0BBPo93ldQmFErw/s1600/widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:1px solid #636463;-webkit-box-shadow: -5px 5px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -5px 5px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -5px 5px 5px 0px rgba(50, 50, 50, 0.75);" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoM21VK4qPoJ2tsb9kDklSLKC6IYGa8EQl6B5lxbNXW7oczoZY5iTB6cNVOvcTzJPgxidmNFGeiIExr07q1ZTM0XbK0KJwTtS5QO0dgcmXqCOWFHZbvoyR5qwCTuIP0BBPo93ldQmFErw/s1600/widget.png" /></a></div><br />
<br />
<div style="padding-left: 20px; padding-right: 20px; text-align: justify;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7ZrA9PlIJ42e2QLzj9sUKqXvK0DXlEfTkrRktqzWBmD3j6gmSafz7-vazEsdqzuWdJWIqfF9l_6HuriW7jjRp-2TQrxCDDH3s6pLIL5rTlOwUFJMQeuXhcdLgwa5v8UOJhyphenhyphenCz-2wMsk/s1600/widget2.png" imageanchor="1" style="clear: left; float: left; margin-top: 0.5em; margin-right: 1em;"><img style="border:1px solid #636463;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7ZrA9PlIJ42e2QLzj9sUKqXvK0DXlEfTkrRktqzWBmD3j6gmSafz7-vazEsdqzuWdJWIqfF9l_6HuriW7jjRp-2TQrxCDDH3s6pLIL5rTlOwUFJMQeuXhcdLgwa5v8UOJhyphenhyphenCz-2wMsk/s1600/widget2.png" /></a><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Despues, deberemos copiar el siguiente codigo y pegarlo en un gadget HTML/Javascript y situarlo <b>encima</b> del anterior, como podeis observar en la imagen de la izquierda. Guardamos los cambios y la disposicion y ya lo tenemos. Facilito ¿Verdad? Si lo deseais, podeis ver una demo haciendo click <a style="text-shadow: -4px 2px 2px rgba(150, 150, 150, 1);color:#00448A !important;" href="http://blogsnred.blogspot.com/" target="_blank"><b>aqui</b></a>.</span></span></div><br />
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;"><b><style type="text/css"><br />
.cube { width: 200px; height: 200px;margin: 0 auto;}<br />
a img { border: none; }<br />
#linksCube img { width: 100%; height: 100%; }<br />
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script><br />
<script><br />
(function($) { // Hide scope, no $ conflict<br />
<br />
/* Image cube manager. */<br />
function ImageCube() {<br />
this._defaults = {<br />
direction: 'random', // Direction of rotation: random|up|down|left|right<br />
randomSelection: ['up', 'down', 'left', 'right'], // If direction is random, select one of these<br />
speed: 1000, // Time taken (milliseconds) to transition<br />
easing: 'linear', // Name of the easing to use during transitions<br />
repeat: true, // True to automatically trigger a new transition after a pause<br />
pause: 1000, // Time (milliseconds) between transitions<br />
selection: 'forward', // How to choose the next item to show:<br />
// 'forward', 'backward', 'random'<br />
shading: true, // True to add shading effects, false for no effects<br />
opacity: 0.8, // Maximum opacity (0.0 - 1.0) for highlights and shadows<br />
imagePath: '', // Any extra path to locate the highlight/shadow images<br />
full3D: true, // True to add cubic perspective, false for 2D rotation<br />
segments: 20, // The number of segments that make up each 3D face<br />
reduction: 30, // The amount (pixels) of reduction for far edges of the cube<br />
expansion: 10, // The amount (pixels) of expansion for the near edge of the cube<br />
lineHeight: [0.0, 1.25], // Hidden and normal line height (em) for text<br />
letterSpacing: [-0.4, 0.0], // Hidden and normal letter spacing (em) for text<br />
beforeRotate: null, // Callback before rotating<br />
afterRotate: null // Callback after rotating<br />
};<br />
};<br />
<br />
var UP = 0;<br />
var DOWN = 1;<br />
var LEFT = 2;<br />
var RIGHT = 3;<br />
<br />
var PROP_NAME = 'imageCube';<br />
<br />
$.extend(ImageCube.prototype, {<br />
/* Class name added to elements to indicate already configured with image cube. */<br />
markerClassName: 'hasImageCube',<br />
<br />
/* Override the default settings for all image cube instances.<br />
@param options (object) the new settings to use as defaults */<br />
setDefaults: function(options) {<br />
extendRemove(this._defaults, options || {});<br />
},<br />
<br />
/* Attach the image cube functionality to a div.<br />
@param target (element) the containing division<br />
@param options (object) the settings for this image cube instance (optional) */<br />
_attachImageCube: function(target, options) {<br />
target = $(target);<br />
if (target.hasClass(this.markerClassName)) {<br />
return;<br />
}<br />
var allOptions = $.extend({_position: target.css('position')},<br />
this._defaults, options || {});<br />
$.data(target[0], PROP_NAME, allOptions);<br />
target.addClass(this.markerClassName).css({position: 'relative'}).<br />
children().each(function() {<br />
var child = $(this);<br />
$.data(this, PROP_NAME,<br />
{width: child.css('width'), height: child.css('height'),<br />
position: child.css('position'), lineHeight: child.css('lineHeight'),<br />
letterSpacing: child.css('letterSpacing')});<br />
child.css({width: target.css('width'), height: target.css('height'),<br />
position: 'absolute', lineHeight: allOptions.lineHeight[1],<br />
letterSpacing: allOptions.letterSpacing[1]});<br />
}).not(':first').hide();<br />
this._prepareRotation(target[0]);<br />
},<br />
<br />
/* Note current visible child and schedule a repeat rotation (if required).<br />
@param target (element) the containing division */<br />
_prepareRotation: function(target) {<br />
target = $(target);<br />
target.children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();<br />
var options = $.data(target[0], PROP_NAME);<br />
options.current = target.children(':visible')[0];<br />
var randomSelection = function(collection) {<br />
return (!collection.length ? collection : collection.filter(<br />
':eq(' + Math.floor(Math.random() * collection.length) + ')'));<br />
};<br />
options.next = (options.selection == 'random' ?<br />
randomSelection(target.children(':hidden')) :<br />
(options.selection == 'backward' ? $(options.current).prev() :<br />
$(options.current).next()));<br />
options.next = (options.next.length ? options.next :<br />
(options.selection == 'random' ? options.current :<br />
(options.selection == 'backward' ? target.children(':last') :<br />
target.children(':first'))))[0]; // Cycle around if at the end<br />
if (options.repeat && !options._timer) {<br />
options._timer = setTimeout(function() {<br />
$.imagecube._rotateImageCube(target[0]); },<br />
options.pause);<br />
}<br />
$.data(target[0], PROP_NAME, options);<br />
},<br />
<br />
/* Rotate the image cube to the next face.<br />
@param target (element) the containing division<br />
@param next (jQuery or element or string or number) next face to show (optional)<br />
@param callback (function) a function to call when finished with the rotation (optional) */<br />
_rotateImageCube: function(target, next, callback) {<br />
if (typeof next == 'function') {<br />
callback = next;<br />
next = '';<br />
}<br />
target = $(target);<br />
this._stopImageCube(target[0], true);<br />
var options = $.data(target[0], PROP_NAME);<br />
if (next != null) {<br />
next = (typeof next == 'number' ? target.children(':eq(' + next + ')') : $(next));<br />
if (target.children().filter(function() { return this === next[0]; }).length > 0) {<br />
options.next = next;<br />
}<br />
}<br />
var callbackArgs = [options.current, options.next];<br />
if (options.beforeRotate) {<br />
options.beforeRotate.apply(target[0], callbackArgs);<br />
}<br />
var animTo = {};<br />
animTo[PROP_NAME] = 1.0;<br />
target.attr(PROP_NAME, 0.0).animate(animTo, options.speed, options.easing,<br />
function() {<br />
if (options.afterRotate) {<br />
options.afterRotate.apply(target[0], callbackArgs);<br />
}<br />
if (callback) {<br />
callback.apply(target[0]);<br />
}<br />
});<br />
},<br />
<br />
/* Retrieve the currently visible child of an image cube div.<br />
@param target (element) the containing division<br />
@return (element) the currently displayed child of target division */<br />
_currentImageCube: function(target) {<br />
return ($(target).hasClass(this.markerClassName) ?<br />
$.data(target, PROP_NAME).current : null);<br />
},<br />
<br />
/* Retrieve the next visible child of an image cube div.<br />
@param target (element) the containing division<br />
@return (element) the next to be displayed child of target division */<br />
_nextImageCube: function(target) {<br />
return ($(target).hasClass(this.markerClassName) ?<br />
$.data(target, PROP_NAME).next : null);<br />
},<br />
<br />
/* Stop the image cube automatically rotating to the next face.<br />
@param target (element) the containing division<br />
@param timerOnly (boolean) true if only temporarily stopping (optional) */<br />
_stopImageCube: function(target, timerOnly) {<br />
var options = $.data(target, PROP_NAME);<br />
if (options._timer) {<br />
clearTimeout(options._timer);<br />
options._timer = null;<br />
}<br />
if (!timerOnly) {<br />
options.repeat = false;<br />
}<br />
$.data(target, PROP_NAME, options);<br />
},<br />
<br />
/* Start the image cube automatically rotating to the next face.<br />
@param target (element) the containing division */<br />
_startImageCube: function(target) {<br />
this._changeImageCube(target, {repeat: true});<br />
},<br />
<br />
/* Reconfigure the settings for an image cube div.<br />
@param target (element) the containing division<br />
@param options (object) the new settings for this image cube instance or<br />
(string) the name of the setting<br />
@param value (any, optional) the value of the setting */<br />
_changeImageCube: function(target, options, value) {<br />
if (typeof options == 'string') {<br />
var opts = {};<br />
opts[options] = value;<br />
options = opts;<br />
}<br />
var curOptions = $.data(target, PROP_NAME);<br />
extendRemove(curOptions || {}, options || {});<br />
$.data(target, PROP_NAME, curOptions);<br />
this._prepareRotation(target);<br />
},<br />
<br />
/* Remove the image cube functionality from a div.<br />
@param target (element) the containing division */<br />
_destroyImageCube: function(target) {<br />
target = $(target);<br />
if (!target.hasClass(this.markerClassName)) {<br />
return;<br />
}<br />
this._stopImageCube(target[0]);<br />
var options = $.data(target[0], PROP_NAME);<br />
target.stop().css({position: options._position}).<br />
removeClass(this.markerClassName).<br />
children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();<br />
target.children().each(function() {<br />
$(this).css($.data(this, PROP_NAME)).show();<br />
$.removeData(this, PROP_NAME);<br />
});<br />
$.removeData(target[0], PROP_NAME);<br />
},<br />
<br />
/* Prepare the image cube for animation.<br />
@param target (element) the containing division */<br />
_prepareAnimation: function(target) {<br />
var options = $.data(target, PROP_NAME);<br />
var target = $(target);<br />
var offset = {left: 0, top: 0};<br />
target.parents().each(function() { // Check if this area is fixed<br />
var $this = $(this);<br />
if ($this.css('position') == 'fixed') {<br />
offset.left -= $this.offset().left;<br />
offset.top -= $this.offset().top;<br />
return false;<br />
}<br />
});<br />
var dims = {width: target.width(), height: target.height()};<br />
var direction = (options.direction != 'random' ? options.direction :<br />
options.randomSelection[Math.floor(Math.random() * options.randomSelection.length)]);<br />
direction = Math.max(0, $.inArray(direction, ['up', 'down', 'left', 'right']));<br />
options._curDirection = direction;<br />
var upDown = (direction == UP || direction == DOWN);<br />
var leftRight = (direction == LEFT || direction == RIGHT);<br />
var upLeft = (direction == UP || direction == LEFT);<br />
var firstOpacity = (upLeft ? 0 : options.opacity);<br />
var pFrom = $(options.current);<br />
var pTo = $(options.next);<br />
// Calculate borders and padding for both elements<br />
var border = [];<br />
var parseBorders = function(p) {<br />
var b = [0, 0, 0, 0];<br />
if (!$.browser.msie || p.css('border')) {<br />
for (var i = 0; i < 4; i++) {<br />
b[i] = p.css('border' + ['Left', 'Right', 'Top', 'Bottom'][i] + 'Width');<br />
var extra = ($.browser.msie ? 1 : 0);<br />
b[i] = parseFloat(<br />
{thin: 1 + extra, medium: 3 + extra, thick: 5 + extra}[b[i]] || b[i]);<br />
}<br />
}<br />
return b;<br />
};<br />
border[0] = parseBorders(pFrom);<br />
border[1] = parseBorders(pTo);<br />
var pad = [];<br />
pad[0] = [parseFloat(pFrom.css('padding-left')), parseFloat(pFrom.css('padding-right')),<br />
parseFloat(pFrom.css('padding-top')), parseFloat(pFrom.css('padding-bottom'))];<br />
pad[1] = [parseFloat(pTo.css('padding-left')), parseFloat(pTo.css('padding-right')),<br />
parseFloat(pTo.css('padding-top')), parseFloat(pTo.css('padding-bottom'))];<br />
var extras = [];<br />
extras[0] = [($.boxModel ? border[0][0] + border[0][1] + pad[0][0] + pad[0][1] : 0),<br />
($.boxModel ? border[0][2] + border[0][3] + pad[0][2] + pad[0][3] : 0)];<br />
extras[1] = [($.boxModel ? border[1][0] + border[1][1] + pad[1][0] + pad[1][1] : 0),<br />
($.boxModel ? border[1][2] + border[1][3] + pad[1][2] + pad[1][3] : 0)];<br />
// Define the property ranges per element<br />
var stepProps = [];<br />
stepProps[0] = {elem: pFrom[0], // Currently displayed element<br />
props: {left: {start: offset.left,<br />
end: offset.left + (direction == RIGHT ? dims.width : 0), units: 'px'},<br />
width: {start: dims.width - extras[0][0],<br />
end: (upDown ? dims.width - extras[0][0] : 0), units: 'px'},<br />
top: {start: offset.top,<br />
end: offset.top + (direction == DOWN ? dims.height : 0), units: 'px'},<br />
height: {start: dims.height - extras[0][1],<br />
end: (upDown ? 0 : dims.height - extras[0][1]), units: 'px'},<br />
paddingLeft: {start: pad[0][0], end: (leftRight ? 0 : pad[0][0]), units: 'px'},<br />
paddingRight: {start: pad[0][1], end: (leftRight ? 0 : pad[0][1]), units: 'px'},<br />
paddingTop: {start: pad[0][2], end: (upDown ? 0 : pad[0][2]), units: 'px'},<br />
paddingBottom: {start: pad[0][3], end: (upDown ? 0 : pad[0][3]), units: 'px'},<br />
borderLeftWidth: {start: border[0][0], end: (leftRight ? 0 : border[0][0]), units: 'px'},<br />
borderRightWidth: {start: border[0][1], end: (leftRight ? 0 : border[0][1]), units: 'px'},<br />
borderTopWidth: {start: border[0][2], end: (upDown ? 0 : border[0][2]), units: 'px'},<br />
borderBottomWidth: {start: border[0][3], end: (upDown ? 0 : border[0][3]), units: 'px'},<br />
lineHeight: {start: options.lineHeight[1],<br />
end: (upDown ? options.lineHeight[0] : options.lineHeight[1]), units: 'em'},<br />
letterSpacing: {start: options.letterSpacing[1],<br />
end: (upDown ? options.letterSpacing[1] : options.letterSpacing[0]), units: 'em'}}};<br />
stepProps[1] = {elem: pTo[0], // New element to be displayed<br />
props: {left: {start: offset.left + (direction == LEFT ? dims.width : 0),<br />
end: offset.left, units: 'px'},<br />
width: {start: (upDown ? dims.width - extras[1][0] : 0),<br />
end: dims.width - extras[1][0], units: 'px'},<br />
top: {start: offset.top + (direction == UP ? dims.height : 0),<br />
end: offset.top, units: 'px'},<br />
height: {start: (upDown ? ($.browser.msie ? 1 : 0) : dims.height - extras[1][1]),<br />
end : dims.height - extras[1][1], units: 'px'},<br />
paddingLeft: {start: (leftRight ? 0 : pad[1][0]), end: pad[1][0], units: 'px'},<br />
paddingRight: {start: (leftRight ? 0 : pad[1][1]), end: pad[1][1], units: 'px'},<br />
paddingTop: {start: (upDown ? 0 : pad[1][2]), end: pad[1][2], units: 'px'},<br />
paddingBottom: {start: (upDown ? 0 : pad[1][3]), end: pad[1][3], units: 'px'},<br />
borderLeftWidth: {start: (leftRight ? 0 : border[1][0]), end: border[1][0], units: 'px'},<br />
borderRightWidth: {start: (leftRight ? 0 : border[1][1]), end: border[1][1], units: 'px'},<br />
borderTopWidth: {start: (upDown ? 0 : border[1][2]), end: border[1][2], units: 'px'},<br />
borderBottomWidth: {start: (upDown ? 0 : border[1][3]), end: border[1][3], units: 'px'},<br />
lineHeight: {start: (upDown ? options.lineHeight[0] : options.lineHeight[1]),<br />
end: options.lineHeight[1], units: 'em'},<br />
letterSpacing: {start: (upDown ? options.letterSpacing[1] : options.letterSpacing[0]),<br />
end: options.letterSpacing[1], units: 'em'}}};<br />
if (options.shading) {<br />
// Initialise highlight and shadow objects (or colours on IE)<br />
var setHighShad = function(props, startOpacity, endOpacity) {<br />
return {left: {start: props.left.start, end: props.left.end, units: 'px'},<br />
width: {start: props.width.start, end: props.width.end, units: 'px'},<br />
top: {start: props.top.start, end: props.top.end, units: 'px'},<br />
height: {start: props.height.start, end: props.height.end, units: 'px'},<br />
paddingLeft: {start: props.paddingLeft.start + props.borderLeftWidth.start,<br />
end: props.paddingLeft.end + props.borderLeftWidth.end, units: 'px'},<br />
paddingRight: {start: props.paddingRight.start + props.borderRightWidth.start,<br />
end: props.paddingRight.end + props.borderRightWidth.end, units: 'px'},<br />
paddingTop: {start: props.paddingTop.start + props.borderTopWidth.start,<br />
end: props.paddingTop.end + props.borderTopWidth.end, units: 'px'},<br />
paddingBottom: {start: props.paddingBottom.start + props.borderBottomWidth.start,<br />
end: props.paddingBottom.end + props.borderBottomWidth.end, units: 'px'},<br />
opacity: {start: startOpacity, end: endOpacity, units: ''}};<br />
};<br />
stepProps[2] = {elem: // Highlight shading (up/left)<br />
$(($.browser.msie ? '<img src="' + options.imagePath + 'imageCubeHigh.png"' :<br />
'<div') + ' class="imageCubeShading" style="background-color: white; opacity: ' +<br />
firstOpacity + '; z-index: 10; position: absolute;"' +<br />
($.browser.msie ? '/>' : '></div>'))[0],<br />
props: setHighShad(stepProps[upLeft ? 0 : 1].props,<br />
firstOpacity, options.opacity - firstOpacity)};<br />
stepProps[3] = {elem: // Shadow shading (down/right)<br />
$(($.browser.msie ? '<img src="' + options.imagePath + 'imageCubeShad.png"' :<br />
'<div') + ' class="imageCubeShading" style="background-color: black; opacity: ' +<br />
(options.opacity - firstOpacity) + '; z-index: 10; position: absolute;"' +<br />
($.browser.msie ? '/>' : '></div>'))[0],<br />
props: setHighShad(stepProps[upLeft ? 1 : 0].props,<br />
options.opacity - firstOpacity, firstOpacity)};<br />
}<br />
// Set up full 3D rotation<br />
if (options.full3D) {<br />
for (var i = 0; i < options.segments; i++) {<br />
target.append(pFrom.clone().addClass('imageCubeFrom').<br />
css({display: 'block', position: 'absolute', overflow: 'hidden'}));<br />
if (options.shading) {<br />
target.append($(stepProps[upLeft ? 2 : 3].elem).clone());<br />
}<br />
}<br />
for (var i = 0; i < options.segments; i++) {<br />
target.append(pTo.clone().addClass('imageCubeTo').<br />
css({display: 'block', position: 'absolute', width: 0, overflow: 'hidden'}));<br />
if (options.shading) {<br />
target.append($(stepProps[upLeft ? 3 : 2].elem).clone());<br />
}<br />
}<br />
pFrom.hide();<br />
pTo.css({width: dims.width - extras[1][0], height: dims.height - extras[1][1]});<br />
}<br />
else {<br />
// Initialise from and to objects<br />
var initCSS = function(props) {<br />
return {left: props.left.start + 'px', width: props.width.start + 'px',<br />
top: props.top.start + 'px', height: props.height.start + 'px',<br />
lineHeight: props.lineHeight.start + 'em',<br />
padding: props.paddingTop.start + 'px ' + props.paddingRight.start + 'px ' +<br />
props.paddingBottom.start + 'px ' + props.paddingLeft.start + 'px',<br />
borderLeftWidth: props.borderLeftWidth.start + 'px',<br />
borderRightWidth: props.borderRightWidth.start + 'px',<br />
borderTopWidth: props.borderTopWidth.start + 'px',<br />
borderBottomWidth: props.borderBottomWidth.start + 'px',<br />
letterSpacing: props.letterSpacing.start + 'em', overflow: 'hidden'};<br />
};<br />
pFrom.css(initCSS(stepProps[0].props));<br />
pTo.css(initCSS(stepProps[1].props)).show();<br />
if (options.shading) {<br />
target.append(stepProps[2].elem).append(stepProps[3].elem);<br />
}<br />
}<br />
// Pre-compute differences<br />
for (var i = 0; i < stepProps.length; i++) {<br />
for (var name in stepProps[i].props) {<br />
var prop = stepProps[i].props[name];<br />
prop.diff = prop.end - prop.start;<br />
}<br />
}<br />
return stepProps;<br />
},<br />
<br />
/* Draw one panel of the 3D perspective view of the cube.<br />
@param target (element) the container<br />
@param pos (number) the current position (0.0 - 1.0)<br />
@param stepProps (object[]) details about the items being animated<br />
@return (boolean) true if drawn in 3D, false if not */<br />
_drawFull3D: function(target, pos, stepProps) {<br />
var options = $.data(target, PROP_NAME);<br />
if (!options.full3D) {<br />
return false;<br />
}<br />
var target = $(target);<br />
var direction = options._curDirection;<br />
var upDown = (direction == UP || direction == DOWN);<br />
var upLeft = (direction == UP || direction == LEFT);<br />
var width = target.width();<br />
var height = target.height();<br />
if (width == 0 || height == 0) {<br />
return true;<br />
}<br />
var current = (1 - pos) * (upDown ? height : width);<br />
var segments = options.segments;<br />
var maxExpand = options.expansion * (1 - Math.abs(2 * current - (upDown ? height : width)) /<br />
(upDown ? height : width));<br />
var maxReduce = options.reduction - (options.reduction * current / (upDown ? height : width));<br />
var update = function(className, al, at, bl, bt, cl, ct, dl, dt, opacity, props, attr) {<br />
var ws = [bl - al, cl - dl];<br />
var w = Math.max(ws[0], ws[1]);<br />
var hs = [dt - at, ct - bt];<br />
var h = Math.max(hs[0], hs[1]);<br />
var wStep = (upDown ? (ws[0] - ws[1]) / (segments - 1) / 2 : w / segments);<br />
var hStep = (upDown ? h / segments : (hs[0] - hs[1]) / (segments - 1) / 2);<br />
var pbw = props.paddingLeft[attr] + props.paddingRight[attr] +<br />
props.borderLeftWidth[attr] + props.borderRightWidth[attr];<br />
var pbh = props.paddingTop[attr] + props.paddingBottom[attr] +<br />
props.borderTopWidth[attr] + props.borderBottomWidth[attr];<br />
var ral = Math.round(al);<br />
var rat = Math.round(at);<br />
var thisLeft = ral;<br />
var thisTop = rat;<br />
var i = 0;<br />
for (var j = 0; j < target[0].childNodes.length; j++) {<br />
var child = target[0].childNodes[j];<br />
if (child.className != className) {<br />
continue;<br />
}<br />
var nextLeft = Math.round(al + (i + 1) * wStep);<br />
var nextTop = Math.round(at + (i + 1) * hStep);<br />
var wCur = ws[0] - (upDown ? 2 * i * wStep : 0);<br />
var hCur = hs[0] - (upDown ? 0 : 2 * i * hStep);<br />
child.style.left = (upDown ? thisLeft : al) + 'px';<br />
child.style.top = (upDown ? at : thisTop) + 'px';<br />
child.style.width = Math.max(0, wCur - pbw) + 'px';<br />
child.style.height = Math.max(0, hCur - pbh) + 'px';<br />
child.style.letterSpacing = (upDown ? wCur / w * (options.letterSpacing[1] -<br />
options.letterSpacing[0]) + options.letterSpacing[0] :<br />
pos * props.letterSpacing.diff + props.letterSpacing.start) +<br />
props.letterSpacing.units;<br />
child.style.lineHeight = (!upDown ? hCur / h * (options.lineHeight[1] -<br />
options.lineHeight[0]) + options.lineHeight[0] :<br />
pos * props.lineHeight.diff + props.lineHeight.start) +<br />
props.lineHeight.units;<br />
child.style.clip = 'rect(' + (!upDown ? 'auto' : (thisTop - rat) + 'px') + ',' +<br />
(upDown ? 'auto' : (nextLeft - ral) + 'px') + ',' +<br />
(!upDown ? 'auto' : (nextTop - rat) + 'px') + ',' +<br />
(upDown ? 'auto' : (thisLeft - ral) + 'px') + ')';<br />
if (options.shading) {<br />
var shading = child.nextSibling;<br />
shading.style.left = thisLeft + 'px';<br />
shading.style.top = thisTop + 'px';<br />
shading.style.width = (upDown ? ws[0] - 2 * i * wStep : nextLeft - thisLeft) + 'px';<br />
shading.style.height = (upDown ? nextTop - thisTop : hs[0] - 2 * i * hStep) + 'px';<br />
shading.style.opacity = opacity;<br />
if ($.browser.msie) {<br />
shading.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';<br />
}<br />
}<br />
thisLeft = nextLeft;<br />
thisTop = nextTop;<br />
i++;<br />
}<br />
};<br />
update('imageCubeFrom',<br />
[maxReduce, -maxExpand, 0, width - current][direction], // top left<br />
[0, height - current, maxReduce, -maxExpand][direction],<br />
[width - maxReduce, width + maxExpand, current, width][direction], // top right<br />
[0, height - current, -maxExpand, maxReduce][direction],<br />
[width + maxExpand, width - maxReduce, current, width][direction], // bottom right<br />
[current, height, height + maxExpand, height - maxReduce][direction],<br />
[-maxExpand, maxReduce, 0, width - current][direction], // bottom left<br />
[current, height, height - maxReduce, height + maxExpand][direction],<br />
(!options.shading ? 0 : (upLeft ? pos : 1 - pos) *<br />
stepProps[2].props.opacity.diff + stepProps[2].props.opacity.start),<br />
stepProps[0].props, 'start');<br />
update('imageCubeTo',<br />
[-maxExpand, options.reduction - maxReduce, current, 0][direction], // top left<br />
[current, 0, -maxExpand, options.reduction - maxReduce][direction],<br />
[width + maxExpand, width - (options.reduction - maxReduce), width, width - current][direction], // top right<br />
[current, 0, options.reduction - maxReduce, -maxExpand][direction],<br />
[width - (options.reduction - maxReduce), width + maxExpand, width, width - current][direction], // bottom right<br />
[height, height - current, height - (options.reduction - maxReduce), height + maxExpand][direction],<br />
[options.reduction - maxReduce, -maxExpand, current, 0][direction], // bottom left<br />
[height, height - current, height + maxExpand, height - (options.reduction - maxReduce)][direction],<br />
(!options.shading ? 0 : (upLeft ? pos : 1 - pos) *<br />
stepProps[3].props.opacity.diff + stepProps[3].props.opacity.start),<br />
stepProps[1].props, 'end');<br />
return true;<br />
}<br />
});<br />
<br />
/* jQuery extend now ignores nulls!<br />
@param target (object) the object to extend<br />
@param props (object) the attributes to modify<br />
@return (object) the updated target */<br />
function extendRemove(target, props) {<br />
$.extend(target, props);<br />
for (var name in props) {<br />
if (props[name] == null) {<br />
target[name] = null;<br />
}<br />
}<br />
return target;<br />
}<br />
<br />
/* Attach the image cube functionality to a jQuery selection.<br />
@param command (string) the command to run (optional, default 'attach')<br />
@param options (object) the new settings to use for these image cube instances<br />
@return (jQuery) for chaining further calls */<br />
$.fn.imagecube = function(options) {<br />
var otherArgs = Array.prototype.slice.call(arguments, 1);<br />
if (options == 'current' || options == 'next') {<br />
return $.imagecube['_' + options + 'ImageCube'].<br />
apply($.imagecube, [this[0]].concat(otherArgs));<br />
}<br />
return this.each(function() {<br />
if (typeof options == 'string') {<br />
$.imagecube['_' + options + 'ImageCube'].<br />
apply($.imagecube, [this].concat(otherArgs));<br />
}<br />
else {<br />
$.imagecube._attachImageCube(this, options);<br />
}<br />
});<br />
};<br />
<br />
/* Enable synchronised animation for all of the image cube properties.<br />
@param fx (object) the effects instance to animate */<br />
$.fx.step[PROP_NAME] = function(fx) {<br />
if (fx.state == 0 || !fx.stepProps) { // Initialisation<br />
fx.start = 0.0;<br />
fx.end = 1.0;<br />
fx.stepProps = $.imagecube._prepareAnimation(fx.elem);<br />
var elem = fx.stepProps[0].elem;<br />
fx.saveCSS = {borderLeftWidth: elem.style.borderLeftWidth,<br />
borderRightWidth: elem.style.borderRightWidth,<br />
borderTopWidth: elem.style.borderTopWidth,<br />
borderBottomWidth: elem.style.borderBottomWidth,<br />
padding: elem.style.padding};<br />
}<br />
<br />
if (!$.imagecube._drawFull3D(fx.elem, fx.pos, fx.stepProps)) {<br />
for (var i = 0; i < fx.stepProps.length; i++) { // Update all elements<br />
var comp = fx.stepProps[i];<br />
for (var name in comp.props) { // Update all properties<br />
var prop = comp.props[name];<br />
comp.elem.style[name] = (fx.pos * prop.diff + prop.start) + prop.units;<br />
if ($.browser.msie && name == 'opacity') {<br />
comp.elem.style.filter = 'alpha(opacity=' +<br />
((fx.pos * prop.diff + prop.start) * 100) + ')';<br />
}<br />
}<br />
}<br />
}<br />
<br />
if (fx.state == 1) { // Tidy up afterwards<br />
$(fx.stepProps[0].elem).hide().css(fx.saveCSS);<br />
$(fx.stepProps[1].elem).show();<br />
$.imagecube._prepareRotation(fx.elem);<br />
}<br />
};<br />
<br />
/* Initialise the image cube functionality. */<br />
$.imagecube = new ImageCube(); // singleton instance<br />
<br />
})(jQuery);<br />
</script><br />
<script type="text/javascript" charset="utf-8"><br />
$(function () {<br />
$('.popular-posts ul').abupopularcube();<br />
});<br />
<br />
</script><br />
<script><br />
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0($){$.h.j=0(){4 a=[];$6=$(\'.2-3 k\');a.5(\'<7 l="8" m="n o">\');$(9).1(\'p\').q(0(){a.5($(9).1(\'.r-s\').t())});a.5(\'</7>\');$6.u(a.v(\'\'));4 b=$(\'.2-3\').1("d");b.f("w");b.f("x");4 c=$(\'.2-3\').1("a");c.g("y","");$(\'.2-3\').1("d").g(\'z\',0(i,e){A e.B("C-c","D")})}})(E);$(0(){$(\'#8\').F()});',42,42,'function|find|popular|posts|var|push|list|div|linksCube|this||||img||removeAttr|attr|fn||abupopularcube|ul|id|class|cube|repeatingCube|li|each|item|thumbnail|html|replaceWith|join|width|height|target|src|return|replace|s72|s300|jQuery|imagecube'.split('|'),0,{}))<br />
</script></b><br />
</div></center><br />
<br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-36594987899768847872014-03-26T15:58:00.000+01:002014-03-26T22:00:37.583+01:008º aniversario de Twitter<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZoOjRk_6SuBbcEfkHH2hPGHdhnLHraYqycOQ6oIKMJPtfk1AkkIQbNzn29kh8Ba2cLdyue0JUDtZbd1M-FmstnM3bJYe16S1fE5UxTfLxRvhctZcE5qD9cfoufA-NCPcypzxY0spZLE/s1600/8+aniversario+Twitter.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZoOjRk_6SuBbcEfkHH2hPGHdhnLHraYqycOQ6oIKMJPtfk1AkkIQbNzn29kh8Ba2cLdyue0JUDtZbd1M-FmstnM3bJYe16S1fE5UxTfLxRvhctZcE5qD9cfoufA-NCPcypzxY0spZLE/s1600/8+aniversario+Twitter.gif" /></a></div><br />
<center><div style="width:550px;position:relative;top:-25px;text-align:justify;padding-left:20px;padding-right:20px;border:5px solid #00ACEE;-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;-webkit-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 20px 10px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 20px 10px 0px rgba(50, 50, 50, 0.75);background: #e8e8e8;
background: -moz-linear-gradient(-45deg, #e8e8e8 0%, #ffffff 20%, #e2e2e2 38%, #ffffff 53%, #d8d8d8 76%, #ffffff 87%, #d3d3d3 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e8e8e8), color-stop(20%,#ffffff), color-stop(38%,#e2e2e2), color-stop(53%,#ffffff), color-stop(76%,#d8d8d8), color-stop(87%,#ffffff), color-stop(100%,#d3d3d3));
background: -webkit-linear-gradient(-45deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
background: -o-linear-gradient(-45deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
background: -ms-linear-gradient(-45deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
background: linear-gradient(135deg, #e8e8e8 0%,#ffffff 20%,#e2e2e2 38%,#ffffff 53%,#d8d8d8 76%,#ffffff 87%,#d3d3d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d3d3d3',GradientType=1 );"><br />
<span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;"><b>¡¡Happy 8th Birthday Twitter!!</b><br />
<br />
Twitter se creo en 2006 y desde entonces no ha parado con el crecimiento de usuarios que con solo un follow y 140 caracteres ha logrado forjar una atractiva comunidad. La fundaron Jack Dorsey, Evan Williams, Biz Stone y Noah Glass el 26 de marzo de ese año, pero su funcionamiento oficial comenzo en junio.<br />
<br />
Esta red se ha convertido en la plataforma global para descubrir nuevas ideas, conectar y expresarse, segun lo expresa la compañia en un comunicado oficial.<br />
<br />
Recientemente, Twitter ha realizado una modificacion en el diseño, mas estilizado y minimalista, lo que le da un toque mas de modernidad, apegandose a los estandares de diseño web mas modernos que existen.<br />
<br />
Para celebrar este aniversario, han lanzado una <a href="https://discover.twitter.com/first-tweet" target="_blank"><b>herramienta</b></a> que nos permite descubrir el primer tweet de cualquier cuenta. Puedes ver el primer tweet de personajes famosos como cantantes, deportistas, políticos, compañeros, etc.</span></span><br />
<br />
</div></center><div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GqDH8znK3WJmSQuWmP26RJN1tVHz2obHsZMJmD0oJST0q0hw5V0jFb1pPum-TCiffrbx2geZidGLNjqSvAQJz8wFMhfpBJ-whcW44jKfCxzZc3vuk7A_9YE0UT616v0HNNf6Qb7Pk0g/s1600/fondovideos2+redeando.png) no-repeat top left; height: 463px; margin: 0 auto; padding-bottom: 0px; width: 619px;"><div style=" margin: 0 auto; position: relative; top: 71px;left:80px;"><object width="463" height="302"><param name="movie" value="//www.youtube.com/v/NzRkszaGBbY?version=3&hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/NzRkszaGBbY?version=3&hl=es_ES" type="application/x-shockwave-flash" width="463" height="302" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
</div><br />
<center><div style="position:relative;top:100px;"><section><div class="buotton"><a href="https://twitter.com/REDEANDOblog" class="twitter-follow-button" data-show-count="false" data-lang="es" data-size="large" data-dnt="true">Seguir a @REDEANDOblog</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><div class="cover"><div class="innie"></div><div class="spine"></div><div class="outie"></div></div><div class="shadow"></div></section></div></center></div><br />
<style>
section, .buotton { transition-timing-function: ease; }
section {
display: inline-block;
position: relative;
padding: .375rem .375rem 0;
height: 2.5rem;border:2px solid #ACABAB;
background: #A9ADB6;
border-radius: .25rem;
perspective: 300;
box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}
.buotton { opacity: 0; }
.cover {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform-origin: center bottom;
transform-style: preserve-3d;
font: 1.55em/2 "icon";
color: white;
text-align: center;
pointer-events: none;
z-index: 100;
}
.innie, .outie, .spine, .shadow { position: absolute; width: 100%; }
.innie, .outie {
height: 100%;
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
border-radius: .25rem;
}
.innie:after, .outie:after { content:"t"; }
.innie {
background-color: #67E2FE;
text-shadow: 0 -2px 4px rgba(0,0,0,.2);
}
.spine {
top: .25rem;
background: #20C7F3;
height: .25rem;
transform: rotateX(90deg);
transform-origin: center top;
}
.shadow {
top: 100%;
left: 0;
height: 3.5rem;
transform-origin: center top;
transform: rotateX(90deg);
opacity: 0;
z-index: 0;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
border-radius: .4rem;
}
.outie {
background-color: #2EC8FA;
transform: translateZ(.25rem);
text-shadow: 0 2px 4px rgba(0,0,0,.2);
}
section:hover { background: #EBEFF2; }
section:hover .buotton { opacity: 1; }
section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }
section:hover .cover { transform: rotateX(-120deg); }
section:hover .innie { background-color: #3ADAFC; }
section:hover .spine { background-color: #52B1E0; }
section:hover .outie { background-color: #2174A0; color: rgba(255,255,255,0); }
section:hover .shadow {
opacity: 1;
transform: rotateX(45deg) scale(.95);
}
@font-face { font-family:icon; src: url('http://bennettfeely.com/fonts/icons.woff'); }
</style>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-27424136653728333202014-03-09T18:01:00.000+01:002014-03-09T18:01:30.303+01:00Blogs en Red cumple 2 años<div class="separator" style="clear: both; text-align: center;"><a href="http://blogsnred.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img style="padding:10px;background:#373737;border:2px solid #FFCF69;-webkit-box-shadow: 0px 20px 13px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 20px 13px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 20px 13px 0px rgba(50, 50, 50, 0.75);" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUD35z6zxYlx8enkZC3daWsYJPWzGJd-uvoZGIYhsBib2ycsbPaw0gSkQxhEgwNYZx81fhiKt4rktWoNm2CFX4XY_WR6AIX8aaKkZXheUiLgF8P7lZ1iuwJ9QraVkFMilacAV_B2Psgs/s1600/blogs+en+red+aniversario.gif" width="470" /></a></div><br />
<br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">El modesto directorio de blogs que realice utilizando la plataforma gratuita de Blogger, cumple su segundo aniversario este mismo mes. Durante este periodo de tiempo, se han inscrito en <a href="http://blogsnred.blogspot.com" target="_blank" style="background-color: transparent; background-image: url(http://blogsnred.blogspot.com.es/favicon.ico); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 20px auto; padding-left: 25px;color: #FACF16 !important; font-family: 'Ceviche One', cursive; font-size: 24px; padding-left: 26px;padding-right: 5px; text-shadow: -1px 0 #4C2017, 0 1px #4C2017, 1px 0 #4C2017, 0 -1px #4C2017, -1px 1px 2px #4C2017;"><b>Blogs en Red</b></a> 250 blogs de todo tipo de tematicas: personal, internet, ciencias, politica, humor, etc... etc... Muchisimas gracias a todos y a todas por haber confiado y apuntaros en este directorio de bitacoras en español. En breve, realizare algunos retoques y modificaciones esteticas al diseño del sitio para mejorar e ir creciendo positivamente. Y tu, si te animas y quieres inscribir tu blog, pasate cuando quieras, estas en tu casa, estas en Blogs en Red.</span></span></div><br />
<br />
<center><span id="bot1"><a href="http://blogsnred.blogspot.com" target="_blank""></a></span></center><style>
#bot1 {margin: 0 auto;}
#bot1 a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5dE2ObtbHrmBJYCDGcYR6xtaBH3aPdKVDWjKzO7U5NFxGdhsSk62OpmRa1GH1lRu5UpeGHnqB9qofBP5Gp2pJ0XuVxwkxqRmNOW-zVB3HdABXymzGgj-zXRsTFY-ZPDR2AtMIN675_I/s1600/botonblogs.png); height:68px; width:300px; background-position: center top; display: block; background-repeat: no-repeat;transition: all 1s ease 0s; }
#bot1 a:hover{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgsrZzAmWqGEXoJ5lCOGcP7ke5m6IR4rH8FaW6bEAPQ9FSJJ9L6STWU79Auxa8A2ol-3ol3BAZ8EAgFUPf52MQNSPVPSmUVXocnHHodgva6zmraGrBYjYV-D9aAkae3kx5h74QOiJCno/s1600/botonblogs2.png); }
#bot1 a:active {
position:relative;top:2px;
transition: all 1s ease 0s;}
</style><br />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ceviche+One">Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-22129646791565908192014-03-04T18:39:00.000+01:002014-03-04T20:12:02.173+01:00Reduce el peso de tus imagenes online<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTvI-Gq-tL4FusHkzZURIWz0UllxSVOLTdkXTUUfJtlnHuDqoG6xlkpJBo_2hdDJGxaIgN11Pc9VJZ2o85JV-oc_YSj8YuJjt_9mdWToNUA2byZWAfUjzO_GqUTGr_z4YsNB3WWzZsbg/s1600/reducir+peso+imagenes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTvI-Gq-tL4FusHkzZURIWz0UllxSVOLTdkXTUUfJtlnHuDqoG6xlkpJBo_2hdDJGxaIgN11Pc9VJZ2o85JV-oc_YSj8YuJjt_9mdWToNUA2byZWAfUjzO_GqUTGr_z4YsNB3WWzZsbg/s1600/reducir+peso+imagenes.png" /></a></div><br />
<br />
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Las imagenes que subimos a nuestro blog en los articulos, o bien las que utilizamos para el diseño y decoracion de este, a veces pueden 'pesar' demasiado. Eso se traduce en una sobrecarga y por lo tanto un ralentizamiento de nuestra pagina. Para evitar estas cuestiones, debemos procurar que estas imagenes no sobrepasen unos limites exagerados. Para ayudaros en este tema, os propongo visitar estas dos webs: <a href="https://tinypng.com" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.tinypng.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;"><b>TinyPNG</b></a> y <a href="http://www.jpegmini.com" target="_blank" style="background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.jpegmini.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;"><b>JPEGmini</b></a> , la primera optimiza las imagenes en formato <b>PNG</b>, reduciendo considerablemente los KB, y la segunda hace exactamente lo mismo, pero con las de formato <b>JPEG</b>.</span></span></div><br />
<center><img width="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6rmelGmhci6H0zzDjRpjqSSB6ld60z1K1WmFT_HFe_qw1kmu8WNQuBdmOSn3DGLQEadZ_t5_ghy4D4SrDOEElOf77yw76D0nKDBt6TcHEadbzabG7ss9sqQsIsGWX61qyP1s4hFuKIE/s400/abajo.png"></center><div style="background:#cdcdcd;padding-top:20px;padding-bottom:20px;"><div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi50I8fe9HtSgrmFzaQBkf8cBTPBnwaj-O5RGVp9P_cSDZlk_6agplbaZnzZ70XIhBghhnIgUOq7nPyEPSlbZNDbdGN6AisY5ReaAhgLOvgHvHF4pFbhIE0WuvdCC9LgAxQEiCtzGKDuLk/s1600/tynypng.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi50I8fe9HtSgrmFzaQBkf8cBTPBnwaj-O5RGVp9P_cSDZlk_6agplbaZnzZ70XIhBghhnIgUOq7nPyEPSlbZNDbdGN6AisY5ReaAhgLOvgHvHF4pFbhIE0WuvdCC9LgAxQEiCtzGKDuLk/s1600/tynypng.png" /></a></div><br />
<center><a href="https://tinypng.com" target="_blank" class="botonagr"><span>visitar TinyPNG</span></a></center></div><br />
<br />
<div style="background:#cdcdcd;padding-top:20px;padding-bottom:20px;"><div align="center" style=""><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijg1oIykE7G6-sXWENDzHAP1Lt3rWfrDAYckJQhb7veQspUcXG8mp2-EgQwWIEUJ8Z2k8mNMG4YbCYjJwpnDPMLFCHIiynNq8rQiluxpS0wTxpS-xv12h2IgeU6FLoLCILUJOFl6AaOHw/s1600/jpegmini.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijg1oIykE7G6-sXWENDzHAP1Lt3rWfrDAYckJQhb7veQspUcXG8mp2-EgQwWIEUJ8Z2k8mNMG4YbCYjJwpnDPMLFCHIiynNq8rQiluxpS0wTxpS-xv12h2IgeU6FLoLCILUJOFl6AaOHw/s1600/jpegmini.png" /></a></div><br />
<center><a href="http://www.jpegmini.com/" target="_blank" class="botonagr"><span>visitar JPEGmini</span></a></center></div><br />
<br />
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-72021122118553383632014-02-27T21:05:00.000+01:002014-02-28T02:17:16.184+01:00Calendarios con estilo para tu blog<div class="separator" style="clear: both; text-align: center;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi6qnxfLpYhc9nfv8BGdkals-1ZrmEXEbrfYpzaz57u7UbmSR07KyJWGh5Fcuo3yl3MqiSDojECmIu24HFEjAkd7QCEjNv6Klh7i9IlpT56fnSIbcR9n0ecyNZF4uyc_myAuW_oKmJbg/s1600/calendarios+css+redeando.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi6qnxfLpYhc9nfv8BGdkals-1ZrmEXEbrfYpzaz57u7UbmSR07KyJWGh5Fcuo3yl3MqiSDojECmIu24HFEjAkd7QCEjNv6Klh7i9IlpT56fnSIbcR9n0ecyNZF4uyc_myAuW_oKmJbg/s1600/calendarios+css+redeando.png" /></a></div>
<br/><br/>
<div style="text-align:justify;padding-left:20px;padding-right:20px;"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">Ahora mostrar la fecha en tu blog puede, ademas de ser practico, ser un elemento mas de decoracion del sitio. Para tal motivo, me he estrujado un poquito las neuronas y me ha salido este widget tan 'cool' que muestra el numero y el nombre del dia a la perfeccion. Con un diseño elegante, con forma de icono y fondos combinando degradados y 'glossy', he utilizado Javascript para lo tecnico y CSS3 para lo visual. Esta disponible en 3 tonos: azul, negro y rojo, elige el que mas te guste y copia su codigo correspondiente para ponertelo en tu blog o web.</span></span></div>
<br/><br/>
<center><div style="background:#EFEFEF;padding:30px;border:4px solid #cdcdcd;width:350px;border-radius:10px;"><div class="cajacalendario"><div class="widget"><div class="widget-calendario"><div id="nombredia"></div><div id="dia"></div></div></div></div>
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;">
<b><style><br />/* Calendario diseñado por (design by):<br />Johnny Vega - REDEANDO Blog<br />http://redeando.blogspot.com */<br /><br />.cajacalendario {<br />height: 200px;<br />position: relative;<br />margin: 0 auto;<br />width: 200px;}<br />.widget { text-align: center;}<br />.widget-calendario {<br /> height: 150px;<br /> margin-bottom: 24px;<br /> width: 190px;<br />}<br />#nombredia {<br />background: #1e5799;<br />background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));<br />background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);<br />background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);<br />background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);<br />background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );<br />font-family: 'Francois One', sans-serif;<br />text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;<br /> border-radius: 35px 35px 0 0;<br /> color: #f9f9f9 !important;text-decoration:none !important;<br />font-size: 30px;letter-spacing:0px;font-weight:bold;<br /> line-height: 35px;height: 40px;<br /> position: relative;<br /> text-transform: lowercase;<br />}<br />#dia {<br />border-radius: 0 0 35px 35px;border:0px solid #565656;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;<br /> color: #0C74B6;font-family: 'Francois One', sans-serif;<br /> font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;<br /> height:150px;<br /> line-height: 120px;}<br /></style><br /><div class="cajacalendario"><div class="widget"><div class="widget-calendario"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia"></div></a><div id="dia"></div></div></div></div><br /><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'><br /><script><br /> (function() {<br /><br /> var date = new Date(),<br /> weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];<br /><br /> document.getElementById('nombredia').innerHTML = weekday[date.getDay()];<br /> document.getElementById('dia').innerHTML = date.getDate();<br /><br />}) ();<br /></script></b>
</div></center>
</div></center>
<br/><br/>
<center><div style="background:#EFEFEF;padding:30px;border:4px solid #cdcdcd;width:350px;border-radius:10px;"><div class="cajacalendario2"><div class="widget2"><div class="widget-calendario2"><div id="nombredia2"></div><div id="dia2"></div></div></div></div>
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;">
<b><style><br />/* Calendario diseñado por (design by):<br />Johnny Vega - REDEANDO Blog<br />http://redeando.blogspot.com */<br />.cajacalendario2 {<br />height: 200px;<br />position: relative;<br />margin: 0 auto;<br />width: 200px;}<br />.widget2 { text-align: center;}<br />.widget-calendario2 {<br /> height: 150px;<br /> margin-bottom: 24px;<br /> width: 190px;<br />}<br />#nombredia2 {<br />background: #4c4c4c;<br />background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));<br />background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);<br />background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);<br />background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);<br />background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );<br />font-family: 'Francois One', sans-serif;<br />text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;<br /> border-radius: 35px 35px 0 0;<br /> color: #f9f9f9 !important;text-decoration:none !important;<br />font-size: 30px;letter-spacing:0px;font-weight:bold;<br /> line-height: 35px;height: 40px;<br /> position: relative;<br /> text-transform: lowercase;<br />}<br />#dia2 {<br />border-radius: 0 0 35px 35px;border:0px solid #565656;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;<br /> color: #565656;font-family: 'Francois One', sans-serif;<br /> font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;<br /> height:150px;<br /> line-height: 120px;}<br /></style><br /><div class="cajacalendario2"><div class="widget2"><div class="widget-calendario2"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia2"></div></a><div id="dia2"></div></div></div></div><br /><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'><br /><script><br /> (function() {<br /><br /> var date = new Date(),<br /> weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];<br /><br /> document.getElementById('nombredia2').innerHTML = weekday[date.getDay()];<br /> document.getElementById('dia2').innerHTML = date.getDate();<br /><br />}) ();<br /></script></b>
</div></center>
</div></center>
<br/><br/>
<center><div style="background:#EFEFEF;padding:30px;border:4px solid #cdcdcd;width:350px;border-radius:10px;"><div class="cajacalendario3"><div class="widget3"><div class="widget-calendario3"><div id="nombredia3"></div><div id="dia3"></div></div></div></div>
<center><a class="botongriselegantevo" onclick="return verocultar(this);"href="javascript:void(0);">ver codigo</a><div style="display: none;color:#000;background:#F7F7F7;border:3px solid #999999;text-align:left;padding:20px;">
<b><style><br />/* Calendario diseñado por (design by):<br />Johnny Vega - REDEANDO Blog<br />http://redeando.blogspot.com */<br />.cajacalendario3 {<br />height: 200px;<br />position: relative;<br />margin: 0 auto;<br />width: 200px;}<br />.widget3 { text-align: center;}<br />.widget-calendario3 {<br /> height: 150px;<br /> margin-bottom: 24px;<br /> width: 190px;<br />}<br />#nombredia3 {<br />background: #efc5ca;<br />background: -moz-linear-gradient(top, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));<br />background: -webkit-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);<br />background: -o-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);<br />background: -ms-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);<br />background: linear-gradient(to bottom, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=0 );<br />font-family: 'Francois One', sans-serif;<br />text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;<br /> border-radius: 35px 35px 0 0;<br />color: #f9f9f9 !important;text-decoration:none !important;<br />font-size: 30px;letter-spacing:0px;font-weight:bold;<br /> line-height: 35px;height: 40px;<br /> position: relative;<br /> text-transform: lowercase;<br />}<br />#dia3 {<br />border-radius: 0 0 35px 35px;border:0px solid #565656;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;<br /> color: #BB2939;font-family: 'Francois One', sans-serif;<br /> font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;<br /> height:150px;<br /> line-height: 120px;}<br /></style><br /><div class="cajacalendario3"><div class="widget3"><div class="widget-calendario3"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia3"></div></a><div id="dia3"></div></div></div></div><br /><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'><br /><script><br /> (function() {<br /><br /> var date = new Date(),<br /> weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];<br /><br /> document.getElementById('nombredia3').innerHTML = weekday[date.getDay()];<br /> document.getElementById('dia3').innerHTML = date.getDate();<br /><br />}) ();<br /></script></b>
</div></center>
</div></center>
<br/><br/>
<style>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget { text-align: center;}
.widget-calendario {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia {
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #0C74B6;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia').innerHTML = weekday[date.getDay()];
document.getElementById('dia').innerHTML = date.getDate();
}) ();
</script>
<style>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario2 {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget2 { text-align: center;}
.widget-calendario2 {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia2 {
background: #4c4c4c;
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia2 {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #565656;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia2').innerHTML = weekday[date.getDay()];
document.getElementById('dia2').innerHTML = date.getDate();
}) ();
</script>
<style>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario3 {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget3 { text-align: center;}
.widget-calendario3 {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia3 {
background: #efc5ca;
background: -moz-linear-gradient(top, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
background: -webkit-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: -o-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: -ms-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: linear-gradient(to bottom, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia3 {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #BB2939;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia3').innerHTML = weekday[date.getDay()];
document.getElementById('dia3').innerHTML = date.getDate();
}) ();
</script>
Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.comtag:blogger.com,1999:blog-8544071767970846739.post-47452646527467561942014-02-25T17:46:00.000+01:002014-02-25T18:19:29.691+01:00Little Bang Webseries<div class="separator" style="clear: both; text-align: center;position:relative;top:10px;"><a ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWa1PtJAvmxpGy2dBYvdnXxG0ShKy51uVD137Ul3M1IFL-OQTJ47yXmFtnCnF6dyQICj_hZ2dzCYAX7MaNaos4z17mAZRzNyJxNFqwmgxyKJanSslEJC7Tk2gi7tUsZPtvXeLeRNfjugU/s1600/Little+Bang+Webseries.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:5px solid #585858;width:500px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWa1PtJAvmxpGy2dBYvdnXxG0ShKy51uVD137Ul3M1IFL-OQTJ47yXmFtnCnF6dyQICj_hZ2dzCYAX7MaNaos4z17mAZRzNyJxNFqwmgxyKJanSslEJC7Tk2gi7tUsZPtvXeLeRNfjugU/s1600/Little+Bang+Webseries.jpg" /></a></div><center>"<div style="text-align:justify;padding:20px;position:relative;top:-40px;border:1px solid #cdcdcd;z-index:2;background:#fff;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;width:550px;-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);"><span style="font-size: large;"><span style="font-family: 'Nunito', sans-serif;">"¿Una WebSerie y un libro de relatos? ¿Que es todo este lio? ¿Mil y una palabras, una y mil imagenes, algun sonido? Buscar, temblar, arrancar sentidos al ordenado caos; reir y llorar. Comunicar alguna intuicion, quizas entrever alguna respuesta; tan falsa para unos, tan indiscutible para otros, o tan absurda para muchos mas." Esta es la definicion que la web <a href="http://littlebangwebseries.com" target="_blank" style="color:#084B8A !important;background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.littlebangwebseries.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;"><b>Little Bang Webseries</b></a> hace de si misma en este proyecto liderado por <a href="http://www.javiqui-sinbrumas.blogspot.com" target="_blank" style="color:#084B8A !important;background-color: transparent; background-image: url("http://www.google.com/s2/favicons?domain=www.sinbrumas.blogspot.com"); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px center; background-clip: border-box; background-origin: padding-box; background-size: 16px auto; padding-left: 18px;"><b>Javier Quintanilla</b></a>, una serie online española un tanto surrealista de reciente creacion.</span></span></div></center><div style="position:relative;top:-20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MAI7u50Rki6XGdUV1t62INQc4Oxz42os1o-MFOha2l-1XlF37o_-Tj-PNe1_e6FRiZDplztM1iVqylHx8O5_NnZ000nFG5D7F11lLaybOPn7Zade2VFgVqk4HCOhFqWYYI0wyx2i97z6/s1600/fondo+video+REDEANDO.png) no-repeat top left; height: 620px; margin: 0 auto; padding-bottom: 0px; width: 620px;"><div style=" margin: 0 auto; position: relative; top: 72px;left:48px;"><object width="516" height="329"><param name="movie" value="//www.youtube.com/v/27miW6oQcFw?hl=es_ES&version=3&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/27miW6oQcFw?hl=es_ES&version=3&rel=0" type="application/x-shockwave-flash" width="516" height="329" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
</div></div><center><a style="position:relative;top:-40px;" href="http://littlebangwebseries.com" target="_blank" class="botonagr"><span>visita Little Bang Webseries</span></a></center>Johnny Uvehttp://www.blogger.com/profile/00594592892588534661noreply@blogger.com