39

Cartelitos de Navidad

Otra cosilla más para adornar el blog en estas fechas navideñas.

[1] Emplearemos unas líneas de CSS, que colocaremos en nuestra plantilla antes de ]]></b:skin>:

.etiqueta {
width: 150px;
background:#00CCFF url(http://img249.imageshack.us/img249/7826/xmastre3vs8.gif)center left no-repeat;
border: 2px solid #000;
padding: 5px 5px 5px 35px;
text-align: center;
color: #fff;
font-weight:bold;
}


[2] Una vez guardados los cambios, tendremos que usar este código donde vamos a mostrar nuestro cartelito.

<div class="etiqueta">Aquí es donde se verá
el mensaje dentro de la caja de texto</div>


Desde El Escaparate os deseo a todos una Feliz Navidad y mejor Año Nuevo
Rosa


[3]Si nos fijamos un poco en el código del CSS, podremos modificar nuestra etiqueta como más nos guste, incluso para usarla fuera de la época navideña:

width: Ancho de la etiqueta (la altura no hace falta indicarla, ya que la dará el propio contenido de la etiqueta)
background: El color de fondo de la etiqueta (#00CCFF) y la imagen (url) que en este ejemplo está centrada a la izquierda (center left) y no se repetirá sobre el fondo (no-repeat).
border: Grosor del borde(2px), tipo (solid) y color (#000).
padding Distancia del contenido a los margenes de la etiqueta, 5px en todos, menos en la parte izquierda, donde hemos de colocar la anchura de la imagen que usamos, para que el texto no se superponga a esta (35px, en este ejemplo)
text-align: El texto aparece centrado.
color: Color del texto.
font-weight: Texto en negrita.

[4] Aquí os dejo otro modelo, con la imagen a la derecha, fijaros que si vamos a usar más de un cartelito a la vez en el blog, hemos de cambiar su nombre en el CSS y en el código donde vamos a mostrarlo:
.etiqueta1 {
width: 150px;
background:#fff url(http://img249.imageshack.us/img249/4044/gif6603wt1.gif)center right no-repeat;
border: 1px solid #000;
padding: 15px 50px 15px 15px;
text-align: center;
color: #000;
font-weight:bold;
}


<div class="etiqueta1">Aquí es donde se verá
el mensaje dentro de la caja de texto</div>


Desde El Escaparate os deseo a todos una Feliz Navidad y mejor Año Nuevo
Rosa


Entradas Relacionadas:

39 comentarios:


Anónimo

Hola Rosa. espero que estes bien. Yosiempre me pase por tu blog para ver que dato interesante tienes y me puede servir en mi blog. De a poquito he ido agregando cosas. Quería pedirte un gran favor, hace tiempo quiero buscar un template para mi blog, he buscado todas las páginas posibles por ver y haber y no me gustan o no he podido instalarlas sin que se me borre el orden o los widget del blog. Por eso, patudamente , me aceco a ti, porque se que lees mi blog, que me dieras tu opinion que templates le es favorable a mi blog y si tienes alguna sugerencia especifica te lo agradeceria un montón y lo tomaría como tu regalo de navidad para mi blog, jijiji (que fresca)

por favor, cuando tengas un tiempito.

Saludos desde Viña del Mar, Chile.

Joan
Este comentario ha sido eliminado por el autor.
Joan

perdón, mi mensaje se ha editado erroneamente. Tengo problemas con mi blog de Asterix, ya que el diseño ha cambiado. Para saber como era antes, que es como quisiera que esté, busca en google "blog asterix galo", y la 1ª página, le das a la caché. El título sale grande y correcto, y aquí puedes ver el diseño actual, la imagen del blog me sale reducida y se me han borrado las columnas laterales, me sale la tabla de diseño antigua de blogger, lo que me impide poner columnas laterales. Sólo me salen las opciones "Código html", "Escoger plantillas" y "Adsense". ¿Cómo podría corregir este problema? Gracias por tu atención, y espero una rápida respuesta.

Anónimo

Carolina,páginas con plantillas hay muchas, simplemente has de escoger la que más te agrade.
Ten en cuenta que lo que dices de los widget va a pasarte siempre que cambies la plantilla. De momento no hay solución para eso, más que guardar una copia del código de cada elemento en un archivo (el blog de notas,por ejemplo)

Anónimo

Joan, están pasando cosas así en Blogger estos días, de hecho he notado cambios en los códigos de las plantillas. En mi otro blog se perdió por completo el formato de la cabecera y hube que cargar la plantilla de nuevo...
El error es interno, si la parte de editar está como dices desconfigurada, ahí no puedo hacer nada...¿has probado volviendo a cargar la plantilla?

Felicituri

Rosa, gracias por tus ideas. Tengo que poner algo como esto. Hay que alegrar el blog por navidad :-)

La Blogueria

Rosa, que bonita la etiqueta; todo lo que se pueda hacer con un simple CSS me resulta más bonito todavía. Gracias.

¿Qué pasa con Blogger? Me ha llevado 20 min. poder dejar este comentario, y también hay elementos que desaparecen de mi blog (y en este caso no lo achaco al ancho de banda, que también llevan una temporada en Googlepages que para qué hablar...)

Yo soy de las que ama a Google por encima de todas las cosas PERO... por momentos me entran ganas de cambiar de religión, tengo miedo que que este dios se vuelva descuidado o castigador...

En fin muchos besos y mucha suerte con Blogger en estos dias de crisis.

Anónimo

La Blogueria, si anda loco, me "despatarró" por completo mi otro blog y hube de meterme a fondo en el código para hacerle un apaño, porque de momento, imposible de solucionar.
Me están llegando consultas de headers desconfigurados, elementos desaparecidos, en fin, de todo...

Si que he visto que están añadiendo código nuevo en las plantillas, hay dos variables nuevas y algunos cambios en los CSS.
Haz la prueba, crea un blog nuevo con una plantilla Mínima (en esa lo noté yo)...creo que están empezando a trabajar con el html5 del que tanto se está hablando...

Anónimo

Rubén, si quieres algo concreto y no te sale...ya sabes.

Anónimo

Este comentario ha sido eliminado por el autor.

Anónimo

Querida Rosa, si bien hace meses que leo tu blog y sólo te dejé un breve mensaje por los fondos de plantilla... creo que sos la mejor ayuda desde que hace dos o más yo me he lanzado a esto de los blog sola. (Antes lo hice en grupo).

Si bien me suscribí a tu blog tardiamente, te cuento que luego de mi fallida mudanza a wordpress (inocente yo con el tema) vuelvo a blogger con las orejillas para atrás.

Como todavía estoy por reabrir blogs... y blogger y su "nueva versión" me han hartado... te seguiré leyendo, aunque me haya pasado a las plantillas clásicas!!!!!!!!!!!

: ) Todo esto para desearte muchas felicidades. Y para que sepas que aunque no te haya comentado te he leido con atención , te he leido respondiendo... lo que no sucede en muchos blogs de "ayuda".

