miércoles, 28 de agosto de 2013

~~ imagenes en movimiento ~~

Cada día se va haciendo más útil y lindo poner imágenes en movimiento en el blog.
Es algo bastante sencillo de hacer, aquí les dejo los pasos a seguir.

Esta serie de códigos que les voy a mostrar, deben colocarlos en creación de plantillas (o si quieren editar alguna también pueden hacerlo). También si quieren colocarlos en una barra y no en las entradas también les servirá, pero deben colocar el código en un Gadgest de HTML/JavaScript.

El código principal es


Donde esta # introducen la dirección URL de la imagen, entonces quedaría así :


Ahora si queremos que la imagen vaya hacia arriba. Solamente tenemos que agregar el comando direction="up" ( puedes cambiarlo por "down", para que las imagenes se muevan para abajo).
Entonces sería este código:


y Quedaría así:





Ahora si quieres que la imagen se detenga al pasar el mouse, el codigo seria este:

Y quedaría así:






Ahora si desean colocar varias imágenes en movimiento, sólo deben colocar este código:


Recuerden que pueden modifican la dirección donde dice "up", la velocidad dodne está el "8" y la altura donde dice "100px".
Además pueden añadir muchas imágenes si van repitiendo cada vez más ()







Espero que les ayude!! CREDITOS shojodecora.blogspot.com

Mensaje o texto en movimiento

hola para comenzar les traigo este trukito que me han pedido y es el como el nombre de la pagina osea el nombre del blog se ecuentre en movimiento:





les dire paso a paso como hacer este sencillito truco
NOTA: primeramente realizan una copia de seguridad de la plantilla para en caso de que no les quede o no les gusta ... regrese su plantilla a como estaba antes..!![2.jpg]okas despues ya hecho ese paso se van a: DISENO EDICION HTML
[1.png]
despues en editar plantilla bajan hasta encontrar el codigo b:skin abajito de este codigo pegaran el codigo que les doy a continuacion
[3.png]
este codigo





ya por ultimo guardan plantilla
[4.jpg] y te queda listo.!!



espero les haya gustado para cualquier cosa pueden contar conmigo dejandome su inquietud o duda en un comentario.. que tengan un buen dia n_n !! SaludOs



Cambiar imagen al pasar al cursor

Este trukito se trata de mostrar 2 imagenes en el espacio de una al pasar tu cursor por encima de la imagen n.n !!! esta muy padre y le da un toque muy bonito a tu blog.!

Pasa tu cursor sobre la imagen

oki para empezar sigue los siguentes pasos:

 Las 2 imagenes deben ser del mismo tamaño !!

 Las tienes que alojar en un hosting de imagenes ( yo recomiendo photobucket o imageshack)

 Copia el siguiente codigo



 Pega el codigo en una entrada en la que quieras conseguir el efecto o en un gadget Htlm/javascript.

 lo unico que tienes que hacer es cambiar lo que esta entre comillas que es URL DE LA PRIMERA IMAGEN viene 2 veces en el codigo y esa imagen sera la que quede estatica; URL DE LA SEGUNDA IMAGEN, esa sera la cambie al pasar tu cursor..!!

Notita: Donde dice URL DEL ENLACE es opcional es para cuando quieras que la imagen se redirija a algun lugar en especial ya sea a otra pagina o algun sitio de descarga !! si ese es el caso solo cambia donde diceurl del enlace por la url del lugar a donde quieres que se redirija n.n !!! ammmm yo solo lo ignore ahahha osea no le puse nada tambien puedes eliminar esa parte oki! espero haberme explicado x.X

como cambiar "entradas antiguas, entradas recientes e inicio"

este pOst me lo han pedido ya varias personitas ^.^ y no lo habia puesto por falta de tiempo so soorry T_T pero ya me hice un tiempito para que ustedes para actualizar y puedan poner cute su blog con este sencillo paso.!! Ven mis munequitas de abajo que dicen atras, adelante e inicio?? bueno pues cambiaremos las letras por imagenes ok? solo sigan bien los pasos y seguro que les queda muy bien..!


Para sustituir los links "entradas antiguas, entradas recientes e inicio" por las imágenes que queramos debemos seguir los siguientes pasos:

1) Vamos a Diseño
2) Edición HTML
3) Marcamos la casilla "expandir artilugios"


[[[[ NOTA...!! poorrr fiiis recuerden siempre realizar una copia de seguridad de su plantilla para evitar errOres y horrOres x_X ]]]]

ENTRADAS RECIENTES
4) Buscamos la siguiente parte del código: data:newerPageUrl (para buscar más rápido tecleamos Ctrl + F)
5) Una vez localizado nos aparecerá algo así:



<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


Tan sólo debemos cambiar <data:newerPageTitle/> por <img src='URL de la imagen'/>

En &lt;img src='URL de la imagen'/> deberemos cambiarlo por el link de la imagen que queramos. Recomiendo subir tus imágenes en un servidor gratuito comoimageshack.



ENTRADAS ANTIGUAS
Un poco más abajo encontraremos lo siguiente:



<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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Al igual que en entradas recientes tan sólo debemos cambiar <data:olderPageTitle/>por <img src='URL de la imagen'/>



INICIO
Por último, para sustituir el inicio de página principal deberemos buscar más abajo la siguiente parte de código:




<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>


Al igual que en entradas recientes y entradas antiguas tan sólo debemos cambiar<data:homeMsg/> por <img src='URL de la imagen'/>

Imagen estatica en el blog [modo facil]

Este truco es mas facil de hacer que el anterior pues con este script no tienes que hacer nada en la edicion de HTLM ^^!!!

Basta con solo copiar el codigo y pegarlo en un gadget htlm/javascript y listo n.n !!!

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="subir"><img src="URL DE LA IMAGEN" /></a>


ROJO: altura en la que quieres que este la imagen ( en 5px queda en la ezquina) 

MORADO: es la direccion en la que quieres que este puesta tu imagen. 

left es izquierda.............right es derecha


VERDE: direccion de tu imagen

imagen estatica en la esquina del blog

hoy voy a hablarles de como poner una imagen estatica en tu blog, asi como la mia ^^ (esquina derecha inferior) yo por ejemplo tengo a miKu de vocalOid que los acompaña durante la visita del blog... y sirve tambien para subir hasta arriba dandole click en la imagen eso no sabian verdaad? x) bueno les pongo este pequeno tutorial de como hacerlo.!!


 Ingresar a tu blog y buscas Diseño
 Colocar la opción Editar HTML
 buscas </body>; (pulsa Control F para que sea más fácil) que se encuentra al final de toda la plantilla.
Sobre ese código ingresas esto:

<a href='#'><img alt='ir arriba' border='0' src='dirección de la imagen' style='position:fixed; bottom:0; right:0;'/></a>
Y listo! colocas guardar plantilla y saldrá tu imagen