Galería de imágenes en el blog

Otra forma de incluir una galería de imagenes en el blog.
Para empezar utilizaremos un script que lo pegaremos en un gadget. Para poder visualizar las imagenes necesitamos un sitio donde alojarlas, yo les sugiero que utilicenImageshack oTinypic para poder obtener su URL (dirección) y así insertarla en la galería.

Paso para insertar la galeria de imagenes en el blog:

  • Diseño>añadir gadget (elemento de página)>html-javascript
  • Pegar el script
<script type="text/javascript">

var velocidadgaleria=1

var anchogaleria="600px"

var altogaleria="140px"

fondogaleria="#ffffff"

var espacioslide=5
var espacioimagen=""
var imagengaleria=new Array()
var fotofinal=''

imagengaleria[0]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[1]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[2]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[3]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[4]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

iimagengaleria[5]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

var copyspeed=velocidadgaleria
imagengaleria='<nobr>'+imagengaleria.join(espacioimagen)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+imagengaleria+'</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=imagengaleria
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+espacioslide+"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(imagengaleria)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+espacioslide
ns_slide2.document.write(imagengaleria)
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+espacioslide+"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+espacioslide+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+espacioslide

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+espacioslide
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+anchogaleria+';height:'+altogaleria+';overflow:hidden">')
write('<div style="position:absolute;width:'+anchogaleria+';height:'+altogaleria+';background-color:'+fondogaleria+'" onmouseover="copyspeed=0" onmouseout="copyspeed=velocidadgaleria">')
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="+anchogaleria+" height="+altogaleria+" name="ns_slidemenu" bgcolor="+fondogaleria+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=velocidadgaleria" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=velocidadgaleria" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Para editar la galería:

var velocidadgaleria=1 es la velocidad a la que se moverán las imágenes. Según incrementes la cifra (en este caso está en 1) el movimiento será más rápido.

var anchogaleria="600px" es el ancho que tendrá el recuadro de la galería. Cambia el valor (600) por el que mejor se adapte a tu blog.

var altogaleria="140px" es la altura. En este caso será de 140 píxeles pero puedes cambiarla al valor que desees.

fondogaleria="#ffffff" es el color del fondo que aparecerá detrás de cada imagen. En este caso es blanco (#ffffff) pero puedes cambiarlo a tu color favorito con la ayuda de la tabla de colores.


Una vez hayas configurado todo, procederemos a insertar las imágenes.

Para ello, sustituye en cada caso URL DE LA IMAGEN por la dirección de tu fotografía.

Tienes un total de 6 espacios para incluir imágenes. Si deseas poner una mayor cantidad en la galería, agrega esta línea tantas veces como desees:

imagengaleria[X]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

Debes ponerla debajo de la última imagen, es decir, la número 5. Es muy importante que cambies el número que hay al lado de imagengaleria (en este caso está representado con una X).

Si lo deseas puedes añadirle un enlace a cada imagen. Para ello sustituye en cada caso URL DE LA PAGINA por la dirección de tu blog o web.

Para terminar, guarda el gadget.

Fuente: elbalcondejaime
--> Leer Más...

Mas de 1000 fondos para tu web o blog (patterns)

Los patterns o patrones son imágenes muy útiles para crear el fondo de un diseño web y blog en general para cualquier tipo de diseños. Si andas buscando el fondo indicado para tu pagina web o blog aquí les dejo una lista de sitios que recopilan y crean, - fondos - backgrounds - patterns - para tu pagina web, excelentes recursos para cuando te toque diseñar tu sitio, los fondos son de gran calidad y muy artísticos, y los mejor completamente gratis y para descargar.

Uno de los mejores que recomiendo es Ava 7 Patterns tiene actualmente más de 1000 fondos o patterns para usar libremente en tu web o blog, no requiere un link de regreso, pero bien lo a merita. Hay una gran variedad de estilos, formas y colores, pero lo más interesante es la navegación, pues podemos encontrar pattern de acuerdo a su color, de acuerdo a la distribución de la forma patrón, los más descargados, los más comentados y los mejor valorados.
Otra detalle más clásico, pero simpre igual de útil, es tener una vista previa de cada patrón en la misma web antes de descargarlo. Como extra, el diseño es bastante agradable y usable. Sin duda un sitio para acudir siempre que se necesita de un patterns o mas conocido background).

Aqui una lista de otros sitios que tambien brindan fondos para paginas web o blog:

Si desea ponerse en contacto con nosotros, no dude en enviar su mensaje a: info@grupoblogperu.com

--> Leer Más...