Y simplemente darte las gracias.

(Veré si encuentro algo para las plantillas viejitas :) ahora .

Buen año!

Anónimo

Vuelvo... antes de sacar las plantillas de todos mis blogs, Rosa, quiero hacerte una pregunta.
Por qué si reumo la cantidad de entradas en la página ppal, la navegación de pié de página no funciona?
He probado y probado y lo que descubrí es (porque hay blogs donde no le he utilizado), que el código del "seguir leyendo" provoca que si vas a a entradas antiguas... las opciones para comentar en el HaloScan desaparecen.

Pregunté en varios blogs de ayuda, inclusive en lo de Andrés... de donde saqué el código, (que ya lo coloco con los ojos cerrados...)pero ni él ni otros me dieron respuesta.

Te dejo abierto en el perfil un blog peque que acababa de abrir para que le veas el código fuente.

O te envío una copia de la plantilla por mail, vos me dirás.

Yo ya no sé qué más tocar... y no puedo resolverlo :(

Un saludo desde Buenos Aires

Unknown

Estimada amiga,
Aunque te leo desde hace bastante tiempo, hasta ahora no había tenido necesidad de escribirte. Y aprovecho, en primer lugar, para felicitarte las fiestas. Y para felicitarte por tu estupendo blog, naturalmente.
Mi consulta supongo que te le han hecho en más de una ocasión, pero no la he encontrado en tus entradas anteriores: ¿cómo cambiar una plantilla de blogger por otra (que no está entre las predefinidas, claro), concretamente una nueva (la "Classic Theme" de FinalSense) sin perder las entradas anteriores?
Por otro lado, si accedes a mi blog verás (quizá no te des cuenta a simple vista pero es así) que la cabecera me ha "encogido" en sentido vertical. Yo la cambié y la puse más ancha, pero no más alta. El caso es que ahora me aparece (y no sé por qué, porque yo no he hecho ningún cambio) con la cabeza del dibujo cortada (?), cuando antes no era así. ¿Qué ha ocurrido?
Recibe un cordial saludo y las gracias por anticipado.

Anónimo

M,muchas gracias por tus palabras,comentarios como el tuyo son los que me animan a continuar con el blog. :-)

