59

Fotografía y descripción del autor de las entradas

Veremos como colocar un apartado especial al pie de cada entrada con la fotografía del autor de la entrada y una breve descripción sobre su persona.
Podrá usarse para blogs con solo un autor o para los que publican varios autores, una vez instalado el código, se mostrará de forma automática el apartado que diferencia a cada autor de las entradas.

Autor


[1] En nuestro Escritorio de Blogger nos situamos en Edición HTML y marcamos la casila de Expandir las plantillas de artilugios.

[2] Buscamos la etiqueta ]]></b:skin> y justo antes colocamos el CSS para controlar el diseño del apartado:

#post-footer-autor {
width: 100%;
height: 70px; /*Altura del apartado de autor */
background: #669900; /* Color de fondo del apartado */
margin: 8px 0px 8px 0px; /* Margenes del apartado de autor */
border: 2px solid #ccc; /*Borde del apartado*/
}
/* Estilo del avatar */
#autor-avatar {
width: 54px; /* Anchura del espacio para el avatar */
height: 54px; /* Altura del espacio para el avatar */
background: #ccc; /* Color de fondo del avatar */
float: left;
margin: 7px; /* Margenes del avatar */
}
#sobre-autor {
padding-right: 5px;
margin: 0px;
}
/* Estilo del texto de la descripción */
#sobre-autor p{
font-size: 12px; /* Tamaño de la fuente */
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;/* Color del texto */
}
/* Estilo texto de enlace */
#sobre-autor a{
color: #9A9A9A; /* Color del enlace */
text-decoration:none;
}
/* Estilo texto enlace al paso del ratón */
#sobre-autor a:hover {
color: #9A9A9A; /* Color enlace */
text-decoration:none;
}

[3] Localizamos esta etiqueta: <div class='post-footer'>
o en su defecto, esta otra: <div id='post-footer'>

[4] Una vez localicemos una u otra, según aparece en nuestra plantilla, tenemos que colocar justo antes, este código:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == &quot;NOMBRE DEL AUTOR&quot;'>
<div id='post-footer-autor'>
<div id='autor-avatar'>
<img src='URL DE LA IMAGEN DE AUTOR' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='sobre-autor'>
<p>
DESCRIPCION BREVE DE AUTOR
</p>
</div>
</div>
</b:if>
</b:if>


A tener en cuenta:
El código tal cual lo vemos arriba -paso [4]- sería para solo un autor, para que se muestre la descripción de autor en blogs compartidos tendremos que repetir ese código tantas veces como autores publiquen en el blog, después hacemos los cambios correspondientes para cada autor.

El apartado de autor solo será visible en las páginas de entrada, para mostrarlo también en el home del blog, eliminamos la primera línea del código: <b:if cond='data:blog.pageType == "item"'> y el último </b:if> del final.

NOMBRE DEL AUTOR Colocamos aquí el nombre del autor exactamente igual a como aparece en nuestro perfil de Blogger, es decir, el nombre que usamos en nuestra cuenta de Blogger para firmar las entradas.

URL DE LA IMAGEN DE AUTOR Colocamos la url aquí de nuestro avatar, que tendrá aproximadamente unas medidas de 50px por 50px.

DESCRIPCION BREVE DE AUTOR Aquí escribimos una breve descripción sobre el autor, usando la vista previa para calcular que el texto no sobrepase el espacio disponible para el. Se pueden incluir enlaces en el texto si así lo queremos.

Entradas Relacionadas:

59 comentarios:


Anónimo

Lo probaré a ver cómo queda. Me encanta tu blog, he aprendido mucho. Mi blog no existiera si no fuera por el tuyo, excelente trabajo! Te admiro, saludos...

http://elblogdedanielfernandez.blogspot.com/

Unknown

Hola Rosa. Una consulta, ¿no sabes de algún generador online o programa que pueda diseñar un logo parecido al de esta página web? http://www.ciudad.com.ar/
Saludos.

Vku

HUUU!!! Rosa. Por la fotografía pareces una chica de 20. :$ :P

Alexis Moya

Rosa, en el paso 3 no encuentro ninguna de las dos lineas en la plantilla... hay alguna otra que me pueda servir?
gracias

Anónimo

Vku ¡Pelota! :P

Anónimo

Ezeguko No. En ese logo se nota perfectamente la calidad... no está hecho online seguro...los generadores online no suelen dejar tan buen resultado.

