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:
[css]
/* —( 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;
}
[/css]
DESPUES:
[css]
/* —( 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;
}
[/css]
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 840×240
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..
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!!!!!!!!.