Si colocas todas las entradas del blog en la página principal,no existirán entonces las "entradas antiguas" ya que se supone que esas son las de páginas anteriores.Por tanto, si no hay entradas, no hay más página que la principal y es por eso que los vínculos de navegación no se ven, ya que no hay más páginas en el blog.

Pues siento decirte que yo tampoco puedo ayudarte en eso, ya que nunca he usado los comentarios en Haloscan, de hecho, no tengo ni idea de como funcionan.
Podrías preguntar en Epilogo (el link está en mi sidebar en los"blogs de ayuda) Allí están usando Haloscan y creo que el leer más, quizás te ayuden.

Anónimo

Manuel, cuando cambias la plantilla, sea de Blogger o no, a no ser que suceda algo raro (cosa no muy probable) las entradas anteriores no se pierden. Lo que si se pierde (aunque a veces no todos) son los elementos añadidos.
Por supuesto, antes de hacer cualquier cambio, deberás guardar una copia de tu plantilla, así, si algo sale mal, podrás recuperarla de nuevo en su estado anterior.

Lo que te ha pasado con la cabecera, le ha pasado a muchas personas entre las que me incluyo (en mi otro blog) y estoy segura que es cosa de Blogger. Estoy, de momento, estudiando los cambios que han hecho, hay cosas nuevas en sus plantillas que afectan sobre todo al header.
El problema es que no debería haber afectado a blog que ya están funcionando, pero lo han hecho con algunos. De momento, te recomiendo esperar, yo he hecho un "apaño" en el blog porque los daños eran demasiado notorios, pero mejor esperar para hacerlos cambios adecuados.
No creo sea demasiado problema conseguirlo en cuanto Blogger vuelva a "estabilizarse"

Unknown

Hola Rosa...

Una preguntita: ¿Se puede cambiar el tamaño de la imagen del perfil?

Si es así.... ¿podrías decirme como?

Muchas gracias!!

Un beso

Anónimo

Carlos, si se puede. En las plantillas de Blogger hay una sección para "manejar" el perfil. En la tuya, al ser una adaptación, se les olvidó o simplemente decidieron no incluirlo, de esa manera el perfil sale con las características que Blogger coloca por defecto.

Mira, añade esto en la parte del CSS, donde mejor te parezca o antes de ]]></b:skin>

/* Profile
----------------------------------------------- */
.profile-img {
width:80px;
height:80px;
}

width (ancho)
height (alto)

Cambia las medidas a tu gusto.

Anónimo

ei rosa emm..


tengo dos dudas espero no sea molestia...



esque quiero saber como pongo una imagen de fondo en mi blog...




y otra es como pongo icionos de caritas COMO ESTE :)




bueno gracias ^^



adiioz

Anónimo

Gracias Rosa, ya me fijo en el link. (Aunque creo ya me vuelvo definitivamente a las plantillas clásicas......y no las de blogger sino las diseñadas para blogger).

No tanto en mi blog personal de poesía, pero en los dos que llevé durante dos años de arte, no podía dejarle más que 5 ó 6 entradas en la página ppal o el blog no se cargaba nunca dado los videos y películas y la cantidad de texto aunque estuviese resumido.

