Como colocar paypal en nuestros sitios con una imagen diferente a su boton

Hace unos dias Ivan me preguntaba si era posible colocar paypal en nuestros sitio web o blog pero con una imagen diferente a la de su boton, el cual generalmente tienen la mayoria de las personas en sus sitios.para que las personas realisen una donación vía Pay-Pal.

La respuesta es si, si se puede,Muchos de seguro navegando se han de encontrar con varios sitio que tienen la Famosa frase " Me invitas un cafe '' La cual la usan para que las personas hagan alguna donacion,Ivan la forma de implementar esto en tu sitio es de lo mas facíl,solo en unos pocos paso a seguir y listo.

A continuacion les muestro el codigo y sus cambios a seguir.

<a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;business=Tu correo que tienes en paypal&amp;item_name=Me Invítas un café!&amp;no_shipping=1&amp;cn=Comentarios%20%28opcional%29&amp;tax=0&amp;currency_code=EUR&amp;lc=ES&amp;bn=PP%2dDonationsBF&amp;charset=UTF%2d8"><img style="width: 92px; height:115px;" src="http://img89.xooimage.com/files/1/4/8/cafe-cup-image2-399cb3b.gif" /></a>

Ejemplo para que vean como funciona al dar click sobre la imagen:



El codigo se coloca en un gadget en cualquier parte del sitio en la barra lateral al final etc...

Donde dice Tu correo que tienes en paypal  Lo cambian por el correo que tienen asociada a paypal.
Donde dice  Me Invítas un café!   esa frase la pueden cambiar por la que quieran es agusto de cada cual  esta aparece en donde colocan la donacion que te van a dar .
Done dice  http://img89.xooimage.com/files/1/4/8/cafe-cup-image2-399cb3b.gif    es donde van a colocar la imagen como esta en el ejemplo .

Una ves hecho eso, guardan el gadget y todo ya esta listo ya cuentan con paypal en su sitio con una imagen diferente a su boton

 

Read More

Texto encima de cualquier imagen usando CSS

Colocar texto encima de cualquier imagen nos permite incluir el título de la imagen, como tambien una simple descripcion , o decir su procedencia. Esto puede lograrse sólo usando CSS, sin necesidad de usar Javascript para que la página no este más lenta.

Para lograr esto lo primero que bamos a hacer es dirigirnos a:

Diseño >>> Edición de HTML >>> expandimos artilugios

Buscamos la etiqueta  </head> y añade antes estas líneas de CSS:

 <style type="text/css">#TTrucosIMG{float:left;position:relative;}#TTrucosIMG .TTrucosIMG1 {width:320px;position:absolute;top:14px;left:14px;}</style>

Guardamos la plantilla .

A continuación les muestro el código. Puedes utilizarlo tanto en una entrada como en un gadget o elemento de página html-javascript que encontrarás en la parte de Diseño.

<div id="TTrucosIMG">
<img src="http://dl.dropbox.com/u/25944020/images3.jpg" />
<div class="TTrucosIMG1" style="color: #000;font-size: 0.9em; font-weight: bold; text-shadow: 0px 1px 1px #fff;">
<p>Parrafo sobre esta imagen</p>
<p>Que detalle este y todo con css</p>
</div>
</div>

Lo que esta de color rojo es la url de la imagen la remplazan por otra en su lugar.
Lo que esta de color naranja es el color del texto.
Lo que esta de color amarillo es el tamaño del texto mas es mas grande 1.0 , 1.1 , 1.2 etc...
Lo que esta de color verde es el efecto de texto undido o relieve que use en el texto .
Lo que esta de color azul es el texto a poner .

Con la etiqueta <p> y su cierre </p> sólo conseguimos que se produzca un salto de línea, dejando un espacio en blanco entre el contenido.

Para mostrar un simple salto de línea bastará con eliminar dichas etiquetas y añadir al final de la línea en la que presentaremos el salto <br></br>.

También puedes deshacerte de todo esto y escribir seguido.

Read More

Como mostrar el blog en construcción

En el día de ayer eduardo me preguntaba como mostrar el blog en construcción mientras realizaba algunos cambios en el blog,lo cual quería dar la sorpresa de su nuevo look a sus visitantes.
Pues si hay una manera de obtener eso así se evitará tener que "privatizar" el blog mientras se trabaja en algún cambio importante, ya que para el administrador el blog estará disponible como siempre, mientras que para los visitantes permanecerá oculto (se cargará como siempre, pero solo podrá verlo el administrador).