Anónimo

Klgo. Alexis Moya R. Dime para que blog es, y trataré de orientarte.

Ipanema S.M.

Lo voy a probar, justo ahora que estoy preparando nuevo diseño para mi blog, yo creo que quedara muy bien.
Muchas gracias Rosa! :D

Alexis Moya

Hola Rosa, gracias por responder.
El blog al que quiero aplicar esto es http://clinicaysalud.blogspot.com/
Ojala puedas ayudarme.
Gracias

La Turca y sus viajes

Hola!!!!
Te mencione en mi blog, porque Paula te menciono en el de ella ........” Mi tiempo es mío y lo comparto con quien tengo a bien” así lo dices y así me llego a mí y ha sido un placer para mi conocerte, se que aprenderé mucho de vos y tu espacio……tu espacio tiene panrak 6, eso es fantástico….
Un abrazo de oso.

Anónimo

Klgo. Alexis Moya R. En tu caso creo que el mejor lugar sería justo antes de donde has colocado la invitación a suscribirse:

"Si te gustó este artículo, ingresa tu mail acá y suscríbete al blog."

Anónimo

JoacoCreo que es la segunda vez que te comento que no admito enlaces directos a los blogs en mis comentarios. En la primera ocasión lo pasé por alto... en esta elimino el comentario.

Anónimo

Común ¡Encantada de recibirte aquí!
Y no te asustes por la frase... a veces es complicado según con quien el poder ser todo lo amable que una quisiera... de ahí que prefiera avisar para que algunos sepan a que atenerse...

Veo que eres argentina... ¿te digo?...:D tengo un amigo allí (en realidad varios) pero este en concreto siempre me envía "abrazos de oso"... me has hecho sonreír.

Un abrazote también para ti. :F

La Turca y sus viajes

Rosa, jijijiji por la frase, esta rebuena.
Y quien ese "Amigo" que me robo la frase de mis abrazos de oso, jijiji, he recibido de todos los comentarios por esos abrazos, de los buenos y de los otros…..
Un abrazo de oso.

MamaNunes

:$ Oh Rosa! He intentado insertar el código en el nuevo Diseñador de Blogger, pero no funciona. Sólo si se añade un gadget HTML/Javascript, pero se encuentra fuera del pie de página del post ... Una lástima ese nuevo modelo de plantilla :S
Si usted descubre, me enseña? :D

Besos y graaacias !!

☪ ATH∑N∑A ✩

Hola Rosa, tenia tiempo sin pasar a dar lata... Fijate que instale una plantilla que trae un menu integrado, en una parte, quiero poner un enlace a los autores del blog, pero no se como sacar la url de los autores y ponerla en el html, para que al darle click aparezcan en lista, como aparecen en el gadget. No se si me explique... mmmm... Bueno, Saludos, y luego paso a ver que... jejeje.. Chao!

Alexis Moya

Rosa, pero se puede ubicar ahi ese codigo? esa parte yo la agrego en el formato de pagina en la pestaña de Configuracion.
Voy a hacer el intento y te aviso.
Gracias

Joaco

Huy Rosa, perdón por publicar el enlace, no había leído tu otro comentario, jaja, perdona mi torpesa, no quise molestarte :$

Perdona las molestias,

Joaco.

Harry

Jummm muy buen dato, pero, y si son varios los autores del blog?
PD:Yo juraba que tenías 19 años xD

La Chica del Blog

Hola Rosa, yo otra vez... Ahora tengo un nuevo problema, mi blog (http://tumeencantas.blogspot.com/) tiene una plantilla de las del Nuevo Diseño de Blogger (Sencillo de Josh Peterson) Y quiero poder ampliarle más el espacio de las entradas PERO SIN USAR LA EDICIÓN DE BLOGGER, o sea, quiero modificar el tamaño desde mi plantilla. Podras ver que en mi blog, las entradas tienen un tamaño (que no consigo modificar) porque tiene ese espacio en blanco a cada lado, y realmente quiero cambiarlo, por favor ROSA, AYUDAME!

Harry

Rosa, creo que a tu blog le urge un Chat, así no se crean tantos Offtopics en los temas.

Unknown

Excelente justo lo que buscaba, muchas gracias

Anónimo

MamaNunes Yo lo he añadido e una de las nuevas plantillas, desde el mismo CSS y Hml en la plantilla y si funciona...:O
Puedes verlo aquí para dos autores distintos:
http://picumoros.blogspot.com/

Anónimo

Athenea No puedes hacer eso si el menú no tiene submenús... podrías poner un autor claro, pero no los dos.

Anónimo

Klgo. Alexis Moya R.Ahhh yo no sabía lo tenias incluido ahí... yo desde aquí no puedo verlo... cuando hallas probado lo que sea me dices...

Anónimo

Joaco No hay problema ;)