De modo que la navegación de pie de página me era súper necesaria!
(Pero no funcionó a partir de algún momento que a todos nos llegó un aviso de cambio de código dentro de la plantilla... y etc, etc...)

Que ya no te aburro, que he abierto uno solito con plantilla nueva (pero clásica y tal navegación no existe) jeje, para probarla.

Gracias por responder.
Que estés bien.

Mar

Anónimo

Hola rosa mi nombre es francisco javier, me encanta tu blog y además me está ayudando mucho, yo termine hace poco la carrera de informatica y siempre he tenido que hacer páginas web, y esto del blog es un reto para mi, pues nunca había hecho ninguno, ahora si tengo el mio propio, yo aparte de informatico soy escritor, y decidi hacerme el mio propio de poesia, creo que es mucho mas comodo que una web, y poco a poco le voy añadiendo cositas nuevas, lo único que la cabecera donde está la imagen principal por mas que intento centrarla no me la centra, y he cogido todo el codigo fuente lo he llevado al dreamweaver, he copiado he pegado, y lo he guardado como otro documento html distinto, lo he abierto y me sale centrado, pero aqui estoy mas liado que la pata un romano, esto tiene mas tarea, y lo he dejado por imposible, y he leido que disminuyendo la imagen de tamaño se puede centrar, pero ni modo, tampoco me resulta, asi que te dejo la dirección de mi blog y tu lo miras y me dices como puedo arreglar lo de la cabecera, la imagen principal donde sale un angelito y al lado un recuadro con letras. mi dirección es http://palabrasolvidadas-misteriosas.blogspot.com/
Espero me puedas ayudar, un saludo, Francisco.

Anónimo

andy, las dos cosas las encuentras en el menú de arriba. Fisga un poquito por aquí, que está lo que buscas seguro.

Anónimo

Mar, en la plantilla clásica de Blogger, la posibilidad de navegación no existe, lo mismo pasa con las etiquetas...mejor la nueva versión, sin duda.

Anónimo

Angeldeacero, no sabes hasta que punto es un lío esto...depende de la plantilla que se esté usando unas cosas funcionan y otras no...y si a Blogger se le ocurre "hacer cositas rraras" ya ni te cuento...
Es más, yo la mayoría de las cosas las consigo por pura suerte o intuición (y no es broma).

Bien, a lo nuestro, je,je.
Sitúate en esta parte del css de tu plantilla:
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Donde ves padding: 0 15px 8px;
Cambia el 15px a 5px

A mi me resulta ok, se queda centradita.

Por cierto, un blog precioso el tuyo, en serio.

Anónimo

Andy, me he tomado un tiempito para buscar por ti...mira en estas entradas:

http://elescaparatederosa.blogspot.com/2007/01/imagen-en-el-fondo-de-pgina-blogger.html

http://elescaparatederosa.blogspot.com/2007/05/emoticonos-en-tu-blog.html

http://elescaparatederosa.blogspot.com/2007/06/smiles-aadiendo-una-sola-lnea.html

Francisco Javier

Gracias rosa, esto algunas veces se le va la olla y te hace unas cosas mas extrañas, menos mal que tengo la plantilla guardada, y eso que ahora estaba mirando en tu pagina algunas cositas asi de navidad y al ponerselas le da un toque muy lindo.
Como el de la nieve cayendo, y bueno acabo de cambiar la plantilla por una de navidad, y le voy a hacer unos retoques guardare la plantilla, y volvere con la anterior para hacer eso que me has dicho y luego te cuento, y bueno me alegro te haya gustado el blog, cuando quieras y si te gusta la poesia ya sabes donde puedes acudir, y gracias por responder, saludos.

Francisco Javier

Gracias rosa, al final si me sirvio lo conseguí despues de varios dias intentandolo, pero ahora que lo logre, estoy cambiando el blog por completo ya que me entere mas o menos como funciona esto, es que es totalmente distinto a una web, pero es mucho más comodo, porque ya te viene la interfaz grafica, aunque tienes el codigo html tambien, pero bueno no me enrollo mas, luego si quieres entras y lo ves, http://palabrasolvidadas-misteriosas.blogspot.com/