Para no desconcertar a los usuarios, una vez los visitantes han accedido al blog podrían ver en lugar de unas pocas palabras una imagen que nosotros hayamos colocado con un logo o un texto de "Estamos en construcción por favor vuelva en unos minutos" por ejemplo.

Para lograr esto nos dirigimos a Diseño >>>  Edición HTML y para una busqueda mas rapida precionamos Ctrl+F y colocamos lo queremos encontrar en este caso buscamos <body>  en muchas plantillas lo puedes encontrar así <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Justo después de esta etiqueta, añadimos esta línea de código que no mostrara imagen:

 <span class="item-control blog-admin">

Si queremos añadirle alguna imagen como que esta en construccion seria así:

 <div style="text-align: center;"><img src="URL_de_la_imagen"/></div>
 <span class="item-control blog-admin">

Ahora nos dirigimos hasta casí el fondo de la plantilla o si quieren lo buscan como les indique  una ves encontrado vamos a ver la etiqueta de cierre </body>

 Justo antes de esa etiqueta </body> colocamos el cierre del código anterior:

 </span>

Una vez guardamos esos cambios, el blog estará oculto a los usuarios.

Read More

Efecto zoom en botones de redes sociales al pasar el mouse

Hace unos días atrás visitando el foro de google me encontré con que no una varias personas preguntaban como podían obtener el efecto zoom,ampliar en botones de redes sociales y revisando en el baúl de los truquitos jajaja encontré algo que me podía ayudar componer este efecto Hover el cual al pasar el mouse por encima de esa imagen que en este caso va a ser unos botones de redes sociales este obtiene el efecto zoom o sea se amplia,se agranda y al quitar el puntero,mouse esta vuelve a su normalidad, con este efecto podemos hasta observar mejor dicho botón.
Para implementar este efecto es bien sencillo solo colocandolo en un gadget , lo que son los estilos los cuales estan entre las etiquetas <style> y <style>  lo pueden colocar en su plantilla antes de que cierre la etiqueta </head> pero si quieren lo pueden dejar todo junto y colocarlos donde les voy a indicar para eso. Vamos a diseño >>> Añadir un gadget >>>HTML/Javascript Añadir >>> y una ves abierta la ventana pegamos el siguiente codigo:

Le vamos a dar una clase en este caso va a ser redes-sociales1 ustedes la pueden cambiar si quieren o si en su sitio ya tienen ese id pues lo cambian porque no se puede repetir.

Ejemplo:

• 
• 
• 
• 
• 

<style type='text/css'>
.redes-sociales1{
list-style-type:none;
margin:0;
padding:0;
}

.redes-sociales1 li{
display:inline;
width: 45px;
height:50px;
}

.redes-sociales1 li img{
width: 45px; /* tamaño de la imagen.*/
height: 50px; /* altura de la imagen.*/
border:0;
margin-right: 12px; /*espacio entre cada  imagen*/
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1s ease-in;
-khtml-transform 0.1s ease-in;
}

.redes-sociales1 li img:hover{
-moz-transform:scale(1.8); /*tamaño que va a alcansar la imagen mas es mas grande en firefox */
-webkit-transform:scale(1.8); /*Y así para los demas navegadores excepto IE*/
-o-transform:scale(1.8);
transform:scale(1.8);
-khtml-transform:scale(1.8);
}

</style>


<ul class="redes-sociales1">
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/twitter.png" title="añadir a twitter" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/facebook.png" title="añadir a Facebook" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/google%2B.png" title="añadir a google+" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/rss%20%282%29.png" title="añadir a RSS Feed" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/you-tube.png" title="añadir a youtube" /></a></li>
</ul>

Nota:
Lo que que esta en color rojo deben sustituirlo por la url que tienen en la red social de la red social.
Lo que esta en color naranja es la url de la imagen esa la pueden sustituir por otra que sea de su agrado.
Lo que esta en color amarillo es el titulo que quieren que aparesca al poner el mouse encima de la imagen.


Una ves puesto el codigo y echo los cambios correspondientes le dan al boton de guardar y van a ver como les quedo.


Sí les gusto este post,entrada recuerden compartir y comentar no cuesta nada es un modo de agradecer por el trabajo y esfuerzo que uno hace si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código o la información lo podrán ver muchas gracias