La hormiguita

Que bueno.... a probarlo.. veo como queda gracias. :)

Anónimo

- Tumeencantas ♥ No veo el espacio que dices, como no sea el normal a ambos lados el blog... y si aumentas demasiado el ancho en pantallas con poca resolución tu blog se verá cortado.

MamaNunes

Gracias Rosa! Lo voy a intentar con lo modelo mas simples Por que no funciono en uno de Tina Chen... Quien sabe?:P (Perdoname el "Portunhol")

Unknown

Muy Bueno GRX :D:D

Kas-Tro

Rosa hice todo tal como dice aqui, pero a mi ni el fondo me sale y me sale todo desproporcionada fijate en esta entrada de mi blog de preuba..

Kas-Tro

perdon ano te deje el link http://prueba2056.blogspot.com/ si kieres despues puedes borrar este coment y dejar solo el primero..xd

Anónimo

MamaNunes Ah bien... quizá no sirva en todas...:S

Anónimo

Kas-Tro No has incluido el texto, has dejado el que yo puse... así no puedes saber si está bien o está desproporcionado... has de rellenar con texto el espacio hasta que se adapte.

Kas-Tro

rosa ya lo hice si puedes miralo, ahora que no me aparece ni el color del fondo ni los bordes

Anónimo

Kas-Tro No lo veo colocado en el blog... de todos modos es algo bastante sencillo... trata de "pelear" un poquito por ti mismo y no te acomodes a que yo siga tus pasos, no tengo demasiado tiempo como para hacer eso con todos...

Alexis Moya

@Rosaal final preferi no usarlo, ya que vi que sobrecarga mucho la pagina, en el sentido estetico.
Pero esta vez quiero hacerte otra pregunta, ¿hay alguna forma de agregar alguna bandera de paises, como esas que van en la esquina superior del blog? Estamos en el mes de la Patria en Chile y me gustaria agregar eso a mi blog para hacerlo ad-hoc a las fiestas.
Gracias

Anónimo

Klgo. Alexis Moya R. Si, pienso igual... si fuese en blog con más autores bien, para uno solo es repetir mucho visualmente creo yo...

Antes había una página muy buena con bandas de los países para la esquina superior, pero hace tiempo cerró y la verdad, ahora mismo no se de otra.

Se me ocurre que podrías alojar una banderita tu mismo y utilizarla con un código así:

<a href='URL DE LA PAGINA' style='display:scroll;position:fixed;bottom:2px;left:2px;'><img src='URL DE LA BANDERA'/></a>

Esto mostraría la bandera en la parte superior derecha de la página en el a herf podrías colocar por ejemplo la url de una entrada tuya o de otros donde se hable de la festividad...
Solo es pegarlo en un gadget HTML, prueba y me cuentas...

eduiracheta

Rosa otra duda :) se podría cambiar la apariencia del gadget de seguidores? gracias

gardom

Ola Rosita.. tu blog esta exelente.. yo recien comenze a crearme un blog y me gustaria que me orientes..! que pones en "Añadir un gadget"(basico,destacados,populares etc) yo curiosiando en mi blog solo pude hacer algunas cosas sencillas.. t paso en link de mi blog para que veas en que podrias ayudarme..

http://animegar-dtodo.blogspot.com/

espero que me ayudes Rosita y te lo agradeceria un montonaso.
pa lante con tu blog que estas exelente..! XD

Anónimo

Ed's Gallery No, no podemos controlar ese gadget nosotros.

eduiracheta

@Rosa
bueno gracias igualmente ;)

Anónimo

gardom No entiendo... :O
Mis destacados por ejemplo, son una lista de enlaces... casi todos esos gadget los encuentras directamente de Blogger, en Añadir nuevo gadget...

La hormiguita

Hola... Rosa... bueno probé a ver como salía... y como magia... nada por acá..nada por allá... cuando tengas un ratito te fijas que hice mal...te paso mi blog http://adrianapecyner.blogspot.com
no se si necesitas otra cosa.
cariños

