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:
#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:
#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..
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.
Una imagen al titulo como lo has hecho en los templates anteriores. Gracias, Eduardo.
Eduardo
Paciencia de a poco iré agregando el código para cada template…
Nos vemos..
Agregada a la “breve guía…”
salu2!
Gracias..
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?
anda a
OPCIONES
COMENTARIOS
MOSTRAR VERIFICACION DE LA PALABRA PARA COMENTARIOS….
QUE ES LA SEGUNDA OPCION DE ABAJO HACIA ARRIBA…ESA DEBE DECIR SI…
Oki , gracias
De nada…
Hola, tenfgo una pregunta, en la plantilla aperecen hartas veces:: sidebar, y quoisera saber que es eso
Se refiere a las columnas que aparecen en los lados…De hecho hasta se les puede ajustar el ancho por ejemplo…
hice algunas cosas de las que publicais para enseñarnos, gracias por compartir vuestros conocimientos. te hice un link espero no te moleste
Cuando tengas tiempo, ayudame con mi blog, también quiero agregarle una foto al título.
Un cordial saludo,
Perdón, olvidé mencionar que template tengo,
Rounders 3
ok..te aviso…
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….
Muchas gracias zorelys apenas tenga tiempo te cobraré la palabra…jajaja
Nos vemos..
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/
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
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.
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
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!
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
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
Hola Paty, solo pasé a saludarte ya que hace rato que no posteo.
Salu2
Gracias por los datos. los pondré en práctica.
Saludos.
-Linkeada
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
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.
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.
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
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.
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!
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
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
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
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)
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.
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.
hola me gustaria ponerle una imagen a mi blog pero tengo la plantilla negra y aun no has publicado esa pero bueno esperare…
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”
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
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!!!
¿y cómo se hace en el modelo jellyfish?
ya lo publicaré..
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
Muchisimas gracias por la ayuda
podriais explicar como se pone una imagen en el header para la plantilla scribe ? gracias anticipadas
A penas pueda agregare los post que estan quedando pendientes(incompletos).
Por ahora estoy organizando un indice para ordenar un poco todo el blog…
PATRICIA
ALLUDAME PLISSS
NO SE COMO PONER EL DOBUJO
ALLUDAME PORFAVOR
GRACIAS
tienes que conectarte en el chat…
y ver si alguien de los que esta (incluyendome), te puede ayudar..
suerte!!
PATRICIA ABLAME POR EL MSN PORFAVOR mu-life.1.19@hotmail.com
ESE ES MI MSN
LO ANTES POSIBLE PORFAVOR
GRACIAS…………
sorry..no tengo tiempo para ayudar a alguien por msn…si no estoy conectada en el chat…significa que estoy ocupada…
Ademas relax…nadie se va a morir por demorarse un tiempo mas en poner una foto en su titulo…
No seamos tan dramaticos…
Nos gusta ayudar, pero tambien hacemos otras cosas…
cuidate y paciencia…que es el unico precio que deben pagar por obtener esta ayuda gratis…me parece justo y razonable….
Debo darte las gracias, me entretube mucho buscando la manera, según tus indicaciones. Y me resulto.
Toy feliz adornando mi Blog.
Shinazky.
hola soy nuevo en esto y estoy tratando de agregar una fotop ami titulo o imagen pero no se como por q mi plantilla no es igual al restoi si me puedes ayudar te lo agradeceria …
hola, soy lex y te agradezco por tu ayuda, estamos creando un blog con un grupo de estudiantes de un liceo y lo estams transformando de a poquito… gracias a tu ayuda, hemos avanzado bastante, si quieres dale un vistazo y luego nos comentas: http://wwwrevistaeltomasin.blogspot.com
hola, estoy trabajando en subir una imagen para el TICTAC pero no sale, sigue saliendo la puñetera imagen verde… y encima q no se puede poner, me he dado cuenta q queda muy feo el tema de q salga las dos barras de verde en la página.
Me podeis decir como se pone?? o me lio a patadas con el pc…xD
hola soy nuevo en esto y no puedo agregar la imagen como titulo mi plantilla es tic-tac y ojala que me puedan ayudar a mi imagen es esta: http://www.subirimagenes.com/subir_fotos/14c18ca95c.jpg
es mi plantilla:
#outer-wrapper {
width: 847px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;
}
#content-wrapper {
margin-left: 42px; /* to avoid the border image */
width: 763px;
}
#main {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0 0 0 1em;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
float: right;
width: 259px;
padding: 20px 0px 0 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* —( header and site name )— */
#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}
#header {
margin: 0;
padding: 25px 60px 35px 160px;
color: $pagetitlecolor;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
}
#header h1 {
font-size: 200%;
text-shadow: #81A75B 2px 2px 2px;
}
#header h1 a {
text-decoration: none;
color: $pagetitlecolor;
}
#header h1 a:hover {
color: #eee;
}
porfavor necesito ayuda
aaaaa no entendi
hola paty nec ayuda descarge el template tictac peroblogger me dice q esta mal editado me podrias ayudar
mi blog es
http://ghostblacktitle.blogspot.com/
la verdad me artan las plantillas de blogger si pudieras ayudarme t agradeceria mill
He tenido la suerte de entrar en este bello Blog y me gustaria decirte que no se como puedes tener tantos conocimientos.
Yo me vuelvo loco para hacer que mi blog sea bonito.
Me gustaria saber tu opinión y tambien me gustaria saber si me puedes decir como puedo poner una foto en la zona verde donde esta el título en la parte superior.
No se si tu cabeza hecha humo con tantos conocimientos.
Mi blog es :http://balmasedatxoko.blogspot.com/
Y mi correo es: josemi957@hotmail.com
Un saludo
Josemi
Necesito ayudaaaaaaaaaaaa!!!
por favor si alguien me puede ayudar..
la imagen se ve arriba pero se ve solo una parte, osea se ve super angosto y tambien no cubre toda la zona de arriba…
por favor si alguien puede ayudarme
Msn: magnus_guitar@hotmail
gmal: magnus15.esteban@gmail.com
llegue tarde!! yo tengo el TICTAC y sufri mucho para lograr poner la imagen…pero finalmente lo hice…. muy buena la informacionq das…
yo hice todo sin cambiar un solo numero…tube q hacerlo y rehacerlo varias veces..
te invito a q chekees como kedo
http://freedomroots.blogspot.com/
chauu
Patricia,
Muy buena la explicación, sólo que algo hago mal puesto que la imagen siempre queda más pequeña que el espacio del título, he ajustado la imagen a las dimensiones que aparecen en mi template, e incluso probado con diferentes formatos y no hay caso… alguna idea de que pueda ser?
Hola, quisiera saber si se puede agregar una imagen al template rounders de blogger.
Y ademas, quiero contarte que intente poner un template sobre este y me marca error y he seguido todo al pie de la letra.
Desde ya muchas gracias por tu respuesta a la brevedad.
Q lio!!
es realmente complicado
Hola Patricia, entiendo perfectamente los cambios q debo hacer para cambiar y agregar una foto en la plantilla TICTAC, ahora como hago para sacar lo q tengo escrito en el header porq por mas q ponga la foto eso queda.
Te agradesco me puedas ayudar.
Mi blog es http://pablocasuriaga.blogspot.com
Gracias
Hola Patricia, entiendo perfectamente los cambios q debo hacer para cambiar y agregar una foto en la plantilla TICTAC, ahora como hago para sacar lo q tengo escrito en el header porq por mas q ponga la foto eso queda.
Te agradesco me puedas ayudar.
Mi blog es http://pablocasuriaga.blogspot.com
Gracias
Y no es posible hacer que la foto no sobresalga por los lados? O sea, que no sobrepase más que las columnas de texto, ya que cuando la hago mas estrecha, se me queda alineada a la izquierda
Gracias
me parese una pagina muy original y facil de entende gracias por la ayuda, despues de esta imagen visintenme para tener aun mas trafico,,ha m nombre no alude a un medio de transporte si algo mejor la ¡¡¡¡¡¡libertad!!!!!!!!.