Read More

Hacer girar los botones de redes sociales al pasar el mouse con css

En el dia de hoy les voy a mostrar una forma sencilla de obtener un efecto de movimientos en los botones de redes sociales el cual al pasar el mouse por encima este va a girar a 360 grados y otras opciones mas que les voy a mostrar a continuacion, este efecto lo vamos a optener mediante css.la forma mas cencilla.

Para ponerlo en nuestro sitio solo debemos seguir el siguiente paso muy sencillo.
Vamos a diseño >>> Añadir un gadget >>>HTML/Javascript Añadir >>> y una ves abierta la ventana pegamos el siguiente codigo:

Primer ejemplo:

<style>
p#redessociales1 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>
<p id="redessociales1">
<a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/twitter.png" title="añadir a twitter" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/facebook.png" title="añadir a Facebook" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/google%2B.png" title="añadir a google+" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/rss%20%282%29.png" title="añadir a RSS Feed" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/you-tube.png" title="añadir a youtube" /></a>
</p>

 Segundo ejemplo:

<style>
p#redessociales2 img{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#redessociales2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
</style>
<p id="redessociales2">
<a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/twitter.png" title="añadir a twitter" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/facebook.png" title="añadir a Facebook" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/google%2B.png" title="añadir a google+" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/rss%20%282%29.png" title="añadir a RSS Feed" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/you-tube.png" title="añadir a youtube" /></a>
</p>

Tercer ejemplo:

<style>
p#redessociales3 img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#redessociales3 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<p id="redessociales3">
<a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/twitter.png" title="añadir a twitter" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/facebook.png" title="añadir a Facebook" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/google%2B.png" title="añadir a google+" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/rss%20%282%29.png" title="añadir a RSS Feed" /></a><a href="http://tubetrucos.com"><img style="width: 60px; height: 60px;" src="http://dl.dropbox.com/u/25944020/you-tube.png" title="añadir a youtube" /></a>
</p>

Una ves puesto el codigo del que van a usar le dan a guardar y van a ver como les quedo.

Nota:
Lo que que esta en color rojo deben sustituirlo por la url que tienen en la red social de la red social.
Lo que esta en color naranja es la url de la imagen esa la pueden sustituir por otra que sea de su agrado.
Lo que esta en color amarillo es el titulo que quieren que aparesca al poner el mouse encima de la imagen y lo mismo con los demas.

En los tres ejemplo es lo mismo a cambiar.

Si decean cuando lo coloquen en su sitio publiquen un comentario para ver como les quedo.

Sí les gusto este post,entrada recuerden compartir y comentar no cuesta nada es un modo de agradecer por el trabajo y esfuerzo que uno hace si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código o la información lo podrán ver muchas gracias.

Read More

Como evitar que se indexen las imagenes y algo mas del contenido del blog

En muchos casos las personas no quieren que se indexen las imagenes de su blog .porque? A alguien con un blog personal podría no gustarle mucho  encontrar las fotos de sus hijos o familiares en la búsqueda de imágenes de Google, que de seguro cualquiera puede verlas o guardarlas. y muchos se preguntan si es posible evitar de que los robot no indexe las imagenes, quiere decir que las imagenes que publiques en tu blog o sitio solo estarán allí y no al alcance de todos. con esto no quiero decir que van a estar 100% seguras lo único que les recomiendo es que no publiquen ni datos personales o fotografías inapropiadas.

El paso a seguir es muy sencillo solo vamos a añadir una etiqueta meta a nuestro código en la plantilla para esto vamos a diseño edición html y localizamos el siguiente código,recuerden que para una búsqueda mas rápida usen Ctrl+F peguen el código que quieren buscar y les sera mas rápido:



   <title><data:blog.pageTitle/></title>

Una ves localizado colocamos el siguiente codigo justo antes :



<meta name="robots" content="noimageindex"/>

La etiqueta Meta  que vamos a utilizar evitará que nuestras imágenes se conviertan en públicas.

Guardamos la plantilla y listo.