Bueno muchas gracias por tu ayuda, seguire visitando tu blog pues me ha sido y me es de mucha utilizadad, saludos.

STARMAN

Hola Rosa, tu web es fabulosa y ya he tomado nota de algunos trucos, gracias,

Queria pedirte ayuda con un problema que tengo.

Verás no soy novato en esto de informática, sé de HTML, CSS, he hecho mis cosillas en javascriot, flash y tal pero soy un recien llegado a blogger o blogspot que es lo mismo.
Estoy mudando mi web desde wordpress a mi nueva cuenta en blogger donde tengo menos limitaciones, pues estoy copiando el html de todas mis paginas de gtamods.wordpress.com a mi nuevo sitio mods-gta.blogspot.com y resulta que todas las tablas aparecen con un espacio vacio inmenso antes de cada tabla de tal manera que el visitante piensa que ya se acabó la pagina a menos que haga scroll equivalente a 2 pantallas hacia abajo para poder ver la tabla, me pregunto si hay alguna solucion para esto o si es un fallo del interprete html del servidor de blogger, y si es asi como me pongo en contacto con ellos para informar del fallo.

He pasado un dia entero haciendo experimentos comprobando el html de mis paginas por si habia algun error, he cambiado montones de etiquetas a ver si con align y valign podia eliminar ese absurdo espacio vacio que sale antes de todas las tablas pero no hay manera. he buscado informacion en las paginas de ayuda y tutoriales de blogger.com pero no hay nada relativo al codigo html de las paginas o articulos solo hablan de plantillas u otros temas, he usado la funcion de busqueda con la palabra tables o table sin ningun resultado es como si no existieran ni hubiesen existido nunca en blogger.com

Alguien ha intentado alguna vez poner una tabla dento de alguna pagina o post en algun blog?

os sale bien o aparece siempre un espacio vacio justo encima?

me pasa solo a mi, o a todo el mundo?

A alguien se le ocurre una solucion o una alternativa?

yo acabo de pensar en sustituir la tabla por una imagen osea una captura de pantalla de la tabla tal como se veia en mi otro blog pero si alguien me puede dar una solucion mejor se lo agradeceré muchisimo

A lo mejor hay algun codigo CSS en la plantillas que afecte a las tablas y por eso sale ese espacio vacio siempre (he probado todas las plantillas de blogger y en todas pasa el mismo problema)

Tu que sabes tanto de plantillas del blogger a lo mejor sabes si hay algo que se pueda modificar para solucionar el problema.
yo he mirado mi plantilla pero no he sido capaz de localizar el origen del problema, a lo mejor no he mirado bien, el caso es que no he visto nada de table ni de td ni de tr, a lo mejor vosotros que teneis mucha experiencia con blogs podeis teneis una solucion o a lo mejor no la hay, si fuerais tan amables de echarme una mano...

por cierto, Feliz Navidad a todas y todos.

Anónimo

gtamods, no es problema de Blogger, sino de algo en el código de las tablas que tu navegador interpreta de otra forma...no estoy segura, ni se que puede ser exactamente, pero te digo esto porque he visto tu blog con Internet Explorer y con Firefox y en Iexplorer se aprecia lo que dices (los enormes espacios) en cambio con Firefox, se ve perfecto, una tabla a continuación de la otra.

Unknown

Muchas gracias Rosa, con tú ayuda todo es MUY fácil.

Un abrazo muy fuerte desde Murcia!

Anónimo

HOLA ROSA, muchas gracias por tomarte tiempo para intentar ayudarme. Despues de horas y horas dandole vueltas al problema y buscando una solución acabo ahora mismo de dar con el origen del problema y con la solucion.

No era el codigo de mis tablas era como te decia algo en la plantilla o en alguna pagina del servidor de blogger que genera el codigo HTML final que se manda al navegador, y el hecho de que firefox presente bien las tablas debe ser que ignora algunas etiquetas de XHTML que otros navegadores si representan (como < b r /> )

