Otra manera de presentar fotos generando efecto "polaroid".
Como el truco anterior solo tenes que agregar un código script en la plantilla antes de
</head>:Y para subir la fotito usa:
►Para cambiar el color del borde cambia aca: "icolor993300"
Presentación de foto "polaroid"
Otra manera de presentar fotos generando efecto "polaroid".
Como el truco anterior solo tenes que agregar un código script en la plantilla antes de
Y para subir la fotito usa:
►Para cambiar el color del borde cambia aca: "icolor993300"
Generar reflejo en una foto
Te vas a sorprender lo fácil que es generar reflejo en una foto.
Para que salga te doy dos códigos.
Primero busca
</head> y antes pega lo siguiente:Guardas plantilla y lo que sigue es subir la foto que desees.
Para eso tenes que usar este código:
Saludos!!!
Visor de fotos en miniatura
Películas
No vas a tener inconvenientes para armarlo, solo prestarle atención cuando pegas la url de la imagen (código 2). Porque lo tenes que pegar dos veces.
Lo vi bien explicado en el blog de gem@, que lo sacó de vagabundia y en la página tu función. Asi que no puede fallar, lo vas a tener que usar ;)
Te lo dejo armado para que lo puedas subir ahora a tu blog.
Lo vi bien explicado en el blog de gem@, que lo sacó de vagabundia y en la página tu función. Asi que no puede fallar, lo vas a tener que usar ;)
Te lo dejo armado para que lo puedas subir ahora a tu blog.
Antes de </head> pega el siguiente código:
Y para subir las fotos usa este:
Este lo usas para cada foto que vayas a subir.
Programas para editar fotos. [ACA]
Donde esta esto: width: 85px; height: 125px es el tamaño de la foto que se ve en la entrada (miniatura).
Tené en cuenta que la foto que se abre es del tamaño original, asi que te conviene armar un tamaño que se ajuste a la pantalla.
Imagen en forma de cuadro
Ver blog de prueba
Mira que bien queda el cuadro de Quinquela
Esto se puede hacer si agregamos un elemento a nuestra hoja de estilo [CSS] y luego subimos la foto en la columna.
Códigos:
Primero pegas esto en la hoja de estilo entre <head>....</head>
Aca vas a poder configurar el fondo del recuadro, color, tamaño, letra del subtitulo, color y forma, entre otras cosas.
Después para subir la foto tenes que hacerlo con esto:
ACLARACIÓN: Tenes que tener en cuenta dos detalles.
1) Hay que ser muy prolijos con la foto que ponemos. Fijate el tamaño, que no se te vaya la mano, mira que tiene que estar acorde al ancho de la columna y el tamaño que le dimos en la hoja de estilo.
2) La foto la subis desde agregar un elemento de página. No la pongas en un post.
Buena Suerte !!!
Imagen transparente
Galeria de fotos !!!!
Verán las maravillas de la humanidad.
Marcando en el lugar donde se encuentran aparece la foto con una descripción abajo.
Esta es otra manera muy linda de mostrar las fotos en nuestro querido blog. Solo tenemos que encontrar un hosting para que nos dé la dirección de la foto. Pegarlo en el código que te doy y más abajo configurar la descripción de la misma. El código va tal cual está arriba. Vas a ver donde van las fotos, el titulo y la descripción.
[+/-]Abrir código
Configurar:
Para subir las fotos mira aca:
Entre option pones la imagen y después el titulo, que va a ser la referencia para la foto (ejemplo: Atenas).
Despues vas a ver que en el código está marcado donde va la descripción (entre comillas).
Y para ver las medidas mira aca:
Un dato: Para subirlo al blog tenes que hacerlo desde "añadir un elemento de página" y luego lo arrastras donde entre bien.
Abrazos y besos
Fotos: opacarlas un 50% y agregarle texto.
Este truco consiste en opacar una foto y agregarle texto, en un recuadro, encima.
Te regalo una flor
<center><div style="width:267px;height:400px;filter:alpha(opacity=50);opacity:.50;
background:url(http://img54.imageshack.us/img54/4210/815bb578fa4e7384uu3.jpg);">
</div>
<div style="width:200px;border:2px solid maroon;padding:12px;font-weight:bold;position:relative;top:-150px;left:0px;color:white;
background:url(http://img54.imageshack.us/img54/4210/815bb578fa4e7384uu3.jpg);"> Te regalo una flor
</div></center>
background:url(http://img54.imageshack.us/img54/4210/815bb578fa4e7384uu3.jpg);">
</div>
<div style="width:200px;border:2px solid maroon;padding:12px;font-weight:bold;position:relative;top:-150px;left:0px;color:white;
background:url(http://img54.imageshack.us/img54/4210/815bb578fa4e7384uu3.jpg);"> Te regalo una flor
</div></center>
Configurar:
Primero vemos la medida de la imagen
width:267px;height:400px
Para opacar tocamos en esta medida
filter:alpha(opacity=50);opacity:.50;
Por último la foto de fondo
background:url(http://.....)
El texto en el recuadro
width:200px;border:2px solid maroon;padding:12px;
Tamaño del cuadro, borde y color.
relative;top:-150px
Con esta medida ubicas de arriba para abajo la posición del recuadro.
Escribir una foto con un recuadro opaco!
24 de Marzo de 2007
Aniversario del Golpe de Estado
No es difícil hacerlo, solo tenes que poner este código:
Mirá que el código está tal cual la foto de arriba:
Ver bien donde va la imagen y el tamaño de la misma.
Con "relative; top:" vas moviendo el recuadro
Foto que cambia al tocar con el mouse !
Este truco para imágenes en muy práctico para difundir un vinculo, como el que tengo aquí al lado.
Se ponen dos fotos, la primera se repite otra vez después del vinculo.
Se puede agregar al blog desde "añadir elemento"
Copiar código:
Presten atención a las leyendas que hay dentro del código.
Galería de imágenes !!!
Haciendo clic en la imagen ves como funciona
Si querias insertar una galería de imágenes ahora es muy fácil con este script.
Te dejo el código:
(Dentro del mismo está aclarado como se configura)
[+/-]Abrir código 1
<center><script type="text/javascript">
//Especificar el ancho (en pixeles)
var sliderwidth="250px"
//Especificar el alto
var sliderheight="150px"
//Podes configurar la velocidad de 1-10)
var slidespeed=2
//configurar el color fondo:
slidebgcolor="#000000"
//Aca pones la dirección de la imagen, mirá que antes se puede poner el vinculo
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img border="0" src="http://img83.imageshack.us/img83/691/37649011bn2.jpg"></a>'
leftrightslide[1]='<a href="http://"><img border="0" src="http://img141.imageshack.us/img141/2835/95022256af9.jpg"></a>'
leftrightslide[2]='<a href="http://"><img border="0" src="http://img156.imageshack.us/img156/7954/56711110sv8.jpg"></a>'
leftrightslide[3]='<a href="http://"><img border="0" src="http://img155.imageshack.us/img155/8238/93160771tx9.jpg"></a>'
leftrightslide[4]='<a href="http://"><img border="0" src="http://img511.imageshack.us/img511/4858/72744070yq2.jpg"></a>'
var imagegap=""
var slideshowgap=5
////ACA NO TOCAR////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></center>
Nota: Se usa desde añadir un elemento de página.
Respuesta: Para modificar alto y ancho mirar al principio del código:
//Especificar el ancho (en pixeles)
var sliderwidth="250px"
//Especificar el alto
var sliderheight="150px"
Buen recurso para las imagenes !!!!
Esto es tan bueno que no vas a poder creer que sea tan fácil.
Es un script para mostrar una imagen en miniatura, que cuando la tocan se agranda.
Mirá:
Inseguridad
Genoma
Códigos:
Despues de <head> de tu plantilla, agregas estas lineas
Aca podes configurar la posición de la imagen que se agranda, el color de fondo, el tipo de texto, etc.
Y para agregar la imagen va este código:
Te agrego uno armado con una imagen que puse arriba:
Este código lo pones donde vos quieras que vaya la o las imagenes.
Aca podes modificar el tamaño de la imagen que va en miniatura y el texto de abajo.
Como subir imágenes, paso a paso !!!
Este mes voy respondiendo a los correos que me envían.
Ahora vamos a ver paso a paso como se sube una imagen al blog.
Para que una imagen se vea en nuestro blog tenemos que colocar una línea de códigos:
<IMG SRC="URL de la imagen">
Ahora el tema es como conseguimos la URL de una imagen.
Hay que tener en cuenta que existen varias páginas que dan ese servicio. Lo único hay algunas que dan poco espacio para subir imágenes y otros borran las mas viejas.
Yo utilizo dos "hosting" de imágenes:
Vamos a usar para el ejemplo a Tiny Pic
En "Examinar elegimos la imagen de nuestra compu y luego hacemos clic en
.Donde dice "Tag" no es necesario poner nada.
Una vez cargada la imagen nos muestra una miniatura y varias lineas de códigos.
En este caso utilizamos la ultima:
Quedaria asi:
<IMG SRC="http://i12.tinypic.com/2ekowh0.jpg">
Si queremosespecificar el tamañoal que debe verse la imagen, agregamos los atributos "width" (ancho) y "height" (alto) y colocamos su valor en pixeles:
<img src="http://i12.tinypic.com/2ekowh0.jpg" height="150" width="170"/>
Si queres centrar la imagen agregale esto: <center>........</center>
<center><img src="http://i12.tinypic.com/2ekowh0.jpg" height="150" width="170" /></center>
Más adelante seguiremos agregando atributos a las imágenes
Otra herramienta para imagenes !!!!
Muestra:
Para poder usar esta vistosa herramienta debemos ingresar a esta página.
En esta página vamos a Sing up for free!
Aquí tenemos que suscribirnos en un formulario nada complicado.
Automáticamente estamos en condiciones de comenzar a subir hasta 25 fotos.
Una vez que las cargamos pulsamos en Upload Pics Now! y esperamos a que se carguen.
Una vez que se cargaron las fotos vamos a Create a Photo Flick™
Aquí van a tener una cantidad de maneras de presentar las fotos.
Para poder elegir alguna cuentan con vista previa de cada una.
Elegimos una y continuamos...
Después nos pide que seleccionemos un número de fotos de acuerdo a la forma de presentación que elegimos. En este yo elegi el cubo que me deja marcar seis imágenes.
Y listo:
Acá podemos configurar tres medidas distintas y hacer mas transparente las imágenes.
Mas abajo verán que está el código para pegar en la plantilla.
Suscribirse a:
Entradas
(
Atom
)
Podes mirar, copiar, sugerir y/o desechar, todo es gratis, lo único que te pido
no borrés los créditos de las plantillas y me linkees si podes.
Abrazos, buena suerte y más que suerte!