La protección a las imagenes se le aplicarán a todas las imágenes del blog. Sin embargo, los buscadores tardarán un tiempo en dejar de mostrar las imágenes (el contenido si sigue 'indexado'.

Un truquito extra:
También podemos ocultar uno o varios elementos dentro de una entrada o de un gadget en html-javascript (ya sea imagenes,párrafos etc...).

Para este extra vamos a hacer uso  de las etiquetas googleoff y googleon


Donde se pone?

Se coloca cuando estés creando una entrada y con la pestaña Edición html marcada lo colocamos en donde queramos usarlo como les muestro a continuación.



Contenido indexado.



<!--googleoff: all --> Contenido protegido. <!--googleon: all -->



contenido indexado.


Sí les gusto este post,entrada recuerden compartir y comentar no cuesta nada es un modo de agradecer por el trabajo y esfuerzo que uno hace si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código o la información lo podrán ver muchas gracias.

Read More

Mostrar/ocultar contenido en nuestro sitio

Una forma mas de mostrar/ocultar el contenido de un gadget, de una parte de la entrada etc... Esta vez, usaremos un efecto deslizante, un efecto slide que podremos aplicar a un gadget o en alguna parte de una entrada. aparte de slide tambien esta (appear y blind) pero es mas elegante el efecto slide.

Primeramente antes de comenzar, debemos tener en cuenta que si ya tenemos el código de Prototype y Scriptaculous en la plantilla.solo es necesario incluirlo una vez, por lo que si ya lo tienes, podrás saltarte el siguiente paso.

1) Debes pegar este script antes de la etiqueta </head>

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Una ves puesto el codigo guarda la plantilla


2) Una vez tengas el script instalado, ya podrás aplicar el efecto a cualquier parte de tu blog, ya sea en una entrada o en un gadget.

Este es el código para usar el efecto deslizante con un enlace de texto:

<div style="margin-left: 30px;"><a style="color: #999999; " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento1','slide'); return false">Mostrar el contenido</a></div>
<div id="elemento1" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Mostrar el contenido▼▲

Esto es un poco de texto para que veas el ejemplo aquí puedes poner lo que quieras desde imagen videos o un largo texto lo que mas guste poner

Si lo que decean es poner en lugar de un texto que diga mostrar el contenido a una imagen entonces deben poner el siguiente codigo:

<div style="margin-left: 30px;"><span ><a style="color: rgb(153, 153, 153); " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento2','slide'); return false"><center><img src="URL DE TU IMAGEN"/></center></a></span></div><div id="elemento2" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Den click a la imagen para ver el efecto:

Esto es un poco de texto para que veas el ejemplo aquí puedes poner lo que quieras desde imagen videos o un largo texto lo que mas guste poner

MOSTRAR EL CONTENIDO por la frase o texto que actuará como enlace para desplegar el contenido.

CONTENIDO OCULTO por cualquier cosa que desees ocultar. Puede ser un código, un bloque de texto, una tabla, una imagen un video lo que quieras

URL DE TU IMAGEN por la imagen que actuará como botón para desplegar el contenido.


Donde dice elemento1 elemento2 pueden cambiarlo por el nombre que quieran pero nunca se puede repetir para que no ocasione comflictos ejemplo cada ves que quieran poner el codigo seria asi elemnto1 elemento2 elemnto3 elemnto4 etc... si me entienden no se puede repetir el mismo nombre.


Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Extraer imagenes de un vídeo en Youtube

Primeramente antes de mostrarles el truco que les traigo hoy quiero felicitarlos por el año nuevo 2012 les deceo mucha salud prosperidad que todas sus ilusiones y metas se cumplan en este nuevo año.bueno hoy les traigo un truquito expectacular se trata de obtener la imagen principal de un video en youtube seguro se preguntan que imagen sera esa y mas de un video bueno les explico cuando una persona sube un video a youtube este le coloca una imagen de alguna sección del video y esa imagen será la que se verá siempre antes de dar play al video, aquí les voy a mostrar como Extraer imagen de un vídeo en Youtube.este truco es muy útil para diseñadores y desarrolladores que crean plantillas web y usan vídeos de youtube,por ejemplo: un sitio web que muestre vídeos.
Para obtener dicha imagen solo necesitamos el ID del video ejemplo:




http://www.youtube.com/watch?v=bESGLojNYSo&feature=relmfu

Esta url es de un video de Lady Gaga,lo unico que vamos a obtener es el ID es lo que les marque en rojo una ves obtenido el ID lo van a colocar en la siguiente url en donde les voy a marcar en rojo
como ven hay varias url cada una al final pueden ver que cambia eso es si hay otras imagenes las obtienen tambien y la ultima es la de alta definicion.



http://i2.ytimg.com/vi/bESGLojNYSo/default.jpg