Estaba arreiglando mis paginas cambiando las tablas por otra presentacion diferente y me di cuenta de que mis paginas aparecian con doble espacio, al parecer blogger tiene un sistema que detecta fines de linea y lineas en blanco y alli inserta una etiqueta < B R / > ahorrandonos tener que escribir la etiquetas BR tan a menudo y facilitando la composicion de las paginas a los novatos que no saben HTML.

Eliminando todas mis etiquetas < BR > de mis paginas pude mejorar la presentacion dejandolas como yo queria, y luego empece a pensar si estaria relacionado ese tema con el problema de las tablas ya que el espacio vacio que aparece encima de cada tabla es proporcional al tamaño de las tablas, asi que decidí probar a pegar todas las etiquetas de las tablas de tal manera que el interprete del blogger no pudiera encontrer huecos entre etiquetas o fines de linea donde insertar etiquetas BR y FUNCIONÓ.

Estoy empezando a aplicar el mismo truco en todas mis paginas donde hay tablas y ahora me quedan bastante mejor las tablas, he podido eliminar el espacio tan grande que habia antes de ellas,
mis paginas vuelven a tener un aspecto decente.

Muchas gracias por tu ayuda,
por cierto que te parece si publicas este problema y la solucion en grande en tu blog para ayudar a todos aquellos usuarios de blogger que puedan econtrar estos mismos problemas con las tablas?

luna

Hola Rosa
Te deseo lo mejor para este año que viene, gracias por compartir lo que sabes con los demás, si cada persona en el planeta hiciera lo mismo,nunca habría oscuridad en la tierra, porque todos seriamos luz.
Un abrazo muy fuerte y lo mejor para ti........Luna

Anónimo

gtamods, me alegro que dieras con la forma de arreglarlo, yo no tenía demasiad idea sobre el tema, ya que es bastante infrecuente, trabajar con tablas en Blogger, de hecho nadie antes me había consultado sobre algo parecido.
No pensé en los saltos de línea ni por un momento, la verdad, y eso que en la configuración - formato de Blogger, tenemos la opción de usarlo o no (las famosas <br<).

En cuanto al tema de los navegadores y sus interpretaciones, habría bastante que discutir...a mi modo de ver, el que hace lo que quiere y además de forma incorrecta muy a menudo, es IExplorer.

Bien, lo dicho, me alegro que todo haya ido bien. :-)

Anónimo

Luna, que quieres que te diga...me has dejado sin palabras. Acabo de llamar a mi marido y mi hijo para que lean tu comentario.
¡Eres un cielo! y estoy segura que tu eres una de esas personas con "luz"
Un beso, un abrazo y un millón de gracias!

Anónimo

Carlos, un abrazo a ti también!
Y ya sabes lo que pienso sobre eso..."con alumnos como tu, no hay profesora mala". ;-)

Anónimo

Fantásticos tus consejos. Intenté hacer uno y lo deje por imposible.
Repasando las consultas que te hacen, me he vuelto a animar, a ver si, soy capaz.
Un saludo
CARMELA

Anónimo

CARMELA, tómalo con tranquilidad, ¡es fácil!;)

Overunt

hola querida Rosa,,,una pregunta,,,usé esta idea de poner un cartelito, y el codigo lo use como gadget y si me funcionó http://www.overunt.blogspot.com/

pero en la pagina q tengo las fotos (boton photos),,al abrir, el espacio en la barra es mas pequeño y se corta el cartel,,,mi pregunta es si es posible quitar el cartelito solamente de la pagina donde tengo las fotos, para q no se corte, mil gracias por la ayuda,,un abrazo

Anónimo

Overunt Más sencillo sería reducir el ancho del cartelito aquí:
width: 150px;

Overunt

Hola querida Rosa,,,gracias tu consejo de reducir el ancho, lo intenté pero en cambio quedaba muy corto el cartelito en las otras paginas,,asi q intenté otra cosa,,usé parte de tu codigo para mostrar un widget en pagina especifica,,pero le cambié algo q vi en la plantilla original q tenia mi blog, asi q cambié en tu codigo solo esto "==" por esto "!=" y no se si siempre funciona asi, pero a mi me funcionó y de esa forma NO se muestra un widget en una pagina especifica,,,espero esto pueda servir a alguien mas,,,de nuevo gracias un abrazo

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S