Anuncios Patrocinados

admin

Como agregar una Imagen en el Titulo, Parte II, TICTAC, Classic Blogger


Para agregar una imagen al título en el Template TICTAC...El procedimiento ES SIMILAR AL DEL Son of Moto, La única diferencia es que la imagen tiene distinto largo, el ancho se ajusta de la misma manera que el otro....
Los únicos cambios realizados en la plantilla son las 3 lineas que tienen un detalle que esta en forma de comentarios con LETRAS MAYUSCULAS (como este: /* ---ANCHO DE LA FOTO--- */).

ANTES:

/* ---( layout structure )---*/

#wrap {
width: 847px;     /* ---ANCHO DE LA FOTO--- */
margin: 0 auto;
text-align: left;
background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;
}

#content {
margin-left: 62px; /* to avoid the BMH */
}

#main-content {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0;
line-height: 1.5em;
}

#sidebar {
margin: 0 41px 0 547px;
padding: 20px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
}

/* ---( header and site name )--- */

#blog-header {
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Trebuchet MS";
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat top left; /* ---URL FOTO DEL TITULO--- */
}

#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px; /* ---ALTURA FOTO--- */
font-size: 200%;
color: #fff;
text-shadow: #81A75B 2px 2px 2px;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
}

DESPUES:

/* ---( layout structure )---*/
#wrap {
  width: 847px;
  margin: 0 auto;
  text-align: left;
  background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;
  }

#content {
  margin-left: 62px; /* to avoid the BMH */
  }

#main-content {
  float: left;
  width: 460px;
  margin: 20px 0 0 0;
  padding: 0;
  line-height: 1.5em;
  }

#sidebar {
  margin: 0 41px 0 547px;
  padding: 20px 0 0 0;
  font-size: 85%;
  line-height: 1.4em;
  color: #999;
  background: url(http://www.blogblog.com/sidebar_bg.gif) no-repeat 0 0;
  }

/* ---( header and site name )--- */

#blog-header {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", "Trebuchet MS";
  background: url(http://photos1.blogger.com/MinitokyoAnimeWallpapersBleach.jpg) repeat-x;
  background-size: 100%;
  background-position: right;
  }

#blog-header h1 {
  margin: 0;
  padding: 45px 60px 200px 160px;
  font-size: 200%;
  color: #fff;
  text-shadow: #81A75B 2px 2px 2px;
  background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
  }

Este es el Resultado:

Para sacar la barra verde bajo la foto solo deben borrar esto: background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;

Esta frase está en #blog-header h1.
Con este parámetro ajustan el ancho: width: 847px; por ejemplo cambiarlo por width: 600px; si la foto es más angosta..
Con este otro: padding: 45px 60px 50px 160px; el alto, si quieren poner fotos más altas solo cambian lo anterior por algo así padding: 45px 60px 200px 160px; como pueden ver sólo uno de los números es el que se cambia..SUERTE!!!!
Paciencia los que tengan otros Templates..