http://i2.ytimg.com/vi/bESGLojNYSo/1.jpg









http://i2.ytimg.com/vi/bESGLojNYSo/2.jpg





La siguiente se va a mostrar en alta definicion.



http://i2.ytimg.com/vi/bESGLojNYSo/hqdefault.jpg






De seguro se preguntan? y porque hay que poner el ID del video en esa otra url bueno les explico .
¿Qué es i.ytimg.com?

Cuando entramos a una página web o a nuestra propia página (si eres webmaster) a veces nos damos cuenta que en la barra de estado queda cargándose una pagina que no entendemos que es, pero quizá no le damos mayor importancia.bueno
Esa dirección es i.ytimg.com, y pertenece a los servidores de imágenes miniatura de Youtube, cuando subimos un video a Youtube, a ese video Youtube le coloca una imagen de alguna sección del video y esa imagen será la que se verá siempre antes de dar play al video, entonces todas esas imágenes se almacenan en los servidores que tienen la dirección i.ytimg.com, pero de estos servidores hay más (i1.ytimg.com, i2.ytimg.com, i3.ytimg.com, i4.ytimg.com). El ytimg significa YouTube Image.

Y de hay es que podemos obtener las imagenes 


Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Mensajes aleatorios en la barra de titulo

Bueno hoy vamos a animar un poco la barra de titulo en la cual va a aparecer cada 10 segundo un mensaje nuevo hasta cuatros y mas,en el código que les brindo se los doy para que pongan cuatro mensajes no tan largo claro aunque si lo ponen un poquito largo para que se vea completo hay que poner el cursor encima de la barra de titulo pero ya eso es a gusto de cada persona este es un código pequeño y fácil de implementar yo les voy a marcar lo que deben cambiar.
Aquí les muestro un ejemplo:

Para poner este código vamos a Diseño > Edición de HTML y sin Expandir plantillas de artilugios ponemos en el  <head> y </head> el siguiente código:

<script language="JavaScript">
<!-- Este script y mucho mas en tubetrucos.com -->
function tubetrucos() {
var a = "Todo para tu web en tube trucos.";
var b = "Los trucos y gadget más completo en tube trucos";
var c = "Enlázanos desde tu página";
var d = "Enlazándonos nos ayudas a prosperar";
 var t = new Date();
 s = t.getSeconds();
 if (s == 10) {
  document.title = a;}
 else if (s == 20) {
 document.title = b;}
 else if (s == 30) {
 document.title = c;}
 else if (s == 60) {
 document.title = d;}
 else if (s == 40) {
 document.title = a;}
 else if (s == 50) {
 document.title = b;}
 else if (s == 70) {
 document.title = c;}
 else if (s == 00) {
 document.title = d;}
 setTimeout("tubetrucos()", 1000);
 }
</script>


Una ves colocado ese código vamos  a colocar el siguiente para eso bajamos mas hacia abajo o para una búsqueda mas rápida usen Ctrl+F y ponen lo que quieren buscar en este caso vamos a buscar </body>
Y justo antes vamos a colocar lo siguiente:

<body onLoad="tubetrucos()"></body>

Una ves puesto le damos click a guardar plantilla y es todo no dirigimos a nuestra pagina y vemos en la barra de titulo como cambia cada 10 segundos los mensajes que ustedes colocaron ,bueno espero y les haya servido de algo

Read More

camara de seguridad para tu sitio

Con este gadget que les muestro hoy van a obtener el resultado de una cámara de

vigilancia en su blog claro es una imagen animada no vayan a pensar que es de verdad   no tiene ninguna utilidad pero es un poco divertida bueno esto es a gusto de cada cual a lo mejor a alguien no le gusta pero para gustos se hicieron los colores jajaja esta cámara va a estar ubicada en la parte de arriba a la derecha pero ustedes la pueden modificar la posición.
bueno para instalarla es muy simple van a diseño añadir un gadget después HTML/Javascript y pegan el siguiente código que le brindo.

<div style="text-align: center;"><a href="<br /> AQUI VA LA URL DE TU SITIO O LA QUE QUIERAS" style="right: 0px; position: fixed; top: 0px;"><img src="http://dl.dropbox.com/u/25944020/camarastubegif" /></a></div>

Disfrutenla

Read More

Deshabilita el botón derecho y no permite seleccionar

