40

Destacar el nombre de autor (tamaño de fuente y color)

Me han preguntado varias veces como hago para destacar mi nombre al pie de las entradas mostrándolo a mayor tamaño que el resto de elementos del post-footer y en distinto color.

Autor destacado

Es muy sencillo y lo conseguimos con solo unas líneas de CSS, aprovechando para ello una clase que ya está incluida en la plantilla por defecto, incluso en las nuevas plantillas de diseño.

Si marcamos la casilla de "Expandir las plantillas de artilugios" veremos que tenemos dentro del código de la plantilla algo como esto:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Ese código es el que pertenece al autor del blog, y el que hace que se muestre nuestro nombre en Blogger como firma de entradas.
Si nos fijamos, vemos que la etiqueta que muestra la firma -<data:post.author/>- tiene añadida una clase delante -<span class='fn'>-.
Usaremos esa clase para controlar el diseño de nuestra firma y cambiarle el tamaño de fuente y el color del texto.

Solo tenemos que colocar en el CSS de nuestra plantilla -antes de ]]></b:skin>- algo como esto:

.fn{
font-size: 130%;
color: #106716;
}

Cambiamos en font-size el tamaño del texto, podemos usar también pixeles.
Cambiamos en color el código para el color escogido por cada uno.

Entradas Relacionadas:

40 comentarios:


SandraL

Rosa.. ya te invitaron a conocer EmpireAvenue?
Es una nueva red social que esta entrando fuerte en la web.
Por ahora solo se puede entrar por invitación de algún miembro.
si quieres.. enviame tu dirección de mail y te envio de vuelta una invitación.

Saludos!

Anónimo

rosa puuedes convertir una plantilla css a una plantilla para blog??

Dra. Irasema

Gracias una vez mas Rosa. Ha quedado muy bonito mi nombre resaltado.

Joan Irazu

como le hago para personalizar todo el parrafo completo

Joan Irazu

a ya lo encontre, era la clase post-author vcard

saludos, CHiCken

Joaco

Hola Rosa :D Cuanto tiempo ;)
Soy Asceisno96... ;)
Bueno, venía a pasarme como van las cosas en El Escaparate. Veo que todo va muy bien y sigues actualizando. Espero que algún día yo llegue casi tan lejos como vos.
Por cierto, verás que ahora estoy cambiando de rumbos y me fui a WP hace como tres meses, jaja, pero bueno, sigo con la temática de Blogger en mi blog, aunque le agregué dominio propio con unos dólares que me hice vendiendo enlaces en mi blog.
Bueno, nada más venía a visitarte y hablar un poco de mi vida con alguien como vos. Un saludo grande y un abrazo incluído ;)

Anónimo

Hola Rosa que tal, antes de nada, tengo que felicitarte por este magnifico blog, de donde he podido sacar muchisima informacion para el mio.

Soy JJ Reina y estoy empezando a formar un blog, pero claro todavia me falta mucho.

Entre las cosas que he visto me gustaria hacer esta de resaltar el nombre del autor, como pones en este post, pero no encuentro la manera. Mi plantilla esta tan tocada que no encuentro los codigos a modificar.

Me preguntaba si podrias echarme una mano a encontrarlos,(si es que estan de otra forma)

Un abrazo fuerte.

www.ajedrezmurciano.com

Unknown

Hola Rosa, soy TRECARUNGA, cambié mi nombre de usuario (al mismo de Twitter).
¡Saludos!

Rosa,

Hola Rosa, por recomendación de Ana, una seguidora mía, me dirijo a tí por que tengo un problemilla, que no se visualizan los seguidores en el blog, si entro en la sesión, aparecen los blogs, uno el que colaboro y el mío,y ahí si que aparece, pero le doy a acceder y no. Me harías un gran favor, si pudieras ayudarme.
Muxu bat

Anónimo

Rosa,¡Bienvenida tocaya! :D
Mira, el problema es porque usas Scriptaculous, pero no te apures que tiene fácil solución:
http://elescaparatederosa.blogspot.com/2010/06/mostrar-el-gadget-de-seguidores-usando.html

Anónimo

Hola Rosa... hacia tiempo que no me pasaba por tu Blog jejeje bueno, dejame decirte primero que se le ve bien el diseno que le has puesto :D

... esta vez si te dejo un comentario ya que me perdi una vez mas en tu blog :S ... estoy buscando eso que habias publicado hace tiempo, lo de cambiar aquel cartel donde dice "Mostrando todas las entradas ..." por lo que tu y el Blog de Eulalia tienen, "Estas en : Nombre de la etiqueta : nombre del post ..."

No se si me explico jejeje, espero que me puedas ayudar en esta, te dejo mis

Salu2 ! :D

Anónimo

San.. He oído o mejor dicho, he leído algo por ahí, si... envíamela si eres tan amable, si. ¡muchas gracias! :D

lejaniaimposible@gmail.com

Anónimo

danimes.com Pues supongo que podría, pero no me dedico a eso...

Anónimo

