Blog de pruebas de Sueños de una demente

viernes, 30 de septiembre de 2011

Efecto para desvanecer la imagen al pasar el mouse

Para este efecto tenemos que ir a diseño>edicion de html>expandimos artilugios
localizamos la etiqueta </head> i justo antes ponemos el siguiente codigo:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>
*este efecto lo encontre en: http://nell-blog-depruebas.blogspot.com/

viernes, 8 de julio de 2011

Una caja de enlaces

Si quieren tener una caja de enlaces como la que tengo a la derecha, que dice mi blog, y red social solo tiene que hacer esto:

Entrar a diseño, añadir gadget, HTML/javascrip, y pegar este código. Luego poner el enlace, el nombre que querés que diga y listo.

<script language="JavaScript">

</script>

<script language="JavaScript">

</script>

<a href='http://urldeenlace' onmouseover='thetext("-Título del enlace-"); atext("Descripción del enlace")' target=_top>Muestra de enlace</a><br />
<a href='http://urldeenlace' onmouseover='thetext("-Título del enlace-"); atext("Descripción del enlace")' target=_top>Muestra de enlace</a><br />
<form title="este truco en teoriablogger.blogspot.com" name="theform">
<input style="color:#000; background:#fff;" disabled type="text" name="thetext" size="30" />
</form>
<form name="aform">
<textarea style="color:#000; background:#fff;" disabled="disabled" rows=5 cols=25 wrap="virtual" name="atext"></textarea></form>

lunes, 27 de junio de 2011

Sacar subrayados a los enlaces

Si no te gusta para nada el efecto subrayado de tus links, puedes hacer que desaparezca fácilmente.

Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.

a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header

Para que la fecha este en todas las entradas

Sólo basta con entrar en Diseño | Edición de HTML marcar la casilla Expandir plantillas de artilugios y buscar este código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Lo eliminamos y en su lugar ponemos este otro:

<b:if cond='data:post.dateHeader'>
<script>var mismaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(mismaFecha);</script>
</h2>
</b:if>

viernes, 24 de junio de 2011

Como centrar el título de las entradas

Primero busca en tu plantilla (en modo de codigo HTML) la siguient línea:


<div class='blog-posts hfeed'>

cuando la encuentres (puedes hacerlo con la combinación de teclas: Ctrl + f ), cambia esa línea por esta otra:


<div class='blog-posts hfeed' align='center'>

Eso me funcionó a mí espero que te sirva...

Como poner una imagen al costado del titulo de la entrada

para iniciar debe ingresar a su cuenta de blogger, allí debe hacer clic en la opción de "Diseño" de su blog, y luego clic en la pestaña de "Edición de HTML", estando allí debe activar la casilla "Expandir plantillas de artilugios" y para hacer la acción mas rapida, presione la combinación de teclas "Ctrl + f" (se desplegará automáticamente un buscador de códigos HTML, puede que no aparezca si trabaja con un navegador distinto a Google Chrome) .....debe buscar este codigo:

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Al encontrar el anterior código fíjese en esta parte del mismo:

<a expr:href='data:post.url'><data:post.title/></a>

en la anterior linea es donde debe ubicar la imagen; si desea que esta se encuentre a la izquierda del titulo, debe copiar y pegar este codigo: <img src= "aquí_pegue_la_dirección_url_de_su_imagen"/> entre la primera y segunda parte de la linea, es decir, debe quedar así:

<a expr:href='data:post.url'><img src= "aquí_pegue_la_dirección_url_de_su_imagen"/><data:post.title/></a>

y si desea ubicar la imagen a la derecha del titulo de las entradas, la linea debe quedar así, entre la segunda y tercera parte del código:

<a expr:href='data:post.url'><data:post.title/><img src= "aquí_pegue_la_dirección_url_de_su_imagen"/></a>

........para finalizar debe copiar y pegar la dirección HTML de su imagen como se indica en la linea donde se ubica la imagen, es esta:

<img src= "aquí_pegue_la_dirección_url_de_su_imagen"/>

......es muy importante ver la vista previa de su blog, (clic en el botón "VISTA PREVIA"), antes de guardar los cambios,........listo!

miércoles, 22 de junio de 2011

Hacer del título de las entrads un efecto deslizante