Muchas personas no les gusta que alguien venga y les copie cosas de su sitio porque después de tanto esfuerzo que te cuesta diseñarlo esta duro verdad,el que tenga un sitio personal y no quiere compartir ningún código con nadie y quisiera evitar que otra persona le copie o le seleccione a continuación le voy a brindar ese código el cual nadie puede seleccionar ni dar click derecho para poderte copiar.
Nota: también existe una manera pero es mas complicada porque tendrías que ir al código completo de la pagina y pueden usar Ctrl+F y buscan lo que necesitan pero mucho no lo saben.

Bueno para implementar este codigo vamos a Diseño>edición HTML>expandimos artilugios
para busqueda mas rapido usamos Ctrl+F y buscamos </head> y justo antes pegamos el siguiente

<script type='text/javascript'>
function inhabilitar(){

return false;
}
document.oncontextmenu=inhabilitar;

function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;);
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>



Una ves puesto el codigo guardamos plantilla y es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.

Read More

Personalizar "entradas antiguas" "home" "entradas mas recientes" con imagen

Hay muchas personas que en su sitio al final de cada entrada tienen los link de "Entradas mas recientes" "Página principal" y "Entradas mas antiguas" pero lo tienen simplemente con solo letras si lo que quieren es personalizarlo y ponerle imagenes en lugar de palabras pues aquí les muestro como hacerlo de la forma mas sencilla,en muchas plantillas ya biene estas opciones pero como les dije con solo palabras,ahora vamos a personalizarlo.
Recuerden siempre guardar una copia de seguridad antes de empezar con los cambios.

1-Lo primero que vamos a hacer es ir a diseño a Edición de HTML.
2-Activa la opción "Expandir plantillas de artilugios" y en el código busquemos lo siguiente:

o usen Ctrl+F y usen cualquier linea del código para encontrarlo mas rápido siempre asegúrese de que coincida lo demás.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link'

expr:href='data:newerPageUrl' expr:id='data:widget.instanceId +

&quot;_blog-pager-newer-link&quot;'

expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'

expr:id='data:widget.instanceId + &quot;_blog-pager-older-

link&quot;'

expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'

expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'

expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>



Estos códigos corresponden a estos enlaces de navegación.

<data:newerPageTitle/> – "Entrada más reciente"
<data:olderPageTitle/> – "Entradas antiguas"
<data:homeMsg/> – "Página principal"



Para cambiar el texto por otro de su agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, un ejemplo, para el link de entradas recientes sustituimos completamente "<data:newerPageTitle/>" por "entradas más recientes".

Para cambiar el texto por una imagen ejemplo, para el link de entradas recientes sustituimos completamente <data:newerPageTitle/> por
<img alt='data:newerPageTitle' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN' />
sustituimos completamente <data:olderPageTitle/> por
<img alt='data:olderPageTitle' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN'/>
sustituimos completamente <data:homeMsg/> por
<img alt='data:homeMsg' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN'/>

Una ves encontrado ese código lo van a sustituir por este que les brindo ya con imagen simplemente si no les gusta la imagen la cambian .


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='data:newerPageTitle' src='http://dl.dropbox.com/u/25944020/left.gif'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='data:olderPageTitle' src='http://dl.dropbox.com/u/25944020/right.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='data:homeMsg' src='http://dl.dropbox.com/u/25944020/casatube.gif1.gif'/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>


Una ves hecho eso le dan a guardar y es todo disfruten ese nuevo diseño para su plantilla.
El resultado lo pueden ver al final de cada post de este sitio .asi les va quedar a ustedes.

Read More

Desabilitar botón derecho "con mensaje"

Con este código que les brindo a continuación lo que pueden hacer es inabilitar el botón derecho y el que intente hacerlo le saldrá un mensaje en pantalla el cual ustedes lo pueden modificar a sus gustos.
Donde dice: Función desabilitada.Perdonen las molestias lo pueden modificar por las palabras que ustedes quieran.

Nota: con esta función desabilita el botón derecho pero el que quiera copiarte simplemente seleccionando y arrastrando ya te copia.


<script language="JavaScript">
<!--http://www.tubetrucos.com/-->
<!--
function inhabilitar(){
alert ("Función desabilitada.Perdonen las molestias")
return false
}
document.oncontextmenu=inhabilitar
// -->
</script>

Read More

Cursor con imagen