30/08/2006
Al parecer cambiar el alto como lo habia explicado antes, solo se puede hacer si tu imagen es de 847px, de otra forma se desconfigura todo., ya que habria que cambiar otras cosas para agregar una imagen mas angosta. O tambien, pueden hacer el mismo truco que ocupan ellos, que es agregar espacios en blanco al lado de la imagen.
Nota :
El ancho de la imagen original ( http://www.blogblog.com/tictac/top_div.gif ) es de 847 y el alto es de 240, hay unas lineas arriba de la imagen...que son parte de la imagen...(las orillas son blancas, por eso no se ve como si fueran parte de la imagen, pero lo son), anoten la direccion anterior en su navegador descargan la imagen y la editan en paint para ver que atributos tiene, ahi se daran cuenta del ancho y alto, y de las lineas que les digo.
La imagen original, que tiene esta plantilla es difusa:


y al parecer, lo que se ve en la plantilla realmente, es la mitad de la altura que tiene, o sea, 120. (En realidad ellos suben una imagen mas grande de lo que se alcanza a ver, no se cual sera la idea, CONFUNDIRNOS QUIZAS!!!!...jajaja).

Aqui les voy a dejar un ejemplo, que les va a servir a los que van a ocupar el mismo tamaño de la imagen original de la plantilla.
Trabajare con esta imagen:
Esta imagen es de 1024 por 819

Lo primero que hice fue reducirla a 847 por 240 (se ve fea, pero lo que importa es el tamaño)


Solo me basta copiar la url de esta imagen (847 por 240) en lugar de la original, nada mas.
Esto es lo que se ve como resultado:

Como ven, no se alcanza a ver completa la imagen. Por eso la siguiente la disminui a la mitad del alto, que es lo que al parecer se alcanza a ver.
Aqui esta la plantilla para descargar..
TICTAC 840x240

Ahora si, la imagen anterior la reduje nuevamente hasta 847 por 120(se ve mas fea...jajaja)

Esto es lo que se ve:


Ahora si se alcanza a ver la imagen que subi..
Aqui esta la plantilla para descargar..
TICTAC 847X120

La eliminacion de la barra verde ya la explique arriba..
Eso es todo por ahora..cualquier otro cambio lo hire realizando en el mismo post, por eso es bueno que se suscriban al blog, asi saben cuando se hicieron modificaciones, no se si todas las formas de suscripcion, muestran los post cuando se modifican, pero al menos me consta de bloglines y de otro que manda avisos al mail, reviso y de ahi les anoto cual..

1 views Envia este Articulo Envia este Articulo Imprime este Articulo Imprime este Articulo
1 Punto2 Puntos3 Puntos4 Puntos5 Puntos6 Puntos7 Puntos8 Puntos9 Puntos10 Puntos (No Ratings Yet)
Loading ... Loading ...

Post al Azar

68 Responses

Page 1 of 2
  1. Anonymous
    Anonymous
    3 October 2005 at 2:17 |

    Querida Patricia,
    Gracias por tu Blog me ha sido muy util. Quisiera saber si me puedes ayudar a agregar una imagen al Template Style: Minima Black, ejemplo: http://jhmelton.blogspot.com/
    Te lo agradeceria, Saludos. Eduardo desde Florida.

  2. Anonymous
    Anonymous
    3 October 2005 at 2:18 |

    Una imagen al titulo como lo has hecho en los templates anteriores. Gracias, Eduardo.

  3. Patricia Ramírez
    Patricia Ramírez
    3 October 2005 at 2:38 |

    Eduardo
    Paciencia de a poco iré agregando el código para cada template…
    Nos vemos..

  4. Wontolla
    Wontolla
    3 October 2005 at 22:14 |

    Agregada a la “breve guía…”

    salu2!

  5. Patricia Ramírez
    Patricia Ramírez
    3 October 2005 at 22:54 |

    Gracias..

  6. Danilo
    Danilo
    4 October 2005 at 0:35 |

    Gracias por tus comentarios. Yo antes había visitado tu blog, justamente buscando alguna ayuda y nuevamente te agradesco por tu dedicación en postear datos y cositas que siempre sirven para dejar más estructurado un blog.
    Antes de despedirme una consulta:
    Cómo hago para evitar los spam?

  7. Patricia Ramírez
    Patricia Ramírez
    4 October 2005 at 1:42 |

    anda a
    OPCIONES
    COMENTARIOS
    MOSTRAR VERIFICACION DE LA PALABRA PARA COMENTARIOS….

    QUE ES LA SEGUNDA OPCION DE ABAJO HACIA ARRIBA…ESA DEBE DECIR SI…

  8. Danilo
    Danilo
    4 October 2005 at 15:57 |

    Oki , gracias

  9. Patricia Ramírez
    Patricia Ramírez
    4 October 2005 at 16:21 |

    De nada…

  10. Silvana Rodriguez
    Silvana Rodriguez
    5 October 2005 at 19:08 |

    Hola, tenfgo una pregunta, en la plantilla aperecen hartas veces:: sidebar, y quoisera saber que es eso

  11. Patricia Ramírez
    Patricia Ramírez
    5 October 2005 at 22:36 |

    Se refiere a las columnas que aparecen en los lados…De hecho hasta se les puede ajustar el ancho por ejemplo…

  12. la mosca cojonera
    la mosca cojonera
    6 October 2005 at 16:19 |

    hice algunas cosas de las que publicais para enseñarnos, gracias por compartir vuestros conocimientos. te hice un link espero no te moleste

  13. Raven's rock and beer
    Raven's rock and beer
    7 October 2005 at 1:29 |

    Cuando tengas tiempo, ayudame con mi blog, también quiero agregarle una foto al título.

    Un cordial saludo,

  14. Raven's rock and beer
    Raven's rock and beer
    7 October 2005 at 1:30 |

    Perdón, olvidé mencionar que template tengo,

    Rounders 3

  15. Patricia Ramírez
    Patricia Ramírez
    7 October 2005 at 1:33 |

    ok..te aviso…

  16. La Hechicera
    La Hechicera
    11 October 2005 at 23:25 |

    Hola Patricia la verdad que me parece muy buena la ayuda que has brindado a todos los novatos como yo, bueno he aprendido muchisimo de tu blogger y si quieres revisa el mio si te gusta algunas de las cosas que he agregado preguntame y con gusto te digo como conseguirlas….

  17. Patricia Ramírez
    Patricia Ramírez
    12 October 2005 at 0:48 |

    Muchas gracias zorelys apenas tenga tiempo te cobraré la palabra…jajaja
    Nos vemos..

  18. paola caro
    paola caro
    12 October 2005 at 2:36 |

    estoy más perdida que el teniente…
    QUIERO AGREGAR COSAS A MI BLOG Y NO TENGO IDEA.
    TE DOY GRACIAS POR OFRECER AYUDA,
    PERO NECESITO PERAS Y MANZANAS!!!
    PUEDES DECIRME COMO TRAIGO ARTÍCULOS QUE ME INTERESAN DE INTERNET A MI BLOG.
    GRACIAS
    PAOLA CARO
    http://www.ojocreativo.blogspot.com/

  19. Yo
    Yo
    14 October 2005 at 19:20 |

    hola patricia:
    primera vez q visito tu pag.
    te keria hacer una consultita.
    lo q pasa es q tengo ganas de tener como fondo una foto…como lo en esta pagina http://iglesiamezquita.blogspot.com

    ojala me puedas ayudar.
    saludos
    Nachito

  20. Buck
    Buck
    14 October 2005 at 21:09 |

    Hola Patricia.

    Espero que te encuentres bien, te dejo este mensaje debido a la gran labor que estas haciendo sobre hacer mejoras al Blog, sobre todo al titulo, ahora espero con impaciencia a que llegues al Minima Black, que es el que tengo yo…..jaja

    Te queria preguntar si puedo poner un enlace de mi Blog al tuyo, para que la gente que andaba tan perdida como yo pueda hacer los cambios que desea… bueno eso, gracias y que te vaya bien.

  21. Don Cheré
    Don Cheré
    15 October 2005 at 15:32 |

    Hola,
    Te invito a meterte a mi página y votar por los “Premios Cero Aporte 2005″, una forma de elegir a la creme de la creme de nuestro querido chilito. PUEDES VOTAR HASTA UNA VEZ AL DIA.

    Saludos.-

    El Chere
    http://elchere.blogspot.com

  22. - kta -
    - kta -
    16 October 2005 at 19:08 |

    patricia, eres el mesias que esperabamos los bloggers inexpertos y preguntones…
    nos haces las cosas mas faciles, sino creeme que seria imposible…
    toy demasiado impaciente esperando a que toque el turno de mi template snapshot: madder, no es que te presiones, pero muero por ponerle titulo a mi blog….gracias por todo y suerte!

  23. Donkan/Mauro
    Donkan/Mauro
    18 October 2005 at 14:55 |

    Hola, Gracias x tu post..la verdad no sabia a que blog escribirte veo dedicas tiempoa esta cultura. El codigo castpost lo entrega cada vez que ingresar un mp3, o tambien puedes ir linkeando a tu blog cada cancion individualmente (como hice yo con los temas que tenia en castspot). Me tome la libertad de linkear tu blog si alguien quiere aprender mas, salu2

  24. stban
    stban
    21 October 2005 at 1:09 |

    hola patricia,
    me han servido mucho tus consejos, yo soy nuevo en esto, y realizo dos blog, uno que es pa mi trabajo, en donde conoci el blogspot, y el otro que es para mi. el del trabajo te cuento que me salio super lindo (eso dicen los comenbtarios) ya quie segui todos tus consejos, pero el mio su plantilla es 897, y le quiero agregar una imagen en la barra de titulo, como lo puedo hacer.
    desde ya muchas gracias. esteban

  25. Omar Reyes Osuna
    Omar Reyes Osuna
    24 October 2005 at 20:18 |

    Hola Paty, solo pasé a saludarte ya que hace rato que no posteo.
    Salu2

  26. Klaus
    Klaus
    27 October 2005 at 4:03 |

    Gracias por los datos. los pondré en práctica.
    Saludos.
    -Linkeada

  27. Edgar
    Edgar
    14 November 2005 at 15:29 |

    Patricia,
    Muy buen blog, justo lo que necesitaba para hacer cambios en el mío, suerte en todo lo que haces, felicidades. Ah muy buen libro el Hobbit ;)

  28. Gemy
    Gemy
    17 November 2005 at 18:44 |

    HOLA PATRICIA
    Felicidades por tu blog , eres una gran ayuda para muchos .
    Mira estuve leyendo las instrucciones para poner 1 foto arriba en mi blog .
    Pero la pregunta es :
    ¿sirve cualquier foto?
    ¿hay alguna dimension optima?
    ¿de donde es bueno sacarla ?
    Mira que ” parece chino ” y el taller del martes fuè muy cortito para las que sabemos poco .
    Cariñosssss.

  29. Gabriela
    Gabriela
    22 January 2006 at 0:32 |

    Quería darte las gracias por la ayuda que prestas con tu blog. Ayer quería cambiar aunque sea en algo el mio, y del cielo (más bien de la red) llegué a tu página.

    Muchas gracias de nuevo.

    Saludos.

  30. a
    a
    9 February 2006 at 17:17 |

    que bueno encontrar un blog como el tuyo con tanta ayuda…Cuando tengas tiempo, por favor, indica como hacer cambios en el estilo de plantilla “minima”…No puedo quitar el rectangulo del titulo.

    felicitaciones x tu blog, es de gran ayuda

    A

  31. F
    F
    10 March 2006 at 0:25 |

    Hola: soy nuevo en esto de bloggear y ando algo perdido en esto de poner una imagen en el título y una imagen o mosaico de la misma imagen como fondo del blog. Traté de seguir tus instrucciones, pero quizá el problema radique en mi templete. Se trata del templete denominado Harbor y los códigos que ahí se encuentran no son muy parecidos que digamos a los que yo he visto que presentas en esta página. Ojalá puedas ayudarme. De paso, te invito e invito a quien lea este mensaje a conocer mi blog: http://www.periplosenred.blogspot.com Gracias.

  32. A
    A
    12 March 2006 at 3:27 |

    Hola Patricia, gracias por la ayuda..pero al colocar la imagen me sobran los margenes :( es decir me entra bien la imagen en el cuadro de la página pwro me quedna unos 4 cm de lado izq de la pantalla…cómo hago para que quede bien?

    Gracias!

  33. Gab
    Gab
    12 March 2006 at 15:23 |

    Hola Patricia, interesantísimo tu blog, entré por el blog de Caro.
    Sabes? tengo un template de 3 columnas
    y puse la imagen arriba, pero en el título del blog tuve que escribir una frase, en estos blogs de 3 columnas es así como tengo que hacerlo?
    Seguí informándonos que lo haces muy bien.
    Muchas gracias desde ya

    Besos :)

  34. S.S.E
    S.S.E
    29 March 2006 at 9:06 |

    Hola!!
    quiero modificar la cabecera y poner una imagen pero mi plantilla es diferente a los casos anteriores y cuando coloco la imagen me cambia la alineación de todos los textos de mi blog (perfil, enlaces, noticias,…), todo lo pone centrado.
    A ver si me puedes ayudar, muchas gracias.

    mi blog es:
    http://www.airesrenovados.blogspot.com

  35. Vista al Sur
    Vista al Sur
    6 April 2006 at 19:30 |

    Hola!!
    quiero modificar la cabecera y poner una imagen pero mi plantilla es diferente a los casos anteriores y cuando coloco la imagen me cambia la alineación de todos los textos de mi blog (perfil, enlaces, noticias,…), todo lo pone centrado.
    A ver si me puedes ayudar, muchas gracias.

    mi blog es:
    http://www.airesrenovados.blogspot.com

  36. Jolie Femme
    Jolie Femme
    10 April 2006 at 23:16 |

    Si Paty! Tu Blogg esta buenisimo! Y ya c q tanto q te molestamos.. Pero PLIZZZ!! Ayudanos a poner una pic en el titulo de MINIMA BLACK! Ya somos varios no!?
    Te lo agradeceria muchisimo!! Bye! (K)

  37. 3 hielos flotando
    3 hielos flotando
    14 April 2006 at 5:19 |

    Hola Patricia, q tal?.

    Gracias por tus tips, puse una imagen en el titulo de mi blog (tic tac), la cual queda perfecta de ancho y alto, pero corrida hacia la izquierda unos centimetros. he provado valores diferentes de margen en todas las posibilidades en layout structure y en header and site name y no pasa nada.

    ¿Q toy haciendo mal?

    Vale, Pelao Hayvard.

  38. Black Wanderer
    Black Wanderer
    21 April 2006 at 21:17 |

    Hola, he seguido tanto los consejos tuyos como de la amiga del blog de los blogs para agregar una imagen como header, el cual ya tengo listo, pero no consigo agregarla a mi blog, he probado a cambiar código,insertar la imagen que tengo alojada en otro blog en blogger, en fin, pero no consigo que aparezca. Haste le he echado una mirada a su código fuente para ver si se me iluminaba la ampolleta, y nada. Mi template es minima black. Te agradecería si me indicas, dentro de tu limitado tiempo, algunos truquitos para insertar el header. Te agradezco de antemano, y excelente el blog.

  39. Lord Damned
    Lord Damned
    13 May 2006 at 13:03 |

    hola me gustaria ponerle una imagen a mi blog pero tengo la plantilla negra y aun no has publicado esa pero bueno esperare…

  40. zocalo azul
    zocalo azul
    19 May 2006 at 19:12 |

    Hola Patricia, a ver si puedes ayudarme. He puesto una foto en el título del blog, pero quería poner el nombre del blog sobre esta foto, y no sé cómo hacerlo. He cambiado la foto con el pain y le he escrito el nombre. Después la he subido al blog pero las letras no aparecen. No sé cómo se llama la plantilla, pero la url, si quieres verla, es zocaloazul.blogspot.com
    Te digo mi correo por si puedes ayudarme, te lo agradecería mucho:
    mariajovalle_8@hotmail.com
    Lo que quiero escribir sobre la foto es “EL ZOCALO AZUL”

  41. Nicky
    Nicky
    4 June 2006 at 5:20 |

    Hola! Puedes ayudarme y decirme como cambiar el titulo de mi blog para ponerle una imagen si tengo la plantilla Rounders 3.

    Agradecere mucho tu ayuda…

    Mi email es: yosoynickyto@hotmail.com

  42. La Marquise
    La Marquise
    12 June 2006 at 16:07 |

    YA ENCONTRE LA MANERA DE PONER UN BANNER CON FOTO EN EL MODELO MINIMA BLUE (que es igual a minima black)…

    veran que es casi perfecto:
    http://leboudoirdelamarquise.blogspot.com/

    Pero ya es cuestion del diseno de la pagina de cada quien.

    Espero que alguien lea este post; los interesados pueden escribir a mi mail ;)

    Gracias por esta plataforma de intercambio!!!

  43. GUSSANITA
    GUSSANITA
    30 June 2006 at 15:42 |

    ¿y cómo se hace en el modelo jellyfish?

  44. Team ATR
    Team ATR
    2 July 2006 at 18:06 |

    ya lo publicaré..

  45. Iacobus
    Iacobus
    12 July 2006 at 20:59 |

    hola, les dejo el codigo que me funciono a mi con la plantilla minima blak, espero que les sirva.

    @media all {
    #header {
    background: url(“http://photos1.blogger.com/blogger/4423/3254/1600/cooltext%20en%2090.jpg”)
    no-repeat left top;
    width:9600px;
    margin:0 auto 10px;
    border:none
    }
    }
    @media handheld {
    #header {
    width:90%;
    }
    }
    #blog-title {
    margin:5px 5px 0;
    padding:20px 20px 0.3em;
    border:none
    border-width:1px 1px 0;
    font-size:200%;
    line-height:1.2em;
    color:#ccc;
    text-transform:uppercase;
    letter-spacing:.2em;
    }
    #blog-title a {
    color:#ccc;
    text-decoration:none;
    }
    #blog-title a:hover {
    color:#ad9;
    }
    #description {
    margin:0 5px 5px;
    padding:0 0 90px;
    border:none
    border-width:0 1px 1px;
    font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#777;
    }
    la pueden ver funcionando en http://www.iacosworld.blogspot.com

  46. Zombs
    Zombs
    21 July 2006 at 23:34 |

    Muchisimas gracias por la ayuda

    podriais explicar como se pone una imagen en el header para la plantilla scribe ? gracias anticipadas

  47. Patricia Ramírez
    Patricia Ramírez
    22 July 2006 at 0:59 |

    A penas pueda agregare los post que estan quedando pendientes(incompletos).
    Por ahora estoy organizando un indice para ordenar un poco todo el blog…

  48. david
    david
    24 September 2006 at 1:31 |

    PATRICIA

    ALLUDAME PLISSS
    NO SE COMO PONER EL DOBUJO
    ALLUDAME PORFAVOR

    GRACIAS

  49. Patricia Ramírez
    Patricia Ramírez
    24 September 2006 at 3:00 |

    tienes que conectarte en el chat…
    y ver si alguien de los que esta (incluyendome), te puede ayudar..
    suerte!!

  50. david
    david
    24 September 2006 at 4:50 |

    PATRICIA ABLAME POR EL MSN PORFAVOR mu-life.1.19@hotmail.com
    ESE ES MI MSN

    LO ANTES POSIBLE PORFAVOR

    GRACIAS…………

Leave a Reply


*