Anónimo

La hormiguita No veo el último código añadido en la plantilla...

La hormiguita

Pero está añadido, no se por que no se ve??? hice todo tal cual... ?? es mas lo borré y lo volví a poner antes de div class. En realidad, no se si me va a gustar como queda, quería probar.... pero bueno...parece que mi blog , no lo quiere poner.

gardom

bueno rosita.. yo me referia a lo mas recomendable en Añadir nuevo gadget, ya que hay muchas enlaces para agregar.. y como yo recien estoy comenzando en esto.. no tengo idea que enlase son los mas recomendables.. espero aver sido claro.. saludos ROSITA

Anónimo

gardom Eso ya es cosa de cada uno, aunque los de Archivos, Etiquetas y suscribirse por ejemplo, no deberían faltar...

Anónimo

La hormiguita Si que me han comentado que en algunas de las plantillas del nuevo diseñador no se ve... ni idea de porque...
Si me preguntas mi opinión, está bien para blogs con más de un autor, para los nuestros yo creo sería un poco "repetitivo"...

La hormiguita

Ya lo he sacado... pero no es una plantilla nueva, es la minima, que la estoy haciendo a mi gusto, desarme una que se llamaba emotive y le saque lo que me gustaba.
Gracias

Anónimo

La hormiguita Ah bien... la vi así "por encima" y pensé era del diseñador... si es la Mínima debería funcionar sin problemas :O

Unknown

No puedo!!!! ise todo los pasos y no me sale!

www.trance-music4ever.blogspot.com

POR OTRA PARTE FELICIDADES!!! EXELENTE BLOG!

Anónimo

kevin G. Bueno pues lo siento :S ... más claro no se explicarlo... lo he probado incluso en las plantillas nuevas y funciona...

Enmiguel

Rosa, como hago para que la descripción del autor no este en mayúsculas?

Anónimo

Enmiguel En el código ya se comtempla eso... de hecho es esta línea la que muestra el texto "normal":
text-transform: normal;

Unknown

Pusss como me rompio la cabeza pero al fin lo logre:D
me gustaria que pases y lo veas con tus propios ojos te dejo el link
http://creartuebook.blogspot.com/2010/10/bajar-archivos-con-cryptload.html

Anónimo

Sergio ¡Bien por ti! Ha quedado muy bien.

José Luis Hidalgo

Hola Rosa: Una duda, algunos lectores de mi blog me piden que aumente el tamaño de las fotos cuando piquen sobre ellas. No las subo con toda su resolución por dos motivos, que no interfiera en la velocidad de carga de la página y porque no me las copien. Las fotos de las entradas del cuerpo central sí se agrandan algo al picarlas, pero las laterales de los gasgets ni se inmutan.¿Cuáles serían las medidas o resolución ideales para dar cierta calidad también y no ralentizar la carga?, ¿está relacionado con haber subido las fotos directamente del disco duro y no desde una página como flickr por ejemplo?.
Gracias y un abrazo de antemano. Si lo deseas puedes echarle un vistazo y me das alguna sugerencia:
http://viernessantoenpriego.blogspot.com/

Anónimo

José Luis Hidalgo Todas las imágenes que se alojan en el blog directamente desde nuestro PC, son subidas y alojadas de forma inmediata al mismo tiempo en un álbum en Picasa de Google. Te comento esto por si lo desconocías. Allí en Picasa puedes acceder a tu álbum con la misma cuenta que usas en tu blog.

Lo que yo creo mejor es hacerlo así, es decir, subir las imágenes desde el PC a las entradas, independientemente de su tañamo o resolución, una vez en la entrada puedes elegir el mostrarlas a distintos tamaños, incluso pequeñas y cuando se pinche en ellas se abrirán con el tamaño original que ha quedado alojado en Picasa.

La sidebar es otra historia, pues si las subes directamente desde un Gadget de imagen, no puedes controlar su tañmaño, y escoger para que se adapte a la sidebar y no se salga de la misma (como veo pasa en tu blog).

Ahí entonces la única posibilidad para que se abran a tamaño original, sería que tu directamente las alojases en Picasa por ejemplo, y en el gadget de imagen añadas esa url, para que al picar se abra en Picasa...

Espero haberte aclarado algo... así de pronto entiendo que no es fácil de captar... pero ve a Picasa, quizá te quede más claro todo...

http://picasaweb.google.com/home

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