Con este código que les brindo a continuación lo que vamos a obtener es que una imagen siga al cursor,mouse,puntero etc como le llamen con cualquier movimiento que haga.este código lo vamos a colocar entre las etiqueta <body></body>

Donde dice: var trailimage=["AQUI VA LA IMAGEN Y A CONTINUACIÓN EL ANCHO Y LA ALTURA",30,30]
         &nb
sp;         var displayduration=0      ES EL TIEMPO QUE QUIERES QUE DURE LA IMAGEN SIGUIENDO AL CURSOR 0 ES PARA SIEMPRE.

<script type="text/javascript">

<!---http://www.tubetrucos.com/--->

var trailimage=["http://dl.dropbox.com/u/25944020/baseball.gif",35,35] //image path, plus width and height
var offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""

}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse

if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)

</script>

Read More

fuegos artificiales en la web

Con este código ya pueden celebrar en su sitio web o blog porque hace el efecto de fuegos artificiales,fireworks por toda la web
pueden ver el ejemplo en pantalla.este codigo lo deben de ubicar entre las etiquetas <body></body> disfrutenlo.

<script type="text/javascript">
var bits=100;
var intensity=7;
var speed=20;
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");


var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
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;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
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;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
</script>

Read More

Pelotas que siguen al cursor

Con este código javascripts van a obtener el resultado de unas pelotas que de una forma elásticas siguen al cursor,mouse a donde quiera que se mueva,para implementarlo simplemente lo van a colocar entre las etiqueta <body></body> y van a obtener el resultado que ven en pantalla. para poner su imagen donde dice:     http://dl.dropbox.com/u/25944020/football.gif        lo remplazan por la imagen que quieran poner

<div id="dot0" style="position: absolute; visibility: hidden;"> </div> <div 0="" 30;="" height:="" id="dot1" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot2" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot3" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot4" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot5" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <div 0="" 30;="" height:="" id="dot6" style="background: none;bottom: 0pt; position: absolute;" width:=""> <img src="http://dl.dropbox.com/u/25944020/football.gif" /></div> <script type="text/javascript"> <!-- http://www.tubetrucos.com/ --> <!-- Begin var nDots = 7; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var Xpos = 0; var Ypos = 0; var DELTAT = .01; var SEGLEN = 10; var SPRINGK = 10; var MASS = 1; var GRAVITY = 50; var RESISTANCE = 10; var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 35; var BOUNCE = 0.75; var isNetscape = navigator.appName=="Netscape"; var followmouse = true; var dots = new Array(); init(); function init() { var i = 0; for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } if (isNetscape) { startanimate(); } else { setTimeout("startanimate()", 20); } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; this.obj = eval("document.getElementById('dot" + i + "').style"); } document.onmousemove = MoveHandler; function startanimate() { setInterval("animate()", 20); } function MoveHandler(e) { if (!e) { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } else { Xpos = e.pageX; Ypos = e.pageY; } } function vec(X, Y) { this.X = X; this.Y = Y; } function springForce(i, j, spring) { var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; } } function animate() { var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } } // End --> </script>

Read More

Reloj que sigue al cursor

Reloj que sigue al cursor tambien girando el dia ,dia de la semana mes y año cerca de su cursor ,mause y hacen que siga su puntero.Fácil de personalizar la fuente y color (también tiene que es opcional el botón de encendido y apagado).

Este es el boton pruebalo:

Este codigo lo deben de poner entre las etiquetas <head></head>

<style type="text/css">
<!--
/*Do not Alter these. Set for alignment*/
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
//-->
</style>

Este codigo lo deben de poner entre las etiquetas <body></body>

<script language="JavaScript">
<!-- Mouse Follow Clock from Rainbow Arch -->
<!-- This script and many more from : -->
<!-- http://rainbow.arch.scriptmania.com -->
<!-- http://www.tubetrucos.com/ -->


//Hide from older browsers
if (document.getElementById&&!document.layers){

// *** Clock colours
dCol='#00ff00'; //date colour.
fCol='#ffffff'; //face colour.
sCol='#ffffff'; //seconds colour.
mCol='#00ff00'; //minutes colour.
hCol='#00ff00'; //hours colour.

// *** Controls
del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).

// Alter nothing below! Alignments will be lost!
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'<\/div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'<\/div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'<\/div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'<\/div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'<\/div>');
tmps[i]=document.getElementById("_seconds"+i).style;
}