Busca la etiqueta </body> y encima añade estos scripts:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('a[href*=#]').click(function(){if(location.pathname.replace(/^\//,'')==this.pathname.replace(/^\//,'')&&location.hostname==this.hostname){var $target=$(this.hash);$target=$target.length&&$target||$('[name='+this.hash.slice(1)+']');if($target.length){var targetOffset=$target.offset().top;$('html,body').animate({scrollTop:targetOffset},1000);return false}}})});
//]]>
</script>



<script type='text/javascript'>
$(document).ready(function() {
$('#Label1 li, .post-labels, .post h3, #BlogArchive1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

Darle un efecto de sombra a los títulos de las entradas.

1. Iniciar sesión a nuestra cuenta en blogger, ir a la ficha "Diseño" y en "Elementos de Página" creamos un "Gadget Html / Java Script" y pegamos el siguiente código. Ver condiciones

..: Código :..

#A4DFEF = El color de la iluminación o sombra | 15px = El tamaño de la Iluminación o sombra.

2. Para que el iluminado cambie al pasar el mouse por sobre el título de la entrada agregamos lo siguiente a nuestro código anterior. Ver condiciones

..: Código :..

#FFD0BF = El color de la iluminación o sombra | 15px = El tamaño de la Iluminación o sombra.

1. No hay que colocarle nombre al "Gadget Html / Java Script" que se esta creando. Ver Imagen
2. Debes arrastrar el gadget arriba o abajo de las entradas del blog. Ver Imagen

Ampliar imágenes al pasar el mouse o hacer click

Para ampliarla con un click y reducirla con dos click, de esta forma:

hay que usar este código, reemplazando lo necesario:

<img

src="URL DE LA IMAGEN"

width="ANCHO DE IMÁGEN REDUCIDA"

onclick="javascript:this.height=ALTO IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"

ondblclick="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/>

Para ampliarla al pasar el mouse:

Hay que usar este:

<img

src="URL IMAGEN"

width="ANCHO IMAGEN REDUCIDA"

onmouseover="javascript:this.height=ALTURA IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"

onmouseout="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/>

lunes, 20 de junio de 2011

Como quitar Suscribirse a entradas Atom

Podemos eliminar el texto Suscribirse a entradas Atom con un simple click.
Nos situamos en Plantilla/Opciones/Feed del Sitio.

Donde dice: Permitir feed del blog sustituimos Completo a Ninguno

domingo, 19 de junio de 2011

Barra de reproductor de música.

Entras a esta página http://scmplayer.net/ elegis el color de la barra, pones DONE y ya podes poner tu música, como? copias la dirección de url de youtube de la canción que quieras poner y ya esta, pones DONE y solo falta copiar el código en la parte de diseño, añadir gadget, HTML/javascrip

Queres tener la barra de twitter, facebook, youtube en tu blog?

Muy fácil, solo tenes que entrar a esta página, poner tus datos, agregar las cosas que queres que tenga la barra y lsito, no tenes que pegar ningún código, la página te lo pone :D

http://www.wibiya.com/

Uno de los mejores.

Un reloj para tu blog.

Si queres tener un reloj como el que hay en la página, entras acá y seguís las instrucciones, después copias el código en la parte de diseño, añadir gadget, HTML/javascrip

http://www.freeflashtoys.com/digital-clock

este es el código para el relog común negro:

<p><a href="http://www.freeflashtoys.com/?digital-clock"><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-

Música en tu blog

Tenes varias formas de tener música en tu blog, acá dejo una página en la que podes seleccionar el aspecto del reproductor, podes subir 200 canciones.

http://www.mixpod.com/myspace-mp3players.php

es fácil, elegís el diseño que queres y seguís las instrucciones y al final copias el código que te dan en la parte de diseño, añadir gadget, HTML/javascrip

Puntero en forma de cruz

Si queres tener el puntero como este pega el siguiente código en la parte de diseños, añadir gadget y HTML/javascrip

<style type='text/css'>
</style>

Quien esta en tu blog en este momento?

Si querés un gadget como el que está en la página que tiene contador de visitas, cuantas personas están en la página en el momento y cual fue el total de visitas entrá a esta página lo diseñas como queres y pegas el código que te dan.

http://es.99counters.com/

Acá está el código del de color negro:

Contador de visitas negro (el que tenemos en la página)

Van a diseño, añadir un gadget, HTML/Javascript
y pegan el código que te de esta página después de elegir el modelo que quieras del contador

http://contador-de-visitas.com/

Código de contador común negro:

<a href="http://contador-de-visitas.com"><img style="border: 0px solid ; display: inline;" alt="contador de visitas"
src="http://contador-de-visitas.com/hit.php?id=885944&counter=24"></a><br /><a href="http://contador-de-visitas.com">contador de visitas</a>

Estrellas en movimiento dentro del blog (girando en circulo)

Este es otro de esos truquillos que no sirven para nada pero que se ven muy bonitos en el blog.
Se trata de unas estrellas en movimiento que giran y se expanden en círculo dentro del blog y cambian de color conforme se mueven.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script language='javascript' type='text/javascript'>
//<![CDATA[
//Iván Nieto Pérez

var incremento = 0
//limite de la expansion de las letras
var y = 200
var x = 300
//posicion del centro de referencia del dibujo que describen las letras
var X = 400
var Y = 200

//velocidad de movimiento de las letras
var velocidad = 50
//mensaje que se mostrara y cuyas letras danzaran por la pantalla
//maximo 25 letras (de lo contrario, se sobrepasa el rango de colores valido)
var mensaje = "★★★★★★★★★★★★★★★★★★★★"
var numeroLetras = mensaje.length

function mueveLetras() {
for ( j = 0 ; j < numeroLetras ; j++ ) {

if (document.layers) {
letra = eval( "document.capa" + j )
letra.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.all) {
letra = eval( "document.all.capa" + j )
letra.style.pixelTop = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.style.pixelLeft = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.getElementById) {
letra = document.getElementById( "capa" + j )
letra.style.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
letra.style.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
} else //no soportado, finaliza ejecucion
return

}

incremento += .2
setTimeout("mueveLetras()", velocidad)
}

function escribeTexto() {
var texto = ''
for ( j = 0 ; j < numeroLetras ; j++ ) {
texto += '<div id="capa' + j + '" style="position:fixed; visibility:show; left:250px; top:150px; z-index:2; font-size: 2em; color: rgb(' + j*10 + ',' + (255-j*10) + ',150)">' + mensaje.charAt(j) + '</div>'
}
document.write( texto )
}

window.onload = mueveLetras;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}

//]]>
</script>

Luego busca la etiqueta </body> y antes de ella pega esto:

<script language="javascript" type="text/javascript">
escribeTexto()
</script>

¿No te gustan las estrellas? Entonces puedes usar cualquiera de estos caracteres:

♥ ☺ ✿ ♫ ♪ ☽ ☼ ☆

Lluvia de estrellas (estilo Stars Wars, no es como el de nieve)

Código javascript de efecto de lluvia de estrellas para blog o página web,qué va hacia tu pantalla estrellándose.Es un efecto muy bonito que queda muy bien en fondo negro y sugiero que solo se utilice en fondo negro.Da la sensación como si estuvieras en el espacio,estilo Stars Wars.Puedes ver un ejemplo Aquí.Funciona tanto en Firefox,Google Chrome, e Internet Explorer. Para instalarlas en tu página web,solo debes pegar el siguiente código antes de </body> en la edición HTML:
<script type="text/javascript" src="http://inacho07.googlepages.com/starfield.js"></script>
Recuerda que el color de fondo de tu web lo eliges en la etiquieta <body> en la que puedes agregar el atributo bgcolor="black" con el nombre del color en ingles, o con su respectivo código hexagesimal con un gato (#) antes, es decir: <body bgcolor="black"> o <body bgcolor="#000000">
También sirve para blogger. Añades el código en un nuevo elemento de página,HTML/javascript.

Truco para que nive en tu blog

Este truco lo vi hace un par de días en ciudad blogger y me gustó mucho.

Se coloca de forma muy parecida a las estrellitas del cursor, solo que, para no cargar este blog más de lo necesario, he eliminado el de las estrellitas y colocado éste en su lugar.

Si tu también quieres ver nevar en tu blog, pincha aquí para ver y copiar, el código que tendrás que añadir justo encima de </head>

Luego bajas hasta el final del código y busca esto: </body> y justo encima pega ésto:

<script language='javascript' type='text/javascript'>
nieva()
</script>

Vista previa y ya verás la nieve.

Si quieres ver más copos, en el código que has copiado de mi servidor, busca var numero = 16 y modifica este número aumentándolo.

Efecto de movimiento en títulos de entradas y gadget de etiquetas al pasar el mouse

Primero que nada debemos saber que para añadir este efecto en el blog debemos tener la llamada a JQuery en nuestro blog, esta llamada se coloca solo una vez en el blog, por si no la tienes te la dejo aquí. Este código hay que pegarlo antes de </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('a[href*=#]‘).click(function(){if(location.pathname.replace(/^\//,”)==this.pathname.replace(/^\//,”)&&location.hostname==this.hostname){var $target=$(this.hash);$target=$target.length&&$target||$(‘[name='+this.hash.slice(1)+']‘);if($target.length){var targetOffset=$target.offset().top;$(‘html,body’).animate({scrollTop:targetOffset},1000);return false}}})});
//]]>
</script>

Cotinuamos. Para añadir el efecto en tu blog ve a Diseño > Edición de HTML y pega el siguiente código antes de </body>:

<script type='text/javascript'>
$(document).ready(function() {
$('#Label1 li, .post h3').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

El código anterior indica que los enlaces de los títulos de los posts y del gadget de etiquetas deben tener el efecto.

Efecto de arcoíris en links (enlaces) al pasar el mouse

Sólo entra a Diseño > Edición de HTML y pega antes de </head> esto:

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>

Opacidad en las imágenes.

Imagen con opacidad y color normal al pasar el mouse:

<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Imagen normal y efecto de opacidad al pasar el mouse:

Cambiar el entradas antiguas, entradas más recientes y página principal

1) Entramos a Diseño

2) Clic en la pestaña Edicion de HTML

3) Clic en Expandir Plantillas de Artilugios

Y debes buscar los siguientes trozos de codigo:

<data:newerPageTitle/> – Corresponde al texto “Entrada más reciente”
<data:olderPageTitle/> – “Entradas antiguas”
<data:homeMsg/> – “Página principal”

Buscalos cada uno por separado y borralo (ojo, algunas plantilas tienes que borrarlo dos veces)