All posts by seba

Como crear una Slideshow con imagenes en movimiento

Album de Fotos, Servicios para Blogs

Esto es aplicable para cualquier Plataforma de Blogs

Get Your Own! | View Slideshow

Crear una SlideShow es realmente sencillo lo primero que debemos de hacer es ir a la pagina http://www.slide.com nos registramos para poder utilizar las herramietas.

Primero subimos una a una las fotos utilizando los botones de examinar y upload (si las fotos estan todas en una sola carpeta de nuestro computador, podemos ir seleccionando de a 20 fotos cada vez que pinchamos sobre upload).
Una vez que hallamos hecho eso , lo siguiente será darle formato a nuestra presentacion utilizando las opciones que para esto nos brinda la pestaña de estilo (prueba todas para que veas cual es la que mas te gusta).
Una vez que la presentacion nos quede a nuestro gusto debemos de hacer clik en el boton de SAVE, esto nos llevara a la ultima parte de la creacion de la presentacion aqui obtendremos el codigo HTML que debemos de copiar y pegar en nuestra entrada.

Patricia Ramirez:Yo elimine una parte y agregué la correcta:
Este post ya lo habia publicado Conely, pero de una manera mas breve (apto para los que sabemos un poco mas…jaja). Asi que en este esta mas detallado.
(En la columna de la izquierda aparece la seleccion para distintos tipos de publicacion, para extraer el codigo HTML correcto debemos pinchar sobre blogger en esa columna)
Esta herramienta permite agregar este tipo de presentacion, en varios formatos(despues de pinchar sobre SAVE, fijarse en la columna de la izquierda) y veras un menu de este estilo, de donde se debe seleccionar blogger:
1.- Para espacion MSN (MySpace)
2.- Blogger
3.- Xanga
3.- Friendster
4.- hi5
6.- TypePad
y muchos mas seleccionando sobre More…
Continue reading Como crear una Slideshow con imagenes en movimiento →

seba

IMAGEN TITULO MINIMA BLACK, Classic-Blogger

Classic Blogger, Otros Accesorios, Personaliza Código, Plataformas, Título

Aporte de Jorge Gomez de Mexico
Hola a todos, esta es mi primera participación en este blog, es acerca de como poner una imagen en el titulo del blog, aunque ya ha habido 2 post anteriores a este refiriéndose a como hacerlo e visto que aun hay muchos a los que no les ha resultado, espero que la información que les dejo les sea de utilidad, trate de modificar en mas mínimo el código original.

1.- lo primero que habrá de hacer es subir la imagen a blog, has como si fueras a subir una imagen cualquiera, agrega una entrada agrega la imagen, solo que deberás de seleccionar la opción Grande, cárgala y checate el código HTML busca la parte donde dice “http://photos…….. .Jpg” esta dirección cópiala y pégala en un documento de texto y déjala pendiente, ahora cámbiate a Plantilla, no publiques la entrada, esto era solo para subir la imagen.

2.-una vez que estés en Plantilla vas a buscar:

< View plain text >
css

  1. /* Header
  2. ----------------------------------------------- */
  3. @media all {
  4. #header {
  5. width:660px;
  6. margin:0 auto 10px;
  7. border:1px solid #333;
  8. }
  9. }

aquí haremos las primeras modificaciones
después de: #header { deberás de escribir Background: url(“aquí vas a poner la dirección que tenias reservada en el documento de texto, la que te dio después de subir la imagen a blog”).
después de la dirección deberás de poner el código no-repeat left top; para que tu imagen no se repita;
Width: el cual te aparece con 660px, yo lo cambie por 990 por que mi imagen abarca casi todo el ancho de la pagina
Margin: se deja como esta
Border: borras los valores y escribe none
de tal manera que te quede así:

< View plain text >
css

  1. @media all {
  2. #header {
  3. background: url("http://photos1.blogger.com/blogger/4423/3254/1600/Iacosworldbueno.jpg")
  4. no-repeat left top;
  5. width:990px;
  6. margin:0 auto 10px;
  7. border:none
  8. }

3.- lo siguiente en la plantilla a modificar :
código original:

< View plain text >
css

  1. #blog-title {
  2. margin:5px 5px 0;
  3. padding:20px 20px .25em;
  4. border:1px solid #222;
  5. border-width:1px 1px 0;
  6. font-size:200%;
  7. line-height:1.2em;
  8. color:#ccc;
  9. text-transform:uppercase;
  10. letter-spacing:.2em;
  11. }

Modificar: Padding:20px 20px 20px 20px; esto es para que nos quede centrada
border:none para eliminar el borde
font-size: 0% para eliminar las letras del titulo de tal manera que quede así:

< View plain text >
css

  1. #blog-title {
  2. margin:5px 5px 0;
  3. padding:20px 20px 20px 20px;
  4. border:none
  5. border-width:1px 1px 0;
  6. font-size:0%;
  7. line-height:1.2em;
  8. color:#ccc;
  9. text-transform:uppercase;
  10. letter-spacing:.2em;
  11. }

4.- la ultima parte a modificar es:

< View plain text >
css

  1. #description {
  2. margin:0 5px 5px;
  3. padding:0 20px 20px;
  4. border:1px solid #222;
  5. border-width:0 1px 1px;
  6. font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  7. text-transform:uppercase;
  8. letter-spacing:.2em;
  9. color:#777;
  10. }

aqui cambiar
Padding: por 0 0 90 (en vez de noventa puede ser más con esto ajustamos el alto de la imagen)
Border: none
font: 0% para que nos quede así

< View plain text >
css

  1. #description {
  2. margin:0 5px 5px;
  3. padding:0 0 90px;
  4. border:none
  5. border-width:0 1px 1px;
  6. font:0% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  7. text-transform:uppercase;
  8. letter-spacing:.2em;
  9. color:#777;
  10. }

y eso seria todo lo que debemos de hacer para cambiar el header del blog original por una imagen , solo me resta decirte que la imagen que subas si la quieres del ancho de la pagina (aprox) deberá de medir 992 * 172 píxeles, checa que el ancho de la imagen esta directamente relacionado con el Width de #header para que con tu imagen hagas los ajustes necesarios.

Espero haberles ayudado ,Suerte.

seba