function onoff(){
if (vis){
vis=false;
document.getElementById("control").value="Clock On";
}
else{
vis=true;
document.getElementById("control").value="Clock Off";
Delay();
}
kill();
}

function kill(){
if (vis)
document.onmousemove=mouse;
else
document.onmousemove=null;
}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
if (!vis)clearTimeout(tmr);
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>

Este codigo lo deben de poner en donde ustedes quieran que aparesca el boton

<script type="text/javascript">
<!-- Mouse Clock Button
//Hide from older browsers
if (document.getElementById&&!document.layers){
document.write('<input type="button" id="control" value="Clock Off" onClick="this.blur();onoff()">');
}
//-->
</script>

Read More

Efecto de texto arcoiris con opciones

En muchos sitios les gusta llamar la atencion con textos brillantes,textos en movimientos etc.Bueno con este codigo que les brindo a continuacion van a obtener un resultado de texto arcoiris el texto les va a cambiar el color continuamente.para implementarlos simplemente van a diseño elementos de la pagina
añadir un gadget en donde ustedes quieran que aparesca el texto arcoiris y es todo es muy facíl disfrutenlo. en este les pueden cambiar el tamaño del texto que tipo de texto la velocidad etc....

font-size:26pt            es el tamaño del texto
font-style:italic           es el estílo del texto
var text=                   aqui va el texto que quieras
var speed=                la velocidad con la que cambia de color

Ejemplo:

<div style="font-size:26pt;font-family:Verdana;font-

weight:bold;font-style:italic;text-align:center">
<!-- Codes by tubetrucos.com/ -->
<script>
var text="Disfruten este texto maravilloso" // aquí va

tu texto
var speed=50 // velocidad

if (document.all||document.getElementById){
document.write('<span

id="highlight">' + text +

'</span>')
var storetext=document.getElementById?

document.getElementById("highlight") :

document.all.highlight
}
else
document.write(text)
var hex=new Array

("00","14","28","3C",

"50","64","78","8C",

"A0","B4","C8","DC",

"F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</div>

Read More

Efecto de texto arcoiris

En muchos sitios les gusta llamar la atencion con textos brillantes,textos en movimientos etc.Bueno con este codigo que les brindo a continuacion van a obtener un resultado de texto arcoiris el texto les va a cambiar el color continuamente.para implementarlos simplemente van a diseño elementos de la pagina añadir un gadget en donde ustedes quieran que aparesca el texto arcoiris y es todo es muy facíl disfrutenlo.

<script>

/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
For this script, visit http://www.javascriptkit.com
*/

// ********** cambia aquí

var text="Efecto de texto arcoiris disfrutenlo" // tu texto
var speed=80 // velocidad de movimiento


if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>

Read More

Enlace para post aleatorios

Este código se trata de lo mismo que podrás ver al final de cada post,entrada donde nos dice Veamos otra entrada cualquiera por si le encontraras alguna utilidad? bueno para hacer esto es muy fácil, Lo primero es ir a diseño Elementos de la Página y Pinchamos en Añadir un gadget y escogemos HTML/JavaScript. En la ventana emergente pegamos lo siguiente:

<div id="myLuckyPost"></div>
<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>



Después guardamos y nos fijamos que todo este bien este script que mediante cuatro pequeñas rutinas (funciones), lee nuestro feed, escoge de manera aleatoria una de nuestras entradas y nos lleva a ella.
Lo siguiente van a diseño después a Edición de HTML marcan Expandir plantillas de artilugios y en su teclado aprietan CTRL+F y cuando les aparezca el buscador ponen esto </data:post.body>
para que lo encuentren mas rapido bueno justo despues </data:post.body> van a poner este codigo :


<p>Veamos <a href='#ramdom' onclick='feelingLucky();' title='Entrada al azar'>otra entrada cualquiera</a> por si le encontraras alguna utilidad?</p>


le dan a guardar plantilla y chequean que todo este bien nunca olviden guardar una copia de seguridad el texto lo pueden modificar a sus gustos.

Nota :  Para aquella personas que usan el read more o leer mas etc... van a sustituir el codigo que les dije que pusieran en la plantilla por este :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p>Veamos <a href='#ramdom' onclick='feelingLucky();' title='Entrada al azar'>otra entrada cualquiera</a> por si le encontraras alguna utilidad?</p>

</b:if>


Esto evita que te salga en los post antes del leer mas y lo que hace es que salga en entradas individuales

Read More