Mostrando entradas con la etiqueta blog. Mostrar todas las entradas
Mostrando entradas con la etiqueta blog. Mostrar todas las entradas

martes, 31 de mayo de 2011

Insertar albums en tu blog o página web con picasa de google

El trabajo con imágenes es fundamental en la Web, y tenemos que evitar su inclusión en nuestros blogs de forma masiva y desordenada. Para ello disponemos de tecnologías como los pases de diapositivas o diaporamas, los vídeos de fotos y las presentaciones, que nos permiten mostrar muchas imágenes en un espacio reducido de nuestro blog. En próximos artículos comentaremos estas opciones.



Cuando insertamos imágenes en nuestro blog de Blogger, se guardan automáticamente en un álbum de Picasa que tiene como nombre el título de nuestro blog. Pero también podemos crear álbumes en Picasa para guardar nuestras fotos e insertarlas en el blog en forma de diapositivas. La forma de crear un álbum es muy sencilla: pulsamos el botón Subir, que se encuentra en la barra de herramientas superior, para subir o cargar una imagen:

Ahi se pueden ver las imagenes que fui subiendo al blog o puedo elegir crear un albúm nuevo.

Y enseguida aparece una ventana donde podemos subir la imagen a un álbum existente o podemos crear uno nuevo pulsando el enlace correspondiente. Si hacemos esto último, aparece otra ventana con un formulario donde escribimos el título y una descripción del álbum, que es público para que se pueda mostrar, aunque se puede limitar su ámbito para compartirlo:



Ahora podemos elegir entre que las fotos sean publicas, que las vean unos cuantos o sean privadas, como por ahora no tengo que esconder las haré públicas.
Luego nos sale un boton para subir las fotos y elegimos las que querramos en este caso eligiré unas fotos de gatos xD





Le das click en abrir y automáticamente se subirán, dependerá de tu conexión y de la cantidad de fotos que quieras subir




Tienes dos opciones, podés seguir subiendo muchas más imagenes (te da un espacio de 1 gb) o puedes darle aceptar y crear el album, haré el segundo, parecerá que no se guardo nada pero le damos click a mis fotos y el album ya debería estar creado:



La damos click y podremos verlo ahora nos vamos a la parte derecha de la pantalla y le damos click a enlazar este album:




  1. La primera es simplemente la dirección URL del documento donde se encuentra el álbum, de forma que podemos enlazarlo en el blog para que nuestros lectores vean el álbum en su lugar de origen.
  2. La segunda es el código de una tabla HTML que incluye una de las imágenes del álbum. Si la insertamos en el blog pegando el código en la parte de Edición de HTML del editor, la veremos en la entrada del blog enlazada al álbum de Picassa:

Asi es como queda con sólo copiar el segundo código.

También podemos insertar una sola imagen, y en este caso hacemos clic en la imagen para verla individualmente. A su derecha están las opciones de Enlace a esta foto: una dirección URL y el código para incrustar imagen en el blog. Con este código, la imagen quedaría de esta forma:


Pero si lo que queremos es insertar en la entrada del blog todas las imágenes del álbum en forma de diapositivas, entonces hay que pulsar en la frase Incrustar proyección de diapositivas.


 Elegimos incrustar proyección de diapositivas

Y se abrirá otra ventana en la que nos ofrecen un código para insertar o incrustar la proyección en nuestro blog, que se ve en la siguiente imagen destacado en rojo:


Ese código lo podemos cambiar según las opciones que tiene encima de él. Aconsejamos desactivar la opción Reproducir automáticamente para que sea el lector quien decida cuándo empezar a ver la reproducción. Además, hay que tener cuidado para que la anchura del reproductor no desborde la anchura que tenemos en el diseño de nuestro blog.

El código lo seleccionamos haciendo clic encima de él; y pulsando el botón derecho del ratón, elegimos la opción de Copiar. Así el código queda copiado en la memoria del ordenador, y luego lo pegamos en la parte de Edición de HTML del editor.



En realidad, no veremos la proyección en el editor del blog hasta que no pulsemos el botón de Vista previa que hay en la parte inferior. Con este código HTML incluimos en la entrada del blog el reproductor que muestra las diapositivas, tal y como lo vemos aquí a un tamaño de 600 px:


Me quedó un poquito grande pero vale la pena por los dibujos xD


Si hacemos clic en uno de los dos iconos de la parte inferior del reproductor, iremos a la página de Picasa donde se encuentra el álbum, y allí lo podremos ver a pantalla completa. Pero en nuestro blog lo podremos ver como una reproducción de diapositivas. Si pulsamos el botón de reproducción, las imágenes pasarán automáticamente, pero también podremos pasarlas pulsando las flechas.

Bueno espero que les hubiera sido de ayuda cualquier comentario sólo escriban.

lunes, 23 de mayo de 2011

Menú estilo dock para tu blog, menu con imagenes que se agrandan al pasarlas con el mouse

Los menús estilo dock son característicos de las computadoras Mac y que son altamente llamativos para el usuario por la forma en que aumentan de tamaño los íconos al pasar el mouse sobre ellos.
¿No sabes de qué hablo? Mira el menú que está abajo de la cabecera de mi blog:
Tiene el dibujo de twiter pero lleva a taringa :D


Para colocar este menú estilo Dock en tu blog realizamos los siguientes pasos, entra en Diseño > Edición de HTML y después de <head> pega esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>


Ahora pega antes de ]]></b:skin> lo siguiente:


/* Menu Dock
----------------------------------------------- */
.dock {
position: fixed;
width: 100%;
bottom: 40px;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.dockItem img {
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
position: absolute;
}


Por último busca la etiqueta </body> y antes de ella pega esto:


<div id="dock" class="dock">
<div class="dockContainter">

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eZ3wrqBAq0atnHR6I3kajkjx-tOZJFtSROVQaYkL44x2BL71_HJi7t97WhOWgsvy0z2hXt_Wg2GAhFwgq-4TzeY6gwHeq73vy8yxiwCxw4vYi1FE15X9MtRdW1ijLvN02-0w985UjSk/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNIfLEszLI-Ua7VwCUx2l3CEJe2VVWem0F9IAD8hNenQI80IQJPXSfdZQZk43OhEbE4h71NEXVfgDuNFQFjjGhIym-Wrm7vtO94kRccRnraltXW3wlRjIxB1x7m15l2lmKvRS2yJkVE0g/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfb8YpqvMKqpLhtQqXyD2GfVXqkJaLzJX_fxX_LBy85v7GHF1LaND2pD5jsxBpXAxUwpiolFDEurXKJyLQTVZxuEujtDWKwFKvEEPhwkH-FTQhHEb4BQ19rjYBJDUDGzQQyP5vxDO9H88/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNEdcvM790dloObtwmBEIQaIAFzqvJUR2XZhMzAblao5Lu8he0eDIxBu04AO05gW1C8F2Th7WrCzEfoWSh9SowVXDCsPjuRDStxzyJ8OqojsK8YWx6OqShtMXD7mwZq6F8HEOE7AROLo/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeXkarUCz2hfk6W71qmXkfNxyVzUfRTgpNDKUrdHiRyr4Uf6-XtBOkIRSOKMVSeTfF-5tiB49suMxYlUZS9bC1Q19GyzaZM2yShfhVWZfKpoyUffX_Qclg6fSYtbsMrw9zRO5kW0Yc-wY/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6rrQc-xMvzZFK1C093skwdxAJ_kUqvzs52AVlHxaAHAxUaz_Laj4OzBcoudhy9QX3jWUa4P-Ep3cqvOeHphrlTEiwLPR1wHRNp2oY2uEEs-a8tuwARig34qTHgSBubo_xjgaUBrWrzA/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKxcR6zM9m1GKgMHFyVNPJ7vKo_WDiriC93djWKob009tqMxPZgiuQWuiprNOOJ80ygaQ0pDfJeCClF5MXOMU765bJSfGrQvf4v0W-SQj1K4OJBAvmubV5yvbRbvZeBweLW_fVyfOUhU/s1600/Icon_Help.png"/><span>Título del enlace</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>




Cambia las URL (URL del enlace) y los títulos de los enlaces donde se indica y estarás listo para disfrutar de este menú estilo Dock en la parte de abajo de tu blog.


Si quieren añadir uno más solo copien y peguen esto una vez mas:

<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfb8YpqvMKqpLhtQqXyD2GfVXqkJaLzJX_fxX_LBy85v7GHF1LaND2pD5jsxBpXAxUwpiolFDEurXKJyLQTVZxuEujtDWKwFKvEEPhwkH-FTQhHEb4BQ19rjYBJDUDGzQQyP5vxDO9H88/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>


Pueden revisar el código y hacer los cambios que ustedes quieren como este que hice:


(No salió muy bonito que digamos xD)
Cualquier duda que tengan no duden en hacerla en los comentarios o en el chat.


IMPORTANTE: Este menú no funciona en blogs con dominio propio.

domingo, 22 de mayo de 2011

Mover la cabecera de tu blog, eliminar o sustituir la cabecera

En un principio puede parecer lo más tonto del mundo quedarnos sin cabecera, sobre todo teniendo en cuenta el trabajo que seguro nos costó diseñarla. Lo que ocurre es que no es exactamente eso lo que vamos a hacer. Más bien vamos a eliminar el artilugio de cabecera de Blogger para poder poner otra cabecera más flexible que se pueda adaptar a nuestro diseño.

(En mi caso no hubo esfuerzo xD pero seguramente algunos si se rajaron)



La cabecera que viene de serie en las plantillas habituales, sólo nos da la opción de colocar una imagen debajo del texto que corresponde a nuestro título y descripción , o sustituir todo por una imagen que será lo único visible. Como en una imagen creada por nosotros podemos poner también texto, quizás sea esta última la opción con más posibilidades estéticas.

La cabecera de serie en las plantillas habituales, viene como un WIDGET y por eso es tan poco manejable. Además, es un elemento en el que a priori no tenemos la opción "eliminar" por lo que parece que no es fácil de quitar. Sin embargo, si buscamos en nuestra plantilla -sin expandir artilugios- encontraremos el código correspondiente...


Como pueden ver no puedo agregar nada más a la cabecera, algo que "limita" nuestro blog

(Tienen que buscar este parte del código para hacer los cambios, un truquito como el título de mi blog dice en venganza del blog caido escribi venganza en el buscador de palabras de mozilla y me muestra la parte que deseo cambiar)
MAXWIDGETS indica la cantidad de artilugios máximos que admite esa sección. Como suele venir con 1, pues no nos admite añadir más. Pero es que también, el SHOWADDELEMENT que sirve para que salga el "AÑADIR UN GADGET" en una sección, está también por defecto puesto en NO, por lo que no nos aparece esa opción. Personalmente prefiero quitar estos dos atributos siempre que los veo. Así podremos añadir más cosas sin mayores problemas, sea la sección que sea.


El mio quedó asi, lo dejo marcado, le puse máximo 5 espacios, puedo añadir mas gadgets y si quiero puedo mover o borrar la cabecera para poner algo mejor.


Ahora puedo añadir otro gadget o mover la cabecera.


O si quiero puedo eliminar la cabecera, eso dependerá de ustedes si tienen algún diseño mejorado para añadirlo a su blog como un mapa de imagenes que explicaré en otra ocasión.

Inicio Sigueme Taringa Facebook Picasa Mail Como obtener este menú