Codigos Html 2
Perdonen si hay algunos ejemplos malos pero los códigos están bien.
Pequeño cuadro con multipestañas: Bueno pues este codigo es muy bueno ya que es para colocar un cuadrito con 3 pestañas donde puedes colocar una imformacion o un widget o lo que ustedes quieren en cada pestaña. Abajo de esta imformacion les dejo un ejemplo. Si lo quieres coloca los 2 codigos que aparesen abajo del ejemplo. Importante: El codigo solo funciona para los que tengan diseño css.
Ejemplo:
PESTAÑA 1PESTAÑA 2PESTAÑA 3
AQUI EL CONTENIDO DE LA PESTAÑA 1
AQUI EL CONTENIDO DE LA PESTAÑA 2
AQUI EL CONTENIDO DE LA PESTAÑA 3
Bueno primero colocamos el siguiente codigo en Css-code sin stylo tags:
#pestañas { /*El contenedor*/
width:260px;
margin:0px auto;
background:#f5f5f5;
border:2px solid #CC99CC;
padding-top:10px;
box-shadow:2px 2px 2px #969696;
height:auto;
}
#pestaña-uno { /*Contenido pestaña 1*/
position:relative;padding:10px;
}
#pestaña-dos { /*Contenido pestaña 2*/
position:relative;display:none;padding:10px;
}
#pestaña-tres { /*Contenido pestaña 3*/
position:relative;display:none;padding:10px;
}
#boton-pestaña1 { /*Boton de la pestaña 1*/
padding:10px;
border:1px solid #d2d2d2;
background:#CC3300;
color:#fff;
}
#boton-pestaña2 { /*Boton de la pestaña 2*/
padding:10px;
border:1px solid #d2d2d2;
background:#FF9966;
color:#fff;
}
#boton-pestaña3 { /*Boton de la pestaña 3*/
padding:10px;
border:1px solid #d2d2d2;
background:#FF9966;
color:#fff;
}
Ahora colocamos este codigo en donde quieras que aparesca el cuadro. lo puedes colocar en Texto por encima de la pagina o en Texto por abajo o En Fuente HTML Donde mas te guste. Pero recuerda editar todo lo que este en MAYUSCULA.
<script type="text/javascript">
function eventoprimerapestaña()
/* Este función permite darle el evento a la primera pestaña*/
{
document.getElementById('pestaña-uno').style.display='block';
document.getElementById('pestaña-dos').style.display='none';
document.getElementById('pestaña-tres').style.display='none';
document.getElementById('boton-pestaña1').style.background='#CC3300';
document.getElementById('boton-pestaña2').style.background='#FF9966';
document.getElementById('boton-pestaña3').style.background='#FF9966';
}
function eventosegundapestaña()
/* Este función permite darle el evento a la segunda pestaña*/
{
document.getElementById('pestaña-uno').style.display='none';
document.getElementById('boton-pestaña1').style.background='#FF9966';
document.getElementById('boton-pestaña2').style.background='#CC3300';
document.getElementById('boton-pestaña3').style.background='#FF9966'; document.getElementById('pestaña-dos').style.display='block';
document.getElementById('pestaña-tres').style.display='none';
}
function eventotercerapestaña()
/* Este función permite darle el evento a la tercera pestaña*/
{
document.getElementById('pestaña-uno').style.display='none';
document.getElementById('pestaña-tres').style.display='block';
document.getElementById('boton-pestaña1').style.background='#FF9966';
document.getElementById('boton-pestaña2').style.background='#FF9966';
document.getElementById('boton-pestaña3').style.background='#CC3300'; document.getElementById('pestaña-dos').style.display='none';
}
</script>
<div id='pestañas'>
<a id='boton-pestaña1' href="javascript:void(0);" onclick='eventoprimerapestaña();'>PESTAÑA 1</a><a id='boton-pestaña2' href="javascript:void(0);" onclick='eventosegundapestaña();'>PESTAÑA 2</a><a id='boton-pestaña3' href="javascript:void(0);" onclick='eventotercerapestaña();'>PESTAÑA 3</a>
<div id='pestaña-uno'>
AQUI EL CONTENIDO DE LA PESTAÑA 1
</div>
<div id='pestaña-dos'>
AQUI EL CONTENIDO DE LA PESTAÑA 2
</div>
<div id='pestaña-tres'>
AQUI EL CONTENIDO DE LA PESTAÑA 3
</div>
</div>
Efecto fade (Aparicion suave cuando entras a la web): Bueno este codigo es para que cuando alguien entre a nuestra web haga un efecto una aparicion suave como transparencia . Para colocarlo en la web copeamos el codigo de abajo de esta imformacion y lo pegamos en Texto por encima de la pagina.
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('body').fadeIn(700);
});
});
</script>
<style type="text/css">
body {display:none;}
</style>
$(document).ready(function(){
$(document).ready(function () {
$('body').fadeIn(700);
});
});
</script>
<style type="text/css">
body {display:none;}
</style>
Contador de seguidores de twitter: Bueno este codigo es para colocar un pajarito que muestre el numero de seguidores que tenemos en nuestro twitter. Abajo de esta imformacion les dejo un ejemplo. Para colocarlo en la web copea el codigo que esta abajo del ejemplo y edita donde diga "USUARIO" ahy colocas el nombre de tu twitter ya que ayas terminado de editar lo pegas en donde quieras que aparesca el contador en HTML.
Ejemplo:
<center>
<script type="text/javascript">
//<![CDATA[
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'USUARIO'},
dataType: 'jsonp',
success: function(data) {
$('#globo').html(data.followers_count);
}
});
});
//]]>
</script>
<div id="pajaro">
<span id="globo" style="float: right; top:0;"></span></div>
<style type="text/css">
#globo {
width:50px;
padding:6px;
height:37px;
color: #a82e03;
background: url(http://2.bp.blogspot.com/-DygUE5zV7qs/Th6B3v2x79I/AAAAAAAABXc/dHLuweEdq9M/s1600/globoayudabloggers.png) no-repeat;
}
#pajaro {
width:110px;
height:100px;
background: url(http://1.bp.blogspot.com/-22h4Fj6QFh0/Th6AJ2viTnI/AAAAAAAABXY/JlN4OBQ6imo/s1600/twitter-bird.png) no-repeat bottom left;
font-size: 20px;
}
</style>
</center>
<script type="text/javascript">
//<![CDATA[
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'USUARIO'},
dataType: 'jsonp',
success: function(data) {
$('#globo').html(data.followers_count);
}
});
});
//]]>
</script>
<div id="pajaro">
<span id="globo" style="float: right; top:0;"></span></div>
<style type="text/css">
#globo {
width:50px;
padding:6px;
height:37px;
color: #a82e03;
background: url(http://2.bp.blogspot.com/-DygUE5zV7qs/Th6B3v2x79I/AAAAAAAABXc/dHLuweEdq9M/s1600/globoayudabloggers.png) no-repeat;
}
#pajaro {
width:110px;
height:100px;
background: url(http://1.bp.blogspot.com/-22h4Fj6QFh0/Th6AJ2viTnI/AAAAAAAABXY/JlN4OBQ6imo/s1600/twitter-bird.png) no-repeat bottom left;
font-size: 20px;
}
</style>
</center>
Burbujas en el cursor: Bueno este codigo es para hacer un efecto con el cursor de nuestra web osea que cuando muevas el cursor salgran burbujas sobre el. Para colocarlo en nuestra web copeamos el siguiente codigo y lo pegamos en Texto por encima de la pagina.
<script src='http://dl.dropbox.com/u/28164309/Scripts/cursor-burbujas.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
var burbujitas=new Array("#2186b5", "#a1b4e8", "#a1b4e8", "#7e9be7", "#cccccc");
var abburbujitas=90;
// ]]>
</script>
<script type='text/javascript'>
// <![CDATA[
var burbujitas=new Array("#2186b5", "#a1b4e8", "#a1b4e8", "#7e9be7", "#cccccc");
var abburbujitas=90;
// ]]>
</script>
Nieve cayendo en nuestra web y que se acomula al final de la pagina: La navidad ya llego y en este tiempo cai nieve asi que abrigarse por que caira nieve en nuestra web. Para colocarlo en la web copeamos el siguiente codigo y lo pegamos en Texto por encima de la pagina.
<script type="text/javascript">
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=10000;this.animationInterval=5;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="•";this.snowStick=true;
this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,
p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,
b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,
10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=
function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),
a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=
function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=
a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=
"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&
b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?
b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=
"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&
(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*
3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",
a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;
a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);
//]]>
</script>
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=10000;this.animationInterval=5;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="•";this.snowStick=true;
this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,
p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,
b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,
10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=
function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),
a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=
function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=
a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=
"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&
b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?
b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=
"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&
(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*
3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",
a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;
a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);
//]]>
</script>
Mostrar ultimos tweets de twitter en nuestra web: Este codigo sirve para colocar una imagen que muestre nuestro tweest cada ves que colocamos algo nuevo. Abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Copea el siguiente codigo y edita donde diga estiven99999 hay colocas el nombre de tu twitter ya terminastes ahora copealo y pegalo en donde quieras que aparesca en HTML.
Ejemplo:
<center>
<img src="http://twitstamp.com/estiven99999/standard.png" border="0" alt="twitstamp.com" />
</center>
<img src="http://twitstamp.com/estiven99999/standard.png" border="0" alt="twitstamp.com" />
</center>
Generador de Mini Botones: Son botones de tamaño 80 x 15 es como el que tengo en mi web en la parte que esta asta abajo en el footer. O puedes ver el boton abajo de esta imformacion. Si te gusto puedes crear tu propio mini boton dando click AQUI . Para crearlo solo basta de elegir el color del borde, el color que estará dentro, el color de fondo de ambas secciones, el texto y listo. Para guardarlo haz click en Save it y podrás subirlo a cualquier servidor para que empieces a compartirlo.
Mini boton:
Efecto dezlizante y superposicion en las imagenes: Este codigo sirve para hacer un efecto en una imagen el efecto seria que cuando alguien pase el cursor sobre una imagen otra imagen se sobre pone deslizandose. Puedes ver un ejemplo abajo de esta imformacion. Para dar efecto pasa el cursor sobre la imagen. Para colocarlo en la web tenemos que copiar los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<style type="text/css">
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute;
left: 0;
}
.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden;
}
.pulloutimage img.original{
z-index: 1;
}
@-webkit-keyframes revealfromright{
0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.pulloutimage:hover img.original{
opacity:0.5;
}
</style>
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute;
left: 0;
}
.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden;
}
.pulloutimage img.original{
z-index: 1;
}
@-webkit-keyframes revealfromright{
0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.pulloutimage:hover img.original{
opacity:0.5;
}
</style>
Ahora para hacer el efecto copeamos el siguiente codigo y lo pegamos en donde quieras que aparesca enHTML. Pero recuerda editar donde diga "Url de la imagen" Hay colocas el link de la imagen que hara efecto.
<div class="pulloutimage" style="width:430px; height:439px">
<img class="original" src="URL DE LA IMAGEN" alt="" /> <img class="ondemand" src="URL DE LA IMAGEN" alt="" />
</div>
<img class="original" src="URL DE LA IMAGEN" alt="" /> <img class="ondemand" src="URL DE LA IMAGEN" alt="" />
</div>
Zoom en imagenes cuando pasas el cursor sobre ella: Este codigo sirve para hacer un efecto que cuando alguien pase el cursor sobre una imagen la imagen se sobresale en un cuadro para verla mejor y tambien podras ponerle su propio titulo. Abajo de esta imformacion te dejo un ejemplo. Para dar efecto pasa el cursor sobre la imagen. Para colocarlo en la web tenemos que copiar los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<style type="text/css">
.imagen-zoom{
position: relative;
z-index: 0;
}
.imagen-zoom:hover {
z-index: 60;
background-color: transparent;
}
.imagen-zoom img{
border:1px solid #c0c0c0;
padding:5px;
}
.imagen-zoom span{
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
position: absolute;
visibility: hidden;
background-color: #fff;
padding: 5px;
left: -80px;
bottom: -80px;
border: 1px solid #969696;
color: #2d2d2d;
font-size:18px;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
opacity:0;
text-align:center;
}
.imagen-zoom span img{
border:1px solid #c0c0c0;
padding: 5px;
max-width:400px;
max-height:auto;
}
.imagen-zoom:hover span {
visibility: visible;
opacity:1;
bottom: 30px;
}
</style>
.imagen-zoom{
position: relative;
z-index: 0;
}
.imagen-zoom:hover {
z-index: 60;
background-color: transparent;
}
.imagen-zoom img{
border:1px solid #c0c0c0;
padding:5px;
}
.imagen-zoom span{
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
position: absolute;
visibility: hidden;
background-color: #fff;
padding: 5px;
left: -80px;
bottom: -80px;
border: 1px solid #969696;
color: #2d2d2d;
font-size:18px;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
opacity:0;
text-align:center;
}
.imagen-zoom span img{
border:1px solid #c0c0c0;
padding: 5px;
max-width:400px;
max-height:auto;
}
.imagen-zoom:hover span {
visibility: visible;
opacity:1;
bottom: 30px;
}
</style>
Ahora para hacer el efecto copeamos el siguiente codigo y lo pegamos en donde quieras que aparesca enHTML. Pero recuerda editar donde diga "Url de la imagen" y "Titulo" en Url de la imagen Hay colocas el link de la imagen que hara efecto. y en donde dice Titulo hay colocas el titulo de la imagen.
<center>
<a class="imagen-zoom"><img border="0" width="200px" height="auto" src="URL DE LA IMAGEN" alt="" /><span>TITULO<img src="URL DE LA IMAGEN" alt="" /></span></a>
</center>
<a class="imagen-zoom"><img border="0" width="200px" height="auto" src="URL DE LA IMAGEN" alt="" /><span>TITULO<img src="URL DE LA IMAGEN" alt="" /></span></a>
</center>
Banner con rotacion: Este codigo sirve para colocar 4 cuadros para colocar nuestro banner en cada 1. El efecto es que hay algunos grandes y pequeños. Pero la medida deben de ser 125x125 en cada cuadro. Abajo les dejo un ejemplo. Para colocarlo en la web tenemos que pegar los 2 codigos que nos aparesen aparesen abajo del ejemplo.
Ejemplo:
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<style type="text/css">
#banners {
margin-bottom:20px;
padding-left:10px;
}
.banner1 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner4 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
</style>
#banners {
margin-bottom:20px;
padding-left:10px;
}
.banner1 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner4 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
</style>
Ahora para colocar el rotador de banner copeamos el siguiente codigo y lo pegamos en donde quieras que aparesca en HTML. Pero recuerda cambiar la url de la imagen que tiene el codigo por la url del banner 125x125 y tambien editar donde diga Url ahy colocas la url del banner a donde quieres que te redireccione cuando le des click.
<div id='banners'>
<a href="URL1" target="_blank">
<img class="banner1" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="105" border="0" height="105"></img></a>
<a href="URL2" target="_blank">
<img class="banner2" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="125" border="0" height="125"></img></a>
<a href="URL3" target="_blank">
<img class="banner3" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="70" border="0" height="70"></img></a>
<a href="URL4" target="_blank">
<img class="banner4" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="110" border="0" height="110"></img></a>
</div>
<a href="URL1" target="_blank">
<img class="banner1" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="105" border="0" height="105"></img></a>
<a href="URL2" target="_blank">
<img class="banner2" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="125" border="0" height="125"></img></a>
<a href="URL3" target="_blank">
<img class="banner3" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="70" border="0" height="70"></img></a>
<a href="URL4" target="_blank">
<img class="banner4" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="110" border="0" height="110"></img></a>
</div>
Girar imagen cuando pasas el cursor sobre ella: Este codigo sirve para hacer un efecto de que cuando un visitante pase el cursor sobre una imagen la imagen dara vuelta es un buen efecto.Abajo les dejo un ejemplo. Pasa el cursor sobre la imagen para dar efecto. Para colocarlo en la web tenemos que copiar los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<style type="text/css">
-moz-transition: 1s; /*Transición Firefox*/
-webkit-transition: 1s; /*Transición Chrome, Safari*/
-o-transition:1s; /*Transición Opera*/
transition: 1s; /*Transición Genérica*/
.demo5 {
margin:0px auto;
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.demo5:hover {
-webkit-animation: cssAnimation 3s 0 linear;
-moz-animation: cssAnimation 3s 0.5 linear;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(720deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(720deg) scale(1) skew(1deg) translate(0px); }
}
}
</style>
-moz-transition: 1s; /*Transición Firefox*/
-webkit-transition: 1s; /*Transición Chrome, Safari*/
-o-transition:1s; /*Transición Opera*/
transition: 1s; /*Transición Genérica*/
.demo5 {
margin:0px auto;
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.demo5:hover {
-webkit-animation: cssAnimation 3s 0 linear;
-moz-animation: cssAnimation 3s 0.5 linear;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(720deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(720deg) scale(1) skew(1deg) translate(0px); }
}
}
</style>
Ahora para colocar la imagen que gire copeamos el siguiente codigo y lo pegamos en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Url de la imagen" Hay colocaras el link de la imagen que girara cuando pases el cursor sobre ella.
<img src="URL DE LA IMAGEN" class="demo5" alt="" />
Decora tu web con la fuente de texto navideño: Este codigo sirve para colocar una fuente navideña ¿Que es Fuente? la fuente es el tipo de letra que usamos en nuestra web, ejemplo: Arial,Comic sans MS,etc. esta fuente la que le colocaremos se llama Mountains of Christmas. Abajo de esta imformacion les dejo un texto con la fuente navideño. Para colocarlo en la web tenemos que copiar los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Feliz navidad y Feliz prospero año nuevo
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<link href="http://fonts.googleapis.com/css?family=Mountains+of+Christmas" rel="stylesheet" type="text/css"></link>
Ahora para colocar el texto con la fuente tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Aqui tu texto" Hay colocaras el texto que quieres que haga efecto.
<span style="font-size: x-large;"><span style="font-family: Mountains of Christmas;">AQUI TU TEXTO</span></span>
Arbol de navidad en la esquina inferior izquierda: Con este codigo colocaremos el arbol de navidad en la ezquina inferior izquierda de nuestra web. ya que es navidad y es bueno decorar la web con un arbol navideño. Abajo de esta imformacion les dejo la imagen del arbol. ¿Te gusto? Copea el siguiente codigo y pegalo en Texto por encima de la pagina.
Ejemplo:
<img style="border:none;position:fixed;bottom:-10px; left:10px;" src="http://1.bp.blogspot.com/-lzHALxxRgkg/Tt-NzAFutCI/AAAAAAAAArY/-K22uhr0vS0/s1600/Christmas-tree-256%255B3%255D.png" />
Pajaro de twitter navideño volando por toda la web: Bueno este codigo ya lo avia colocado nadamas que ahora el pajaro no estara como antes ahora sera navideño con su gorro de navidad. Ya que llego la navidad y es muy buen codigo para decorar la web . Para colocarlo en la web tenemos que Copear el siguiente codigo y editar donde diga estiven99999 ahy colocaras el nombre de tu twitter. Ya terminastes ahora copealo y pegalo en Texto por encima de la pagina.
<script src="http://plantillasgratis.comuv.com/disemucho/pajaro_twitter_navidad/twitter/disemucho.js" type="text/javascript">
</script><script type="text/javascript">
//<![CDATA[
var birdSprite='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i4270de79dea03f1e/1323297807/std/image.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'http://twitter.com/estiven99999';
var twitterThisText ='Sigueme en Twitter';
tripleflapInit();
//]]>
</script>
</script><script type="text/javascript">
//<![CDATA[
var birdSprite='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i4270de79dea03f1e/1323297807/std/image.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'http://twitter.com/estiven99999';
var twitterThisText ='Sigueme en Twitter';
tripleflapInit();
//]]>
</script>
Boton de compartir de taringa: Bueno con este codigo pondremos 1 boton de taringa para compartir cada entrada de nuestra web. Abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Copea el codigo que esta abajo del ejemplo y pegalo en donde quieras que aparesca el boton de taringa en HTML. Puedes encontrar diferente estilo del boton pinchando AQUI.
Ejemplo:
<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout="big"></t:sharer>
<t:sharer data-layout="big"></t:sharer>
Santa clous (Papa noel) Patinando en la ezquina inferior derecha de nuestra web: Este codigo sirve para colocar a santa patinado en nuestra web en la esquina inferior derecha. Abajo de esta imformacion les dejo la imagen de santa. ¿Te gusto? Copea el codigo que esta abajo del ejemplo y pegalo en Texto por encima de la pagina.
Ejemplo:
<img style="border:none;position:fixed;bottom:-10px; right:10px;" src="http://1.bp.blogspot.com/-W3ojmcsB0VU/Tt49IipgGnI/AAAAAAAAAlo/PtL7v2uSM50/s1600/noel-31.gif" />
Arbol navideño mostrando los dias que faltan para la navidad: Con este codigo pongremos un arbol navideño que muestre los dias que faltan para la navidad. Abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Copea el codigo que esta abajo del ejemplo y pegalo en donde quieras que aparesca el arbol en HTML.
Ejemplo:
284 días para la Navidad!
<center><br />
<div style="border: 0px solid rgb(0, 102, 51); color: #006633; font-size: 80%; left: 0px; padding: 7px; z-index: 888;"><br />
<img style="clear: both; display: block;" src="http://3.bp.blogspot.com/_WvACVGW1iPE/TOqem351TiI/AAAAAAAABZ4/A6OpgsHVoIE/s1600/navidad.gif" alt="" /><br />
<script type="text/javascript">
//<![CDATA[
var today=new Date()
var theoccasion=new Date(today.getFullYear(), 12, 25)
var beforeOccasionText="para la Navidad"
var onOccasiontext="Hoy es Navidad. Felices Fiestas!"
var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")"
var one_day=1000*60*60*24
var calculatediff=""
calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}
var pluraldayornot=(calculatediff==1)? "día" : "días"
if (calculatediff>0)
document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+"!</b>")
else if (calculatediff==0)
document.write("<b>"+onOccasiontext+"!</b>")
//]]>
</script></div>
</center>
<div style="border: 0px solid rgb(0, 102, 51); color: #006633; font-size: 80%; left: 0px; padding: 7px; z-index: 888;"><br />
<img style="clear: both; display: block;" src="http://3.bp.blogspot.com/_WvACVGW1iPE/TOqem351TiI/AAAAAAAABZ4/A6OpgsHVoIE/s1600/navidad.gif" alt="" /><br />
<script type="text/javascript">
//<![CDATA[
var today=new Date()
var theoccasion=new Date(today.getFullYear(), 12, 25)
var beforeOccasionText="para la Navidad"
var onOccasiontext="Hoy es Navidad. Felices Fiestas!"
var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")"
var one_day=1000*60*60*24
var calculatediff=""
calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}
var pluraldayornot=(calculatediff==1)? "día" : "días"
if (calculatediff>0)
document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+"!</b>")
else if (calculatediff==0)
document.write("<b>"+onOccasiontext+"!</b>")
//]]>
</script></div>
</center>
Reloj navideño: Con este codigo colocaremos un reloj navideño osea el reloj sera de santa clous (Papa noel). Abajo de esta imformacion puedes verlo. ¿Te gusto? Copea el codigo que esta abajo del ejemplo y pegalo en donde quieras que aparesca en HTML.
Ejemplo:
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="8009-red.swf";obj.TimeZone="PST";obj.width=150;obj.height=150;obj.wmode="transparent";showClock(obj);</script>
Botones de redes sociales: Con este codigo colocaremos un cuadro con 3 botones de redes sociales los cuales son youtube,facebook y twitter . Abajo de esta imformacion puedes ver un ejemplo. ¿Te gusto? Pues copea los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<style type="text/css">
/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}
</style>
/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}
</style>
Ahora para colocar el cuadro con los botones tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar todo lo que este en "Mayuscula".
<ul class="BotonesSociales">
<li><a target="_blank" href="URL DE TU CANAL DE YOUTUBE"><img alt="" src="http://cdn-img.easyicon.cn/png/391/39143.png" /> <span>Suscribete en youtube</span></a></li>
<li><a target="_blank" href="URL DE TU PAGINA DE FACEBOOK"><img alt="" src="https://lh3.googleusercontent.com/-cEItxWOllgk/TkC3K99nKrI/AAAAAAAABl8/vS3V49UFD2o/facebook.png" /> <span>Hazte fan en Facebook</span></a></li>
<li><a target="_blank" href="URL DE TU TWITTER"><img alt="" src="https://lh3.googleusercontent.com/-jchNp-BEnME/TkC3Kxs3yuI/AAAAAAAABl4/c2Z8_KkFWTs/twitter.png" /> <span>Sígueme en Twitter</span></a></li>
</ul>
<li><a target="_blank" href="URL DE TU CANAL DE YOUTUBE"><img alt="" src="http://cdn-img.easyicon.cn/png/391/39143.png" /> <span>Suscribete en youtube</span></a></li>
<li><a target="_blank" href="URL DE TU PAGINA DE FACEBOOK"><img alt="" src="https://lh3.googleusercontent.com/-cEItxWOllgk/TkC3K99nKrI/AAAAAAAABl8/vS3V49UFD2o/facebook.png" /> <span>Hazte fan en Facebook</span></a></li>
<li><a target="_blank" href="URL DE TU TWITTER"><img alt="" src="https://lh3.googleusercontent.com/-jchNp-BEnME/TkC3Kxs3yuI/AAAAAAAABl4/c2Z8_KkFWTs/twitter.png" /> <span>Sígueme en Twitter</span></a></li>
</ul>
Barra de herramientas para tu web: Con este codigo pondremos una barra de herramientas para que compartan nuestra web. La barra es como la de wibiya nadamas que esta sera para compartir nuestras entradas en redes sociales. y no nadamas eso si no que tambien viene con un buscador google. Si la quieres copea el siguiente codigo y pegalo en Texto por encima de la pagina.
<script src="http://sharebar.addthiscdn.com/v1/sharebar.js" type="text/javascript"></script>
<div class="addthis_sharebar_config" style="display:none;">
* username: sharebar
* search url: http://www.google.com/search?q=
* search label: Search Google
</div>
<div class="addthis_sharebar_config" style="display:none;">
* username: sharebar
* search url: http://www.google.com/search?q=
* search label: Search Google
</div>
Boton Sigueme en facebook con bart en la ezquina inferior izquierda : Con este codigo colocaremos una imagen que diga Sigueme en facebook. La imagen estara con bart el de los simpson. Abajo de esta imformarcion les dejo la imagen. ¿Te gusto? Pues copea el siguiente codigo y edita donde diga "Url de facebook" hay colocas el link de tu pagina de facebook. Terminastes de editar ahora copealo y pegalo en Texto por encima de la pagina.
Ejemplo:
<a style="display:scroll;position:fixed;bottom:0px;left:0px;" href="URL DE FACEBOOK" target="_blank"><img src="http://dl.dropbox.com/u/47340707/Bart-sigueme-facebook-ro0driig0o1.png" /></a>
Anuncio flotante con opcion de cerrar y abajando con la pagina: Con este codigo colocaremos un cuadro con una pequeña imformacion. No es todo el cuadro tiene su opcion para cerrar y tambien hara un efecto que cuando tu abajes, el cuadro abajara tambien. Es muy bueno yo te remoiendo que lo coloques colocando los 2 codigos que apareseran abajo de esta imformacion.
Primero colocamos el siguiente codigo en Texto por encima de la pagina:
<style type='text/css'>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>
Ahora para colocar el cuadro con la mformacion tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar todo lo que este en "Aqui texto" Hay colocaras la imformacion que quieres que salga en el cuadro.
<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a><br />
<div style='background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;'>AQUI TEXTO</div></a>
</div>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a><br />
<div style='background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;'>AQUI TEXTO</div></a>
</div>
Luces navideñas en la parte de arriba de la web: Con este codigo colocaremos unas luces naiveñas para decorar nuestra web. las luces estaran arriba dela web y se veran muy bien. Abajo de esta imformacion les dejo las luces navideñas. Para colocarlo en la web copeamos el codigo que esta abajo de las luces navideñas y lo pegamos en Texto por encima de la pagina.
Ejemplo:
<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://lh4.googleusercontent.com/-T2mr4hYEJt8/TuuwZfwTgvI/AAAAAAAAB_Y/oZAKIIvxRa0/s435/luces%2525209.gif);
background-repeat:repeat-x;
height:25px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://lh4.googleusercontent.com/-T2mr4hYEJt8/TuuwZfwTgvI/AAAAAAAAB_Y/oZAKIIvxRa0/s435/luces%2525209.gif);
background-repeat:repeat-x;
height:25px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->
Estrellas volando por la web: Bueno este codigo es para colocar muchas estrellas que esten volando en nuestra web se vera muy bien. Para colocarlo solo copea el siguiente codigo y pegalo en Texto por encima de la pagina.
<script type="text/javascript">
//http://estiven99999.es.tl
//<![CDATA[
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var numberOfStars = 20;
var starSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 30;
//End config.
var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
//Floor or round anything possible for Netscape.
//Slashes CPU strain in Opera too.
for (i = 0; i < numberOfStars; i++){
document.write('<div id="stars'+(idx+i)+'"style="position:absolute;top:0px;left:0px;z-index:99999999999999999;"><img src="http://3.bp.blogspot.com/_lMNoba63Ric/TQ6Mmt3jRCI/AAAAAAAAAJ4/_m4MQ4pAUD8/s1600/star.png" class="stars" /></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 50 * (dfc[s] + inTheFace) / 100;
vel[s] = starSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfStars; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfStars; i++){
strs[i] = document.getElementById("stars"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}
document.documentElement.style.overflowX="hidden";
//]]>
</script>
//http://estiven99999.es.tl
//<![CDATA[
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var numberOfStars = 20;
var starSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 30;
//End config.
var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
//Floor or round anything possible for Netscape.
//Slashes CPU strain in Opera too.
for (i = 0; i < numberOfStars; i++){
document.write('<div id="stars'+(idx+i)+'"style="position:absolute;top:0px;left:0px;z-index:99999999999999999;"><img src="http://3.bp.blogspot.com/_lMNoba63Ric/TQ6Mmt3jRCI/AAAAAAAAAJ4/_m4MQ4pAUD8/s1600/star.png" class="stars" /></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 50 * (dfc[s] + inTheFace) / 100;
vel[s] = starSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfStars; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfStars; i++){
strs[i] = document.getElementById("stars"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}
document.documentElement.style.overflowX="hidden";
//]]>
</script>
Reloj navideño 2: Bueno pues ya avia puesto un codigo de un reloj navideño pues aqui les traigo otro reloj editado por mi es muy bueno puedes ver un ejemplo abajo de esta imformacion. Para colocarlo tienes que copear el codigo que esta abajo del ejemplo y pegarlo en donde quieras que aparesca en HTML.
Ejemplo:
19:53:42<script type='text/javascript'>
// http://estiven99999.es.tl
// NO MODIFICAR SCRIPT
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds
function writeclock() {
i_clock++
if (document.all || document.getElementById || document.layers) {
clockid[i_clock]="clock"+i_clock
document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
}
}
function clockon() {
thistime= new Date()
hours=thistime.getHours()
minutes=thistime.getMinutes()
seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if (document.all) {
for (i=0;i<=clockid.length-1;i++) {
var thisclock=eval(clockid[i])
thisclock.innerHTML=thistime
}
}
if (document.getElementById) {
for (i=0;i<=clockid.length-1;i++) {
document.getElementById(clockid[i]).innerHTML=thistime
}
}
var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script>
<center>
<div style="position:relative;;width:200px;"> <!--Ancho de la caja-->
<!--imagen que se muestro por debajo del reloj-->
<img src="http://www.santaclaus.net/images/santa_sign.gif" border="0"/>
<span style="position:absolute;left:150px;top:120px;z-index:1;color:#000000; font-size:15px;">
<!--Script del Reloj-->
<script>writeclock()</script>
</span>
</div>
</center>
// http://estiven99999.es.tl
// NO MODIFICAR SCRIPT
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds
function writeclock() {
i_clock++
if (document.all || document.getElementById || document.layers) {
clockid[i_clock]="clock"+i_clock
document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
}
}
function clockon() {
thistime= new Date()
hours=thistime.getHours()
minutes=thistime.getMinutes()
seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if (document.all) {
for (i=0;i<=clockid.length-1;i++) {
var thisclock=eval(clockid[i])
thisclock.innerHTML=thistime
}
}
if (document.getElementById) {
for (i=0;i<=clockid.length-1;i++) {
document.getElementById(clockid[i]).innerHTML=thistime
}
}
var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script>
<center>
<div style="position:relative;;width:200px;"> <!--Ancho de la caja-->
<!--imagen que se muestro por debajo del reloj-->
<img src="http://www.santaclaus.net/images/santa_sign.gif" border="0"/>
<span style="position:absolute;left:150px;top:120px;z-index:1;color:#000000; font-size:15px;">
<!--Script del Reloj-->
<script>writeclock()</script>
</span>
</div>
</center>
Menu sale cuando das click derecho sobre la web: Bueno con este codigo haremos un efecto de que cuando alguien de click derecho sobre la web saldra un menu. Es muy bueno ya que es igual para bloquear el boton derecho Para que no te roben contenido. Para colocarlo copeamos los 2 codigos que apareseran abajo del ejemplo.
Primero colocamos este codigo en Texto por encima de la pagina:
<script type="text/javascript">
// www.estiven99999.es.tl/
// Creado por estiven99999.
function mostrarmenuder() {
with(document.getElementById("menuder")) {
style.display = "";
}
return false
}
function cerrarmenuder() {
document.getElementById("menuder")
.style.display = "none";
}
document.oncontextmenu=mostrarmenuder
</script>
<style type="text/css">
.menudervku {
position:fixed;
left:100px;
top:150px;
text-align:center;
text-decoration: none;
width:220px;
border:0px;
background-color:#fff;
font-family:Verdana;
cursor:pointer;
line-height: 24px;
z-index:999999999999999999;
}
.menulink {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #000;
background-color:#333;
color:#fff;
}
.menulink:hover {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #39F;
background-color:#555;
color:#39F;
}
.menulinkcerrar {
height: 25px;
border:0;
background-color:transparent;
}
</style>
// www.estiven99999.es.tl/
// Creado por estiven99999.
function mostrarmenuder() {
with(document.getElementById("menuder")) {
style.display = "";
}
return false
}
function cerrarmenuder() {
document.getElementById("menuder")
.style.display = "none";
}
document.oncontextmenu=mostrarmenuder
</script>
<style type="text/css">
.menudervku {
position:fixed;
left:100px;
top:150px;
text-align:center;
text-decoration: none;
width:220px;
border:0px;
background-color:#fff;
font-family:Verdana;
cursor:pointer;
line-height: 24px;
z-index:999999999999999999;
}
.menulink {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #000;
background-color:#333;
color:#fff;
}
.menulink:hover {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #39F;
background-color:#555;
color:#39F;
}
.menulinkcerrar {
height: 25px;
border:0;
background-color:transparent;
}
</style>
Ahora para hacer el efecto tenemos que copear el siguiente codigo y pegarlo en Texto por encima de la pagina. Pero recuerda editar donde diga "Url" y "Link" en url colocaras el enlace que quieres que te envie el menu. y en Link ahy colocaras el nombre.
<div class='menudervku' id='menuder' style='display:none'>
<div class='menulinkcerrar' onclick='cerrarmenuder()'> <img src='http://1.bp.blogspot.com/_WvACVGW1iPE/TF1-TsFDTWI/AAAAAAAABQo/pLgccZC9c5o/s1600/cerrar.png' style='float: right;' title='Cerrar'/></div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 1</div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 2 </div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 3 </div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 4 </div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 5 </div>
<div onClick='window.open("http://estiven99999.es.tl","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'>estiven99999 </div>
</div>
<div class='menulinkcerrar' onclick='cerrarmenuder()'> <img src='http://1.bp.blogspot.com/_WvACVGW1iPE/TF1-TsFDTWI/AAAAAAAABQo/pLgccZC9c5o/s1600/cerrar.png' style='float: right;' title='Cerrar'/></div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 1</div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 2 </div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 3 </div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 4 </div>
<div class='menulink' onClick='window.open("URL","_blank")'> LINK 5 </div>
<div onClick='window.open("http://estiven99999.es.tl","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'>estiven99999 </div>
</div>
Estrellitas en el cursor: Con este codigo haremos un efecto de que cuando muevas el cursor saldran estrellitas. Es muy buen efecto recuerda que para dar efecto tendras que mover el cursor. Para colocarlo tenemos que copear el siguiente codigo y pegarlo en Texto por encima de la pagina.
<script type="text/javascript">
// <![CDATA[
var colour="#ffe700";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Texto con efectos: Con este codigo colocaremos una pequeña imformacion con un texto en efecto osea que el texto tedra un efecto muy bueno cambia de color y tiene efecto de opacidad. Abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Copea el siguiente codigo y edita donde diga "Texto" Hay colocaras el texto que correponda. Ya terminastes ahora copealo y pegalo en donde quieras que aparesca en HTML.
Ejemplo:
<center>
<script language="JavaScript">
var delay=1500 //pausa (en milisegundos)
var fcontent=new Array()
begintag='<font face="Arial" size=2>' //tag que abre los mensajes
fcontent[0]="<b>TEXTO 0</b>"
fcontent[1]="TEXTO 1"
fcontent[2]="TEXTO 2"
fcontent[3]="TEXTO 3"
closetag='</font>'
var fwidth=540 //ancho
var fheight=30 //alto
///No editar/////////////////
var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0
if (DOM2)
faderdelay=3000
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,0)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}
index++
setTimeout("changecontent()",delay+faderdelay)
}
frame=20;
hex=255 // Initial color value.
function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=12; // increase color value
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("colorfade()",150);
}
else{
document.getElementById("fscroller").style.color="rgb(255,0,0)";
frame=20;
hex=255
}
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:0px solid #ddd;width:'+fwidth+';height:'+fheight+';padding:5px"></div>')
window.onload=changecontent
</script>
<ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>
</center>
<script language="JavaScript">
var delay=1500 //pausa (en milisegundos)
var fcontent=new Array()
begintag='<font face="Arial" size=2>' //tag que abre los mensajes
fcontent[0]="<b>TEXTO 0</b>"
fcontent[1]="TEXTO 1"
fcontent[2]="TEXTO 2"
fcontent[3]="TEXTO 3"
closetag='</font>'
var fwidth=540 //ancho
var fheight=30 //alto
///No editar/////////////////
var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0
if (DOM2)
faderdelay=3000
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,0)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}
index++
setTimeout("changecontent()",delay+faderdelay)
}
frame=20;
hex=255 // Initial color value.
function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=12; // increase color value
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("colorfade()",150);
}
else{
document.getElementById("fscroller").style.color="rgb(255,0,0)";
frame=20;
hex=255
}
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:0px solid #ddd;width:'+fwidth+';height:'+fheight+';padding:5px"></div>')
window.onload=changecontent
</script>
<ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>
</center>
El FanBox de facebook flotante y con efecto deslizante: Bueno pues aqui les traigo este codigo que casi todos me piden de colocar el fanbox de facebook que esta en la parte derecha de mi web flotando. Pasa el cursor sobre el y se deslizara el fanbox de facebook. Ya que lo abrieron den Me gusta xD. No sierto si no quieren No. Bueno pues para colocarlo tenemos que copear el siguiente codigo y editar donde diga "Url de tu pagina de facebook" Hay colocaras el link de tu pagina de facebook, Ya termienastes ahora copea el codigo y pegalo en Texto por encima de la pagina.
Ejemplo:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=URL DE TU PAGINA DE FACEBOOK&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>
<style type="text/css">
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
<style type="text/css">
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Papa noel (Santa claus) Callendo desde arriba asia abajo: Con este codigo colocaremos a papa noel callendo desde arriba a sia abajo en la esquina superior izquierda. Abajo de esta imformacion les dejo a papa noel para que vean un ejemplo pero recuerda ami me aparese aqui pero austedes les aparesera en la esquina superior izquierda de su web. Para colocarlo tenemos que copiar el codigo que esta abajo del ejemplo y pegarlo en Texto por encima de la pagina.
Ejemplo:
<img border='0' src='http://images.yodibujo.es/_uploads/_tiny_galerie/200811/papanoel-navidad3-source_n7g.gif' style='position:fixed; top:0; left:0;'/>
Imagen con estilo: Con este codigo haremos un efecto con las imagenes de nuestra web. Abajo de esta imformacion les dejo el efecto. ¿Te gusto? Pues para colocarlo en nuestra web solamente copeamo el codigo que aparese abajo del ejemplo y editamos donde diga "Url de la imagen" Hay colocamos el link de la imagen y listo volvemos a copear el codigo y lo pegamos en donde quieras que aparesca en HTML.
Ejemplo:
<center><img class="juvinao" height="250" src="URL DE LA IMAGEN" width="230" /></center><br />
<br />
<style type="text/css">
.juvinao {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:1px solid #c0c0c0;
background: url(http://4.bp.blogspot.com/-B58Czi-_F-8/Te8BLDSGN8I/AAAAAAAABDw/9QfUQtipWbo/s320/free_high_res_texture_381.jpg) bottom no-repeat;
padding:5px;
padding-bottom:20px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
</style>
<br />
<style type="text/css">
.juvinao {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:1px solid #c0c0c0;
background: url(http://4.bp.blogspot.com/-B58Czi-_F-8/Te8BLDSGN8I/AAAAAAAABDw/9QfUQtipWbo/s320/free_high_res_texture_381.jpg) bottom no-repeat;
padding:5px;
padding-bottom:20px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
</style>
Cuadro negro con texto desplazamiento: Con este codigo colocaremos un cuadro negro con un texto desplasandose asi la izquierda, Este codigo es muy bueno sirve para dar alguna imformacion. Bueno abajo de esta imformacion les dejo un ejemplo y si te gusta puedes colocarlo en tu web copeando el codigo que esta abajo del ejemplo y editar donde diga "Aqui texto" Ahy colocas el mensaje que quieres que se desplaze dentro del cuadro. Ya terminastes de editarlo ahora pegalo en donde quieras que aparesca en HTML.
Ejemplo:
<div align="center"><table bgcolor="#000000" border="5" width="500"><tbody><tr><td align="center"><marquee scrollamount="5" direction="left" height="26"><span style="color:#FFFFFF;">AQUI TEXTO</span></marquee></td></tr></tbody></table></div>
Perzonalizar los avatares de los comentarios de PWG: Con este codigo perzonalizaremos los avatares de los comentarios, este codigo yo lo usaba en mi web que fue bloqueda.Abajo de esta imformacion puedes ver unas imagenes de los avatares de como se perzonalizan. Si te gusta puedes hacer el efecto coloando el siguiente codigo en Texto por abajo de la pagina.
Ejemplo:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script><script>$(function(e){
var imgPer=$('img[src^="http://profile.webme.com/profile/"]');imgPer.addClass("imagenComent");
var enlace=imgPer.parent().next().next();enlace.addClass("comentarioEnlace");
var comentario= imgPer.parent().parent().parent().next();comentario.addClass('comentarioTexto');
var linea=imgPer.parent().parent().parent().parent().parent().parent().next();linea.addClass("comentarioLinea");//HR
});</script>
<style type="text/css">
.imagenComent{margin-bottom:8px;
-webkit-transform:scale(1);
-webkit-transform:rotate(45deg);
-moz-transform:scale(1);
-moz-transform:rotate(45deg);
-o-transform:scale(1);
-o-transform:rotate(45deg);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
/* estiven99999.es.tl */
}
.imagenComent:hover{
opacity:1;
z-index:1;/*http://estiven99999.es.tl*/
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
box-shadow:3px 0px 9px black;
-webkit-box-shadow:3px 0px 9px black;
-moz-box-shadow:3px 0px 9px black;
}
.comentarioTexto{
/*Clase para los comentarios, puedes editar el color o tama?o*/
}
.comentarioLinea{
/*Linea que aparece abajo de los comentarios*/
}
.comentarioEnlace{
/*Color de el nombre de usuario */
}
</style>
var imgPer=$('img[src^="http://profile.webme.com/profile/"]');imgPer.addClass("imagenComent");
var enlace=imgPer.parent().next().next();enlace.addClass("comentarioEnlace");
var comentario= imgPer.parent().parent().parent().next();comentario.addClass('comentarioTexto');
var linea=imgPer.parent().parent().parent().parent().parent().parent().next();linea.addClass("comentarioLinea");//HR
});</script>
<style type="text/css">
.imagenComent{margin-bottom:8px;
-webkit-transform:scale(1);
-webkit-transform:rotate(45deg);
-moz-transform:scale(1);
-moz-transform:rotate(45deg);
-o-transform:scale(1);
-o-transform:rotate(45deg);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
/* estiven99999.es.tl */
}
.imagenComent:hover{
opacity:1;
z-index:1;/*http://estiven99999.es.tl*/
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
box-shadow:3px 0px 9px black;
-webkit-box-shadow:3px 0px 9px black;
-moz-box-shadow:3px 0px 9px black;
}
.comentarioTexto{
/*Clase para los comentarios, puedes editar el color o tama?o*/
}
.comentarioLinea{
/*Linea que aparece abajo de los comentarios*/
}
.comentarioEnlace{
/*Color de el nombre de usuario */
}
</style>
Agregar banner de 125x125 en la sidebar: Con este codigo colocaremos en la sidebar 4 banner de 125x125 2 arribas y 2 abajo. Bueno pues esto sirve para que puedan colocar algun banner de alguna web osea para afiliarse . Abajo de esta imformacion veran un ejemplo. Si te gusto puedes colocarlo en tu web copeando el siguiente codigo y editar donde diga URL ahy colocas el link donde quieres que te lleve el banner cuando alguien de click y pues tambien editar la url de la imagen por la url del banner que vas a publicitar. Recuerda que el banner deve deser de 125x125. Bueno terminastes ahora copealo y pegalo en la sidebar o donde quieres de HTML.
Ejemplo:
<style>
.anuncios img {margin: 10px;}
</style>
<div align="center">
<a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a><a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a>
<br/>
<a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a><a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a>
</div>
.anuncios img {margin: 10px;}
</style>
<div align="center">
<a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a><a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a>
<br/>
<a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a><a href="URL" target="_blank"><img alt="anuncios" src="http://dl.dropbox.com/u/3301800/banner-125x125.png"/></a>
</div>
Galeria de imagenes con efecto giratorio: Bueno pues aqui les traigo otro codigo se trata de una pequeña Galeria de imagenes. Bueno pues esta galeria tiene un efecto de que cuando pasas el cursor sobre una imagen la imagen girara. Abajo de esta imformacion puedes verla. ¿Te gusto? Copea los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Bueno pues para colocarla en tu web tenemos que usar esto 2 codigos, Bueno enpezemos por el primero colocandolo en Texto por encima de la pagina.
<style type="text/css">
.girar {
-webkit-transition-duration: 1.8s;
-moz-transition-duration: 1.8s;
}
.girar:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
z-index:2; /*Ignorar*/
}
#galeria {
padding:10px;
margin:0px auto;
width:500px;
height:auto;
background:#fafafa;
border:1px solid #d2d2d2;
}
#galeria img {
margin-left:12px;
margin-right:12px;
margin-bottom:10px;
padding:5px;
border:1px solid #d2d2d2;
box-shadow:2px 2px 2px #2d2d2d;
}
</style>
.girar {
-webkit-transition-duration: 1.8s;
-moz-transition-duration: 1.8s;
}
.girar:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
z-index:2; /*Ignorar*/
}
#galeria {
padding:10px;
margin:0px auto;
width:500px;
height:auto;
background:#fafafa;
border:1px solid #d2d2d2;
}
#galeria img {
margin-left:12px;
margin-right:12px;
margin-bottom:10px;
padding:5px;
border:1px solid #d2d2d2;
box-shadow:2px 2px 2px #2d2d2d;
}
</style>
Ahora para colocar la galeria en nuestra web tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Url de la imagen". Hay colocaras el link de la imagen.
<div id="galeria">
<img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" />
</div>
<img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="girar" height="150" src="URL DE LA IMAGEN" width="200" />
</div>
Galeria de imagenes con efecto zoom: Bueno en el codigo anterior abia puesto una galeria Giratoria. pues Ahora les traigo otra galeria pero esta no es giratoria si no que es zoom Osea que cuando alguien pase el cursor sobre una imagen la imagen se sobresaldra. Abajo de esta imformacion puedes verla. ¿Te gusto? Copea los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Bueno pues para colocarla en tu web tenemos que usar esto 2 codigos, Bueno enpezemos por el primero colocandolo en Texto por encima de la pagina.
<style type="text/css">
.aumentar {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.aumentar:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
text-decoration: none;
z-index:2;
}
#galeria {
padding:10px;
margin:0px auto;
width:500px;
height:auto;
background:#fafafa;
border:1px solid #d2d2d2;
}
#galeria img {
margin-left:12px;
margin-right:12px;
margin-bottom:10px;
padding:5px;
border:1px solid #d2d2d2;
box-shadow:2px 2px 2px #2d2d2d;
}
</style>
.aumentar {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.aumentar:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
text-decoration: none;
z-index:2;
}
#galeria {
padding:10px;
margin:0px auto;
width:500px;
height:auto;
background:#fafafa;
border:1px solid #d2d2d2;
}
#galeria img {
margin-left:12px;
margin-right:12px;
margin-bottom:10px;
padding:5px;
border:1px solid #d2d2d2;
box-shadow:2px 2px 2px #2d2d2d;
}
</style>
Ahora para colocar la galeria en nuestra web tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Url de la imagen". Hay colocaras el link de la imagen.
<div id="galeria">
<img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" />
</div>
<img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" /><img class="aumentar" height="150" src="URL DE LA IMAGEN" width="200" />
</div>
Imagen con texto sobrepusto: En esta oportunidad les mostraré una sencilla forma de incluir una historia en las imágenes de tal forma que aparezca cuando se sitúe el mouse sobre la imagen y no sea necesario mostrarlas siempre o mostrarlas en un cuadro de texto por separado. Abajo de esta imformacion les dejo un ejemplo. Para dar efecto pasa el cursor sobre la imagen. ¿Te gusto? Bueno pues para colocarlo en la web tenemos que copear los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Para ver mejor la web de estiven99999 te recomiendo que te descarges el navegador Mozilla firefox.Bueno pues para colocarla en tu web tenemos que usar esto 2 codigos, Bueno enpezemos por el primero colocandolo en Texto por encima de la pagina.
<style type="text/css">
.imagen-con-historia {
position: relative;
display: block;
padding:0;
width: 500px;
margin: 0 auto;
}
.imagen-con-historia img {
max-width:500px;
max-height:auto;
z-index:1;
border:none;
margin:0;
padding:0;
}
.imagen-con-historia span {
background: #111;
opacity:0;
margin:0;
-moz-transition: 400ms;
-webkit-transition: 400ms;
-o-transition:400ms;
transition: 400ms;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 480px;
padding: 10px;
border-top: 1px solid #999;
z-index:10;
}
.imagen-con-historia span:hover {
opacity:.55;
}
</style>
.imagen-con-historia {
position: relative;
display: block;
padding:0;
width: 500px;
margin: 0 auto;
}
.imagen-con-historia img {
max-width:500px;
max-height:auto;
z-index:1;
border:none;
margin:0;
padding:0;
}
.imagen-con-historia span {
background: #111;
opacity:0;
margin:0;
-moz-transition: 400ms;
-webkit-transition: 400ms;
-o-transition:400ms;
transition: 400ms;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 480px;
padding: 10px;
border-top: 1px solid #999;
z-index:10;
}
.imagen-con-historia span:hover {
opacity:.55;
}
</style>
Ahora para colocar la imagen con el texto en nuestra web tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca enHTML. Pero recuerda editar donde diga "Url de la imagen". Hay colocaras el link de la imagen. y donde diga "Aqui texto" Ahy colocas el texto que va air sobrepuesto en la imagen.
<div class="imagen-con-historia">
<img src="URL DE LA IMAGEN" />
<span>
AQUI TEXTO.
</span>
</div>
<img src="URL DE LA IMAGEN" />
<span>
AQUI TEXTO.
</span>
</div>
Aumentar imagen al pasar el cursor: Bueno pues aqui les traigo otro codigo este se trata de hacer un efecto con las imagenes osea que cuando alguien pase el cursor sobre una imagen la imagen se aumentara. Abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Bueno pues para colocarlo tenemos que colocar los 2 codigos que aparesen abajo del ejemplo.
Ejemplo:
Bueno pues para colocarla en tu web tenemos que usar esto 2 codigos, Bueno enpezemos por el primero colocandolo en Texto por encima de la pagina.
<style type="text/css">
.aumentar {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.aumentar:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
text-decoration: none;
z-index:2;
}
</style>
.aumentar {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.aumentar:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
text-decoration: none;
z-index:2;
}
</style>
Ahora para hacer el efecto tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Url de la imagen". Hay colocaras el link de la imagen la que se aumentara cuando pasen el cursor sobre ella.
<img class="aumentar" src="URL DE LA IMAGEN" />
El Fanbox de twitter flotante y con efecto deslizante: Bueno pues hace tiempo habia colocado el codigo del fanbox de facebook flotante y con efecto deslizante y pues ahora les traigo este codigo del fanbox de twitter. El ejemplo lo pueden ver en mi web es el que esta en la parte derecha de mi web flotando. Y pues pasa el cursor sobre la iamgen y veras que se desliza lentamente. Tambien les dejo una imagen abajo de esta imformacion. ¿Te gusto? Pues para colocarlo en la web tenemos que copear el siguiente codigo y editar donde diga estiven99999 hay colocaras el nombre de tu twitter (Usuario) bueno terminastes ahora copealo y pegalo en Texto por encima de la pagina.
Ejemplo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox2").hover(function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
<style type="text/css">
.slide_likebox2 {
float:reight;
width:288px;
height:400px;
background: url(http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 10px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>
<div class="slide_likebox2">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span>
<div class="likeboxwrap"><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
<div id="twitterfanbox"><script type="text/javascript">fanbox_init("estiven99999");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 238px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
</style>
</span></div>
</div>
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox2").hover(function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox2").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
<style type="text/css">
.slide_likebox2 {
float:reight;
width:288px;
height:400px;
background: url(http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 10px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
</style>
<div class="slide_likebox2">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span>
<div class="likeboxwrap"><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
<div id="twitterfanbox"><script type="text/javascript">fanbox_init("estiven99999");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 238px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
</style>
</span></div>
</div>
Cupido volando por la web: Bueno se acerca ya el dia del amor el día de San Valentín, día de los enamorados, día del amor y la amistad, o como le quieran llamar, está próximo, así que una buena manera de decorar la web en el mes del amor,colando un Cupido en la web. Abajo de esta imformacion les dejo la imagen del cupido. Pues para colocarlo en la web solamente copeamos el siguiente codigo y lo pegamos en Texto por encima de la pagina.
Ejemplo:
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Cupido volando por el blog
* Script original de Virtual_Max
* Adaptado por ciudadblogger.com
***********************************************/
var vmin=1;
var vmax=5;
var vr=2;
var timer1;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);}}
function pagestart(){
CupidoVolando=new Chip("CupidoVolando",147,168);
movechip("CupidoVolando");}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
<!-- Cupido volando -->
<div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'>
<img border='0' src='http://lh4.googleusercontent.com/-QtgVSmiCPQU/TycKKNyYYMI/AAAAAAAACIw/En7KHmcuh1Q/s107/Cupido01.gif'/></div>
<!-- Cupido volando -->
//<![CDATA[
/***********************************************
* Cupido volando por el blog
* Script original de Virtual_Max
* Adaptado por ciudadblogger.com
***********************************************/
var vmin=1;
var vmax=5;
var vr=2;
var timer1;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);}}
function pagestart(){
CupidoVolando=new Chip("CupidoVolando",147,168);
movechip("CupidoVolando");}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
<!-- Cupido volando -->
<div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'>
<img border='0' src='http://lh4.googleusercontent.com/-QtgVSmiCPQU/TycKKNyYYMI/AAAAAAAACIw/En7KHmcuh1Q/s107/Cupido01.gif'/></div>
<!-- Cupido volando -->
Efecto redondeada y con sombra en las imagenes: Bueno pues aqui les traigo este nuevo codigo es para a todos aquel que les gusta decorar su web.Bueno se trata de un efecto que hace una imagen osea el efecto hace una imagen redondeada y con un poco de sombra y que cuando pase el cursor sobre ella buelva a su valor original lentamente. Bueno pues abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Pues que esperas a colocarlo en tu web colocando los 2 codigos que estan abajo del ejemplo.
Ejemplo:
Primero colocamos este codigo en Texto por encima de la pagina.
<style type="text/css">
.redondeado {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
</style>
.redondeado {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
</style>
Ahora para hacer el efecto tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Url de la imagen". Hay colocaras el link de la imagen la que hara el efecto.
<img class="redondeado" src="URL DE LA IMAGEN" />
Corazones que caen y se desvanecen en la web: Ya casi yega el dia de los enamorados y pues Bueno ahora les traigo una romántica decoración para decorar nuestra web, se tratan de unos corazones cayendo por la web, algunos tienen efecto de opacidad y al caer se van desvaneciendo hasta desaparecer. Para colocarlo tenemos que copear el siguiente codigo y pegarlo en Texto por encima de la pagina.
<script>
/***** Corazones cayendo en la web estiven99999 *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="http://lh6.googleusercontent.com/-7-WYEBOVd7c/TzMiej4AFcI/AAAAAAAACLc/w2Fn6N9jwIU/s32/heart.png";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
/***** Corazones cayendo en la web estiven99999 *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="http://lh6.googleusercontent.com/-7-WYEBOVd7c/TzMiej4AFcI/AAAAAAAACLc/w2Fn6N9jwIU/s32/heart.png";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
Cursor con corazones que se desvanecen: Bueno pues aqui otro codigo para decorar nuestra web del dia de san valentin. Bueno pues este codigo es muy bueno ya que cuando mueves el cursor sale un corazon y despues se desvanece. Para ver un ejemplo pincha Aqui. ¿Te gusto? Bueno pues para colocarlo solo tenemos que copear el siguiente codigo y pegarlo en Texto por encima de la pagina.
<div style="display:none;"><script type="text/javascript" src="http://blogparts.giffy.me/0010/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0010/parts.png" alt="はじけるハートの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;"><a href="http://twi1.me/">[PR]面白ツイート集めました</a></p></div>
Rosas que caen y se desvanecen en la web: Bueno anterior habia colocado un codigo que se llama "Corazones que caen y se desvanecen en la web" Bueno pues ese codigo es casi paresido a este codigo nadamas que ahora no seran corazones que caigan si no que ahora seran rosas y pues puedes ver un ejemplo dando click Aqui. ¿Te gusto? Bueno pues para colocarlo en la web tenemos que copear el siguiente codigo y pegarlo en Texto por encima de la pagina.
<script>
/***** Rosas cayendo en el blog *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="http://2.bp.blogspot.com/-Jz2xSPA37L0/TzgF3AY4CtI/AAAAAAAAAwM/4Qa1TYKvd_I/s1600/LH00CE0T.gif";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
/***** Rosas cayendo en el blog *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="http://2.bp.blogspot.com/-Jz2xSPA37L0/TzgF3AY4CtI/AAAAAAAAAwM/4Qa1TYKvd_I/s1600/LH00CE0T.gif";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
Boton "Ir arriba" con jQuery que aparece y desaparece: En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionanado AQUI al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo. ¿Te gusto? Copea el siguiente codigo y pegalo en Texto por encima de la pagina.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}
</style>
<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
<style type="text/css">
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}
</style>
<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
<<<< Pagina 1