Ezeguko ¡Saludos! :D Ay... me da pena :(

Anónimo

Alicia No es exactamente "cambiar", tienes que ocultar o eliminar el mensaje y después añadir el "estás en"...

http://elescaparatederosa.blogspot.com/2007/05/eliminar-mensaje-de-etiquetas.html

http://elescaparatederosa.blogspot.com/2007/05/breadcrums-siguiendo-el-rastro-del.html

Anónimo

Ajedrez Murciano Tu plantilla no es de Blogger, sino diseñada por alguien, así que supongo no tienes los códigos necesarios para que el efecto funcione.

Tal Cual

ROSA ERES LO MAXIMO ......pepin

Ana

En http://elblogdana.blogspot.com podeis recoger el premio Dardo y blog de Oro. Espero que os anime a seguir trabajando.Siempre estais ahi cuando lo necesitamos. Saludos. Ana.

Inés

Estimada Rosa, ¿cómo haces para que cuando mencionas a la persona que ha hecho un comentario y le contestas aparece en color rojo?

Aloke19

Si añades esto, te queda en negrita:

font-weight:bold;

Anónimo

Aloke19 Claro, así es, y si añades para borde por ejemplo, se vera enmarcado... cualquier cosa que se quiera añadir se incluye ahí en el CSS... pero ya eso es cosa de cada uno...

Anónimo

Inés Es sencillo, pero si me permites lo expondré para todos en una próxima entrada.

Unknown

¿Por qué pena, Rosa?
El cambio es porque decidi agregar un autor al blog (que posteará de vez en cuando) y me tenía que identificar a mi de otra manera...
¡Saludos!

Anónimo

Ezeguko Le tenía cariño a Treca :S

Unknown

¡Puedes seguir llamándome así!

Harry

Excelente, aunque queda mucho mejor si en vez del de 130% lo dejas en 110% y le añades font-weight:bold;

Carol

Muchas gracias!

Edward

Hola Rosa, me gusto mucho este tutorial pork hace un tiempecito que queria hacer eso en mi blog ;) ;) y ahora gracias a ti se como hacerlo... Pero lo que tambien quiero saber es, como puedo cambiar el tipo y el tamaño de letra de donde dice "Publicado por:" y la del "Autor" si eres tan amable de esplicarme como hacerlo, te lo agradeceria muchisimo ;) ;).. cualquier cosa aqui esta mi E-mail --> edwardrivas17@gmail.com

Espero tu respuesta por aqui o por E-mail, Gracias...

SandraL

Rosa!
Disculpa la demora.. te acabo de enviar una invitación para EmpireAvenue.
Recuerda invertir en SLV!
=D

Anónimo

San.. ¡Gracias cielo! Ahora ya solo me queda "ponerme a estudiar" como va el tema :$

Edward

Hola Rosa, me gusto mucho este tutorial pork hace un tiempecito que queria hacer eso en mi blog y ahora gracias a ti se como hacerlo... Pero lo que tambien quiero saber es, como puedo cambiar el tipo y el tamaño de letra de donde dice "Publicado por:" y la del "Autor" si eres tan amable de esplicarme como hacerlo, te lo agradeceria muchisimo .. cualquier cosa aqui esta mi E-mail --> edwardrivas17@gmail.com

Espero tu respuesta por aqui o por E-mail, Gracias...

Anónimo

EdwardDe eso precisamente trata la entrada :O del cambio que pides en "autor" y para el "publicado por"... pues comentarios anteriores, que también son siempre útiles.

Magoplup

Rosa Rosa... disculpame mi linda por tantas preguntas, pero como soy nuevo en esto e estado aplicando los temas en un blog de prueba y me a gustado mucho esta entrada pero te cuento donde dices: "Solo tenemos que colocar en el CSS de nuestra plantilla -antes de ]] >< / b:skin >- algo como esto:

.fn{
font-size: 130%;
color: #106716;
}

No encuentro el ]] >< / b:skin >- :(( busque muchisimo mas abajo en la plantilla pero no lo encontre puedes ayudarme?? :D

Anónimo

Magoplup Te aseguro que está, sea plantilla nueva o vieja... sino no funciona en Blogger...

Magoplup

Rosa luego de mucho buscar por fin lo encontre, hablo de el ]] >< / b:skin > no estaba tan lejos despues de todo pero por no estar en familiaridad con la plantilla se me hizo muy dificil el encontrarlo :) pero ya lo pude aplicar mil gracias

syl

Hola Rosa!
gracias por tu ayuda, me sirvió de mucho y al final coloqué los nuevos botones en la minima strech ;) Sólo que en vez de quedarme en línea me salen debajo! Sabes si hay manera de ponerlo bien? Gracias!

Anónimo

sylTendrías que cambiar el código que muestra los botones a antes de esto en tu plantilla (algo más arriba de donde está ahora):

</div>
<div class="post-footer-line post-footer-line-2">

Sieber

Muchas gracias Rosa por el aporte, me ha costado un pokito, bueno un buen ratito, pero ya lo consegui, ahora solo me falta ponerle el color que yo quiero.
Te felicito por el blog y admiro la paciencia que tienes que tener para poder hacer un blog tan didactico.

Bilosony2™

Hola! rosa! tanto tiempo je me habia tomado unas vacaciones :D

Tengo una duda como deveria hacer por si tengo varios autores en el blog, para que cada uno tenga su propio color?

Suerte!!

Anónimo

Bilosony2™ Sería algo así (esto es para dos):
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</b:else>
<data:top.authorLabel/>
<span class='ln'><data:post.author/></span>
</b:if>
</span>

Como ves a cada autor se le cambia la clase (fn) y se añade en el CSS el código para controlar esa nueva clase.

Es algo muy parecido a lo que explico en esta entrada:
http://elescaparatederosa.blogspot.com/2009/09/imagen-y-enlace-en-la-firma-del-post.html

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