Video: Twitter cobrará por algunos servicios

OXFORD, REINO UNIDO.- La red social Twitter comenzará a cobrar por algunos de sus servicios, según lo anunció Biz Stone, cofundador del sitio de 'microblogging'.

En una entrevista con la cadena BBC se informó que la novedad vendrá con cuentas de pago para las empresas a partir del próximo año.

--> Leer Más...

Temas Navideños para tu Pc - Windows Xp y Vista


Ahora que estamos a puerta de la Navidad aqui les dejo unos temas Navideños para que lo descarguen, son gratis.Ya es hora que comiences adornar tu escritorio Navideño
Aqui les dejo una lista de los mejores temas de Navidad con Fondos de pantalla para Windows XP y Vista.


THEMES XP

THEMES VISTA
--> Leer Más...

Botón "enviar entradas a Twitter"

Tweetmeme es una especie de agregador de noticias de Twitter.

Este servicio rastrea y optiene la información de los tweets que comparten los usuarios de Twitter entre si (RT), en su web podemos ver una portada principal donde ap

arecen los tweets más destacados.En Blogger podemos añadir un botón que permita a nuestros usuarios enviar la información a Tweetmeme de las entradas de nuestro blog, cuantos más usuarios envien la entrada, más posibilidad tendrá esta de posicionarse en Tweetmeme.

Vamos a ver como colocar el botón al lado derecho del título de nuestras entradas.

[1] Desde "Edición HTML" en nuestro panel y marcando la opción de "Expandir las plantillas de artilugios" localizamos el código que está en negrita y añadimos el que he resaltado en color rojo:

<b:if cond='data:post.title'>
<div id="tweetmeme" style="float: right;">
<script type="text/javascript">
tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>
<h3 class='post-title entry-title'>
[2] Usamos vista previa y tendremos que ver nuestro botón a la derecha del título de la entrada:

[3] Guardamos cambios.

Si en lugar de ese botón, queremos usar el otro modelo disponible de botón (más pequeño), el código (que colocaríamos en el mismo lugar) sería este:
<div id="tweetmeme" style="float: right;">
<script type="text/javascript">
tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Podemos colocarlo también al final de las entradas, justo antes del comienzo de los comentarios, de esta manera solo será visible cuando entramos a una entrada completa.

Para hacer esto tendríamos que incluir el código así:
<b:includable id='comments' var='post'>
<script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<div class='comments' id='comments'>
Fuente: elescaparatederosa
--> Leer Más...

Botón "enviar entradas a FaceBook"

Hace unos días que a través de la última entrada de Blogger Widgets, me enteraba de que Facebook presentaba de forma oficial un botón que posibilita el envío de entradas.


El botón está disponible en cuatro modelos, todos ellos con un contador que mostrará la cantidad de veces que la entrada ha sido compartida en FaceBook.


¿Como colocar el botón en el blog?


[1] Antes que nada hemos de escoger que botón vamos a mostrar y copiar su código.


[2] Iremos a la parte de Edición HTML de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios".


[3] Localizamos esta línea:
<div class='post-header-line-1'/>


y justo después, copiamos el código del botón elegido.


Si esa línea no estuviese disponible en nuestra plantilla, localizamos entonces esta:
<data:post.body/>


y justo antes, copiamos el código del botón elegido.




Códigos para los distintos modelos de botones


[1] Botón grande situado a la derecha del contenido de la entrada:


Enviar a Facebook
Código:
<div style="float:right;padding:4px;">


<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>


<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>


</div>


Para usar este mismo botón pero que se muestre a la izquierda del contenido de la entrada, cambiamos en el código anterior float:right por float:left


[2] Botón pequeño situado a la derecha del contenido de la entrada:


Twett Facebook
Código:
<div style="float:right;padding:4px;">


<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>


<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>


</div>


Para usar este mismo botón pero que se muestre a la izquierda del contenido de la entrada, cambiamos en el código anterior float:right por float:left


Fuente: elescaparatederosa
--> Leer Más...

Personalizar Link en tu blog




Talvez no te gusta que tus links tengan un subrayado, o por el contrario quieres que lo tengan, o si los quieres de otro color entonces te daré los atributos para personalizar tus links.



Primero hay que localizar dónde pondremos estos atributos; vamos a Diseño > Edición de HTML y sin expandir artilugios buscamos la propiedad a:link { abajo de él está a:visited { y luego a:hover {

a:link representa el modo como se ven todos los links de la página antes de hacer click en ellos
a:visited representa la apariencia de los links después de haber dado click en ellos
a:hover es el efecto que da al pasar el mouse sobre un link

Abajo de estas propiedades encontraremos sus atributos color (el que le da el color) y text-decoration (el efecto del link)

Lo único que hay que hacer es cambiar estos atributos, en color podemos poner el color que sea, por ejemplo #00000 si queremos que sea completamente negro.
En el caso de text-decoration estos son los efectos que podemos usar:




underline: muestra el subrayado



none: quita el subrayado



blink: link parpadeante (no funciona para Internet Explorer ni Google Chrome)





También podemos agregar más atributos (los siguientes se ven mejor dentro de a:hover)

font-weight:bold; hará que el link se convierta en negrita
font-style:italic; hará que el link se convierta en cursiva
font-size:16px; cambiará el tamaño del texto del link
background:#fe6700; cambiará el fondo a color naranja (el color lo pueden cambiar)
background-image:url(http://dl.getdropbox.com/u/647003/stars.gif); mostrará unas estrellitas en el link




Finalmente así podría quedar:





a:link {
color:#787878;
text-decoration:none;
}
a:visited {
color:#585858;
text-decoration:blink;
}
a:hover {
color:#fe6700;
text-decoration:none;
font-weight:bold;
font-style:italic;
background-image:url(http://dl.getdropbox.com/u/647003/stars.gif);
}

Pueden usar los atributos que crean necesarios y personalizarlos a su gusto.



Fuente: ciudadblogger
--> Leer Más...

Enlaces con líneas en movimiento


Ya sabemos que podemos personalizar los vínculos dándole atributos de color, decoración, fondo, etc. Así que partiendo de la misma idea podemos ponerle a los enlaces líneas animadas que aparezcan cuando pasa el cursor encima de ellos.



Para que sepas de qué hablo pasa el cursor sobre los siguientes enlaces y mira el efecto:


Para darle este efecto a tus vínculos entra a Diseño > Edición de HTML y busca esta línea:

a:hover {


Abajo de ella pega cualquiera de estos códigos:



text-decoration:none;


background:url(http://img233.imageshack.us/img233/5403/linearrow.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

text-decoration:none;


background:url(http://img694.imageshack.us/img694/2616/linearrow2.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

text-decoration:none;


background:url(http://img35.imageshack.us/img35/8056/linearrow3.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

text-decoration:none;


background:url(http://img35.imageshack.us/img35/1221/linepoints.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 5px;

text-decoration:none;


background:url(http://img233.imageshack.us/img233/1752/lineyellow.gif);


background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;



Si sientes que la línea animada está muy encima del texto puedes modificar padding-bottom: 3px; por otro número, por ejemplo 5px


Así de simple puedes darle a tus enlaces un estilo diferente al pasar el mouse.


Fuente: Ciudadblogger

--> Leer Más...

Google Dashboard: Gestiona todo "tu" Google desde un solo lugar


Google lanza un panel de control para que los usuaros gestionen su información en servicios como Gmail, etc.






Google ha vuelto a dar más poder de control de sus propios contenidos a los usuarios gracias al nuevo Panel de Control de Google. Se trata de una ventana desde la cual podemos gestionar la información vinculada a nuestra cuenta personal de Google.

En el Panel de Control vamos a poder gestionar y ver en un solo lugar, un resumen de la información que Google recaba de los productos que utilizamos, pudiendo cambiar su configuración, añadir nuevos elementos o eliminar los que ya tenemos.

Un ejemplo de ello, es Gmail, pues se trata de un servidor que guarda nuestros correos electrónicos, y que ahora podremos gestionar junto a otros servicios, desde la misma interfaz.

El Panel de Control de Google centraliza toda esta información en un formato muy sencillo de usar, ofreciendo un mejor control de la información:

''Creemos que éste es un gran paso hacia adelante y esperamos que contribuya a cambiar la percepción de la industria en cuanto a transparencia y control de la información , indica Alma Whitten, Ingeniera de privacidad y seguridad en la Red. Es importante para los usuarios ser conscientes de que información suya está en la Red y cómo poder manejarla; el Panel de control de Google tiene el objetivo de permitir que esto sea posible''.

Para poder acceder al Panel de Control de Google, puedes hacerlo escribiendo en la barra de navegación: www.google.com/dashboard o simplemente abriendo la página de configuración de tu cuenta de Google.



--> Leer Más...

Twitter ahora en Español

Luego de que el sitio anunciara que estaría disponible en inglés, alemán, portugués y castellano, la red de microblogging finalmente elegió este último idioma como el primero de los cuatro que acompañará al inglés y al japonés.

La nueva funcionalidad está lista para todos los usuarios de Twitter que deseen usarla y no por invitación, como sucedía desde hace algunos días. El idioma puede elegirse desde la home page o configurarse desde el panel de configuración del usuario. También se puede acceder directamente a http://es.twitter.com

La novedad la comunicó el mismimísimo Biz Stone, fundador de Twitter, quien firmó en el blog oficial del sitio un post en español agradeciendo a los voluntarios que colaboraron con la traducción.

Stone también citó a algunos hispanoparlantes célebres que twittean, como el basquetbolista argentino Manu Ginobili, el astronauta estadounidense descendiente de mexicanos José Hernández y el cantante colombiano Juan Fonseca.

Lo curioso es que el español es el primero de los cuatro idiomas anunciados anteriormente. ¿Será por la gran cantidad de clones hispanoparlantes que aparecieron o una estrategia para seducir al tercer idioma más usado en Internet? Y la otra pregunta es: si following es “seguidos” y followers es “seguidores”, ¿cómo se traduce tweet al español?

Fuente: RedUsers
--> Leer Más...

GIF, JPG y PNG: ¿qué formato prefieres?

Muchos conocemos las características de cada formato y por qué debemos elegir algunos para la alta resolución, otros por su peso y hasta por la compatibilidad de navegadores, les comparto algunas factores para comprender las diferencias de los formatos de imagen y que me comenten sobre qué formato prefieren utilizar y por qué.

GIF y sus 256 colores:
Son las siglas para Graphics Interchange Format. Este formato puede contener hasta 256 colores. Por esta razón, GIF no es un buen formato para guardar fotografías que puedan tener más que esa cantidad de colores, puesto que perderían gravemente su calidad.

Es útil para guardar imágenes que tengan grandes bloques de colores planos como ilustraciones simples o logotipos para alguna compañía. Además, permite preservar la transparencia. El formato GIF usa un algoritmo de compresión LZW. Esta es una de las razones por las que el uso del formato PNG se está volviendo más popular, puesto que este algoritmo estaba patentado y los fabricantes de software que utilizaban imágenes GIF debían pagar regalías a Unisys, la propietaria de los derechos.

Características del formato JPEG:
Son las siglas para Joint Photographic Experts Group, un format utilizado para compartir fotografías y otras imágenes con tonos continuos en la web. Este formato da soporte a los modelos de color CMYK (cyan-magenta-yellow-cyan) y RGB (red-green-blue), además de modelos en escala de grises, lo que amplía por mucho la gama de tonalidades que podemos obtener.

El formato JPEG comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que para representar cierta cantidad de información (en este caso de color), se utiliza una menor cantidad de la misma. En la mayoría de programas para edición de imágenes es posible especificar qué tanta compresión y pérdida de calidad quieres para tu archivo. Lo más probable es que si utilizas la opción de máxima compresión, la imagen resultante sea difícil de reconocer, pero se puede utilizar una configuración que reduzca el tamaño de archivo pero que produzca una imagen relativamente buena.

Transparencias usando PNG:
Son las siglas para Portable Network Graphics, que intenta reunir características de los anteriores formatos. Su desarrollo se basó en GIF, para evitar la pérdida de información al comprimir los archivos y es un formato con creciente popularidad para desarrolladores web.

Sin embargo, a diferencia de GIF, PNG soporta imágenes de 24 bits y permite preservar la transparencia sin asperezas en los bordes. El problema es que algunos navegadores de internet antiguos no permiten visualizar este formato.PNG soporta imágenes RGB, con colores indexados, en escalas de grises y en modo de mapa de bits.

Entonces, ¿cuál formato es para mí?
Para terminar, podemos concluir lo siguiente sobre el uso de imágenes para la web. Lo que buscamos es un punto medio entre calidad y tamaño de archivo:
  • JPEG: nos sirve para manipular y compartir archivos de imagen de tipo fotográfico.
  • GIF o PNG8: serán muy útiles para manipular imágenes con bloques de colores planos.
  • PNG24: nos servirá para imágenes con efectos como brillos y sombras, que también requieran transparencia.
Sobre el uso de formatos existe un interesante debate entre diseñadores y desarrolladores web, algunos prefieren utilizar el formato PNG el cual no tiene restricciones de patentes, está recomendado por el W3C y permite transparencia. Sin embargo, hay quienes aún prefieren el JPG por su popularidad y características.
¿Qué formato prefieres utilizar?

Fuente: maestrosdelweb
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika