Una de las "ventajas" que tiene Wordpress es que se puede agregar debajo de cada post una pequeña biografía sobre el autor para que los lectores puedan tener más información acerca de quién escribe el post, y muchos usuarios de Blogger desearían poder tenerlo también en el blog, así que vamos a ver cómo poner un 'acerca del autor' debajo de cada entrada.
En él puedes poner tu avatar, una breve información sobre ti e incluso puedes agregar enlaces sobre otros sitios webs que tengas o de tus redes sociales.
- Primero vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios ahí buscamos este código y lo eliminamos:
<span class='post-author vcard'>
Esa parte que hemos eliminado es la que muestra Publicado por (nombre del autor), lo hemos quitado porque ya no será necesario con lo que vamos a agregar, pero bien puedes dejarlo si quieres y no pasa nada.
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span> - Ahora busca esta línea:
<div class='post-footer'>
Y debajo de ella agrega esto:
<div class='acercadelautor'>
<img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div> - Ahí cambia lo que está en color rojo por la URL de tu avatar. Y agrega en donde está el color naranja el texto que quieres mostrar como parte de la información de tu biografía, puedes poner enlaces incluso.
- Por último antes de ]]></b:skin> pega lo siguiente:
.acercadelautor {
background:#EFFBFB; /* Color de fondo */
border:1px solid #ccc; /* Borde */
letter-spacing:normal;
color:#424242; /* Color del texto */
text-transform:none;
font-size:12px; /* Tamaño del texto */
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño de letra del nombre del autor */
padding-left:5px;
}
Esos son los estilos que tendrá el recuadro, puedes hacer los cambios que quieras en las anotaciones que he puesto en color verde.
A partir de este momento ya podrás verlo en la Vista Previa y probar si tiene los colores que deseas.
En el primer código que hemos agregado está marcado en negrita el tamaño de la imagen del avatar, esa puedes modificarla a tu gusto; si agregas poco texto en tu biografía se recomienda que hagas el avatar más pequeño para que no quede en desproporción.
¿Y si el blog tiene más de un autor?
En ese caso en lugar de pegar el código del paso 2 pegaremos este otro:
<b:if cond='data:post.author == "Autor 1"'>
<div class='acercadelautor'>
<img border='0' src='URL del avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>
El primer fragmento corresponde al primer autor y el segundo al otro autor. De igual modo cambia la URL del avatar y el contenido de la biografía.
<b:if cond='data:post.author == "Autor 2"'>
<div class='acercadelautor'>
<img border='0' src='URL del avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>
En donde dice Autor 1 y Autor 2 debes poner el nick de los autores tal como aparece en el blog respetando las mayúsculas, minúsculas y espacios, eso es muy importante.
Si quisieras agregar más autores sólo agrega otro fragmento como este:
<b:if cond='data:post.author == "Autor 3"'>Como ves el procedimiento es de lo más sencillo, no requiere scripts ni nada del otro mundo y el resultado quedará tan lindo como quieras.
<div class='acercadelautor'>
<img alt='' border='0' src='URL del avatar 3' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>
P.D. Cindy y Manuel son producto de mi imaginación, cualquier parecido con la realidad es mera coincidencia.
Muy bueno ;) me gusto mucho, Saludos y gracias
ResponderEliminarGracias, lo estaba esperando sólo que lo pondré en el div class='post-header-line-1 porque me gusta arriba. Espero me funcione de maravilla. Gracias.
ResponderEliminar¿Quisiera saber si sabe como poner el botón facebook connect para los comentarios?
Saludos.
MCarlitooH2, gracias a ti por tu visita :)
ResponderEliminarNorberto Briones, no sé cómo pueda hacerse, eso sí te lo quedaré debiendo.
Ya lo hice, quedó estupendo. http://elblogdelnobe.blogspot.com
ResponderEliminarMuy bueno e interesante, quiza lo agregue a mi blog.
ResponderEliminarComo siempre, muchas gracias.
Saludos
Eres excelente POTRO, los consejos de tus post me han ayudado mucho en mis pininos por este mundo bloggero.
ResponderEliminarMe gustaría saber como centrar texto e imágenes en el cuerpo de la entrada, porque a pesar de que la centro en edición, no me convence el resultado.
Te dejo la dirección de uno de los blogs que trato de hacerlo de una manera decente.
De antemano quedo muy agradecido por tus consejos y lamento la eliminación de tu país de este mundial.
http://claudimel.blogspot.com/
Un saludo desde Valencia-España
Gabriel Bárcena.
Potro, si no quiero que se muestre la hora de la entrada bajo el título, debo eliminar esto ?
ResponderEliminarspan class='post-timestamp'
b:if cond='data:top.showTimestamp'
data:top.timestampLabel/
b:if cond='data:post.url'
a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link' abbr class='published' expr:title='data:post.timestampISO8601' data:post.timestamp/ abbr /a
/b:if
/b:if
/span
Gildo Kaldorana, qué bueno que te ha gustado, saludos!
ResponderEliminarGabriel, en el blog que mencionas sólo veo imágenes en la entrada, no veo texto, pero las imágenes sí están bien centradas, a menos que te estés refiriendo a otro asunto :s
Norberto Briones, es exactamente esta parte:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
hola potro es genial este truco pero..
ResponderEliminar¿Como hago que solo aparezca en las entradas individuales?
Encierra el código que se agrega en el paso 2 entre esto:
ResponderEliminar<b:if cond='data:blog.pageType == "item"'>
Aquí va el código del paso 2
</b:if>
Muy bueno potro si lo he visto, use una plantilla con esta opcion pero me alento la carga, pero estoy probando y veo que esta genial.
ResponderEliminarGracias Potro
Hola potro, buenas tardes, a mi me gustaria saver exacatamente lo contrario, como eliminar de la plantilla la siguiente frase: publicado por:
ResponderEliminarYa que ese blog tiene varios autores, y quien escriba, no es una prioridad.
saludos potro Att: Isa
Anteriormente "El Venado"
ResponderEliminarQue genial, ya lo puse para que reconoscan mi nuevo nombre de usuario.
Muy bueno.
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarEs una opción gustosísima, Potro, mañana mismo intentaré hacerlo. Me ha entusiasmado
ResponderEliminarMuchísimas gracias.
Un abrazo
Potro tengo un error: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
ResponderEliminarMensaje de error de XML: The entity name must immediately follow the '&' in the entity reference.
AlexG, qué bueno que te ha gustado :)
ResponderEliminarIsaias Romero, entonces sólo haz el primer paso.
Dankey, jaja, está bien, ahora tendré que memorizar este nuevo :P
Sofía Serra Giráldez, qué gusto que haya sido de tu agrado :D
KatoGd, podría tratarse de la URL del avatar o quizá el lugar donde lo estás intentando poner.
Gracias Potro, asumo que influye en el centrado, el icono de "número de comentarios" en la parte superior.
ResponderEliminarAbusando de tu sapiencia dime por favor porqué no me sale el FAVICON, en un principio salía; pero al cambiar de plantilla se fastidió y no encuentro donde ponerlo, ya probé las opciones que recomiendas y nada..
Gracias.
http://claudimel.blogspot.com/
Muchisimas gracias me gusto mucho ya lo añadi queda genial
ResponderEliminarhttp://brujo5-iphone.blogspot.com/
Gabriel, supongo que es porque no tienes público el archivo del favicon, quise verlo y me dice que no tengo privilegios suficientes por lo que nadie más puede verlo. Asegurate de hacer pública la carpeta donde lo tienes y luego vemos sí ese era el problema o es otro.
ResponderEliminarBrujo5, qué bueno que te ha gustado.
El Potro, Como puedo hacer una imagen igual a las de las tuyas, es decir el muñequito
ResponderEliminarNo es Muñequito es Avatar xD
ResponderEliminarMuye bueno, pero y el Blog de puebaz? xD
Buena Potro
Ohhh Potroo eres lo mejorr! Era la imagen, el servidor! Graciasss eres un Master! :D
ResponderEliminarok AVATAR como puedo tener uno igual
ResponderEliminarPero los cambios de las letras osea colores, fondo y eso.. No se aplican potro?
ResponderEliminarGAMC, hay varios sitios, yo lo hice con este.
ResponderEliminarıllıllı★Criss Mitchell★ıllıllı, esta vez me pareció más sencillo poner el ejemplo en imagen que en blog de pruebas.
KatoGd, sí, se deben aplicar en el área del CSS donde expliqué, ahí en las partes en color verde.
Si potro! Claro que modifico los colores que tu das pero no me aparecen! :S Es extraño!
ResponderEliminarNecesitaría verlo puesto en tu blog para ver a detalle dónde podría estar el error.
ResponderEliminarHola Potro:
ResponderEliminarTruco agregado.
Ahora voy a ver que y como complementarlo con algo para darle un poco más de utilidad (no pondré biografía).
Saludos y como siempre al tope de la tabla.
Jpz.-
Gracias Potro, era eso lo del favicon. (ref.18-20)
ResponderEliminarLo que he hecho es entrar a mi google site de ahí pinchar el enlace del blog y ya VEO el favicon aunque el alojamiento solo está compartido con una persona... no se si he soplado la flauta o es así.
Jpz, seguro sabrás sacarle provecho y sabrás adaptarlo con muy buen gusto como siempre :)
ResponderEliminarGabriel, entra a tu sitio de Google Sites y arriba haz click en 'Más acciones' ahí selecciona 'Compartir este sitio' y en 'Permisos avanzados' marca la casilla que dice 'Cualquier usuario puede ver este sitio'
Mira potro haye tus plantillas para blogger en btemplates hoycuando veia las nuevas plantillas
ResponderEliminarWhoaa
http://btemplates.com/2010/blogger-template-ipod-touch/
Potro, sabes como oscurecer la línea debajo del título... esa que dice Fecha,Etiquetas,Comentarios.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarExcelenteee Potroo! Me salioo! Wooooo.. :D
ResponderEliminarEl error era mioo! Ahora necesitoo un Gran Favor Tuyooo!
Un favor inmensoo que me ayudes es que mis links no abren en otra pestaña.. :S, Y tome un truco de Blog&Web, Pero no funciona, Pense que el truco nada mas funcionaba con las entradas nuevas pero nada ni con esas, Ayudamee :D..! :S
AlexG, sí me fijé en la mañana :D
ResponderEliminarNorberto Briones, ¿exactamente cuál línea y de cuál blog?
KatoGd, aquí está el atributo básico, o aquí otra opción con script y aquí otra opción.
Hola potro queria saludarte y veo que tu blog sigue creciendo, bueno ademas quisiera hacer una consulta si podrias poner un tema de como crear una barra de navegacion en el blog , pero que se pueda personalizar con fondo ,etc. Espero que me pueda hacer hecho entender y sigue asi tu blog es uno de los mejores ha y me encanto el menu estilo acordeon
ResponderEliminarhttp://elblogdelnobe.blogspot.com/
ResponderEliminarPuedes observar que bajo cada título aparecen las etiquetas, y los comentarios. Quisiera que esa línea fue de un color más oscuro.
¿Necesitas la plantilla?
Muy bueno el tip... lo único que cambie fue la posicion del avatar pero lo demás genial... Por si quieren modificarlo donde dice Left ponen Right donde dice: 'URL del avatar' style='float:left; en el segundo codigo.
ResponderEliminarGRACIAS DEL POTRO
ResponderEliminarGoku El Super Sayayin, gracias por tus comentarios, no entendí muy bien lo de la barra que quieres ¿me puedes dar un ejemplo?
ResponderEliminarMr X, genial :)
GAMC, gracias a ti por tu visita.
Norberto Briones,
ResponderEliminarBusca esta parte en tu plantilla:
.post-header-line-1 {
margin:0 0 15px;
color:#a2a2a2;
font-size:11.5px;
}
.post-header-line-1 a {
color:#a2a2a2;
}
Lo que está en negrita es el color de esos textos. Si también quieres cambiar el color del texto al pasar el cursor entonces cambia esta parte en negrita:
.post-header-line-1 a:hover {
color:#51300F;
}
Saludos.
Gracias Potro
ResponderEliminarhola potro me podrias informar como se le pone texto o titulo a un salto de linea por ejemplo
ResponderEliminarTitulo de la entrada
Imagen
Ver Pelicula/Entrar/Leer Mas<-------Salto de Linea
HOLA POTRO SALIENDOME DEL TEMA QUISIERA PREGUNTARTE SI SE PUEDE MODIFICAR EL ESTILO DE LETRA Y TAMAÑO DEL TITULO DE CADA POST QUE TENGO EN MI BLOG QUE ES IGUAL ALA QUE TIENES AVER SI ME AYUDAS GRACIAS ANTEMANO :p
ResponderEliminarChilaverde, no te he entendido bien, los saltos de línea son los renglones y esos se ponen así: <br />
ResponderEliminarCada vez que pongas ese código representa un renglón que se saltará.
NN, debajo de .post h3 { están los estilos de los títulos de las entradas, ahí puedes modificar lo que desees.
oye bro como le pudedo sakar la plantilla de una web ??
ResponderEliminarlo que pasa es que cuando pongo un salto de linea me aparece por defecto Mas Informacion y me gustaria saber como se puede hacer para que en vez de Mas Informacion pueda yo cambiarlo y ponerle otro a cada post diferente
ResponderEliminarbueno lo que intente decir es crear una barra de navegacion
ResponderEliminarcomo de busqueda interna puesto que la navbar de blogger no permite buscar cosas dentro del blog , en esta pagina presentan una imagen .
http://blogsmadeinspain.blogspot.com/2008/08/crear-vuestra-propia-barra-de-navegacin.html
se me olvidaba que esa barra de busqueda interna pueda ser personalizable
ResponderEliminarGracias Potro ahora si que me funciona le Favicon (Ref. 30-31)
ResponderEliminarhttp://claudimel.blogspot.com/
insiden, pues tanto como sacarla no se puede, pero puedes investigar el nombre de la plantilla y buscarla en la red para descargarla.
ResponderEliminarChilaverde, necesitaría ver un ejemplo porque no me queda nada claro :s
Goku El Super Sayayin, pues de hecho ahí explican cómo hacerlo, lee toda la entrada y verás que hay que entrar a un sitio para poder hacerla y personalizarla.
Gabriel, qué bien, ahora sí ya se ve :)
ResponderEliminarPotro me salio todo bien, pero no me sale como un cuadrito. Hay manera para que se pueda ver solo al hacer clik en la entrada.
ResponderEliminarhttp://cybernetics-csiyon.blogspot.com/
Hola claudia,
ResponderEliminarEn el código del paso #4 olvidaste en esta parte acercadelautor { poner un punto que va antes y eso hará que tenga un borde y un color de fondo. Ponle el punto tal como está en el paso #4 y se solucionará.
Para que se muestre sólo en las entradas individuales encierra el código que pegaste en el paso #2 entre:
<b:if cond='data:blog.pageType == "item"'>
y
</b:if>
¡Saludos!
Muchas gracias Potro ya funciono.
ResponderEliminarHola Potro, El Truco Quedo Exelente enMi Blog
ResponderEliminar¡Gracias!
Hola Potro, gracias por este truco, ya lo implemente en mi blog y por cierto quedo perfecto, un saludo amigo nuevamente por tu blog ahora que tengo un poco de tiempo.
ResponderEliminarUn saludo!
Alejo, qué bueno que te ha gustado ;)
ResponderEliminarEduardo Sanguino, gracias por tu visita :)
Hola Potro!! Hay Algun Truco Para No Mostrar la info Debajo De Cada Entrada? Sino nada mas Al Entrar en Una?..
ResponderEliminarMira el comentario #10 ahí está el código ;)
ResponderEliminarMuchas Gracias Potro Ahora ver, Si puedo solucionar lo del script, wigets, o imagen lo cual dudo ya que las comprimo!.. :/
ResponderEliminarPotro y Sino quiero acerca del autor debajo de cada entrada?. Como Puedo modificar eso??
ResponderEliminarSi lo quieres debajo del título ponlo debajo de:
ResponderEliminar<div class='post-header'>
No sabes cuánto te lo agradezco Potro ..
ResponderEliminarPor nada :)
ResponderEliminarPotro no encuentro esa linea que me distes, lo que quiero es colocarla donde yo quiera, Se puede?
ResponderEliminarTodas las plantillas deben tener esa etiqueta, ahora que no sé bien a qué te refieres con moverlo donde quieras, por ejemplo, en medio de las entradas no se puede, si es en otro lugar sería cuestión de que hagas la prueba y veas si se puede y si se ve bien en el lugar que has elegido.
ResponderEliminarhola Potro:
ResponderEliminarestoy renegando con eso de poner el autor, yo quiero ponerlo en cada entrada individualmente y cuando pongo en guardar plantilla me sale error porque no esta bien formada que error cometi:
y aparte no sale mi nombre y dice:
ESCRITO POR TEMPLATE ERROR: No dictionary named: 'post' in: ['blog']
en vez que aparezca mi nombre... no entiendo espero su respuesta...
bueno ahora que busque bien no encuentro la linea del #2 lo busque y lo rebusque (Diosssss) y ya me estoy rindiendo. el comentario anterior ya me di cuenta el porque solo que ahora no encuentro esa linea para poder seguir los otros pasos
ResponderEliminarNecesitas marcar la casilla Expandir plantillas de artilugios para poder localizarlo, como te mencioné en el comentario anterior puedes apoyarte usando las teclas CTRL+F para buscar los códigos.
ResponderEliminarSaludos.
hermano por mala suerte borre div class='post-footer'> ahora no puedo ponerla , saves donde de nueva cuenta puedo pegar me puedes ayudar? gracias
ResponderEliminarPodrías ponerlo debajo de esto:
ResponderEliminar<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Antes de guardar los cambios dale vista previa para ver si funciona.
muchas gracias potro ya pude solo me queda una duda, al poner el color de fondo me cubre la imagen a que se devera esto? valla me cubre la mitad
ResponderEliminarNecesitaría ver el blog donde lo tienes puesto para saber cuál puede ser el problema.
ResponderEliminarhttp://www.forourbanos.blogspot.com el fondo ya salio solo que la imagen sale cortada me podrias ayudar?
ResponderEliminarCambia el tamaño de la imagen un poco más chico para que se ajuste al contenedor, en el código tengo especificado en negrita el área donde se modifica eso.
ResponderEliminarSaludos.
Gracias sigue igual al reducir la imagen pero opte por retirar mejor la imagen gracias!
ResponderEliminarmuy buen truco! pero mi duda es, si no hay alguna posibilidad de que sea desplegable, es decir, que diga "[+/-] Acerca del autor" y se despliegue hacia abajo.
ResponderEliminarMira esta entrada, sigue el primer paso, luego justo antes del código del paso #1 de esta entrada agrega esto:
ResponderEliminar<a href='javascript:void(0)' onclick='Effect.toggle("acercade","slide"); return false'>▼▲ Mostrar / Ocultar</a><div id='acercade' style='display: none;'>
Y al final del código de ese código agrega esto otro:
</div>
Con eso se podrá expandir y contraer.
muchisimas gracias por la ayuda!
ResponderEliminaren seguida lo pruebo!
Excelente Potro esta muy bueno el truco, te tengo una pregunta: Como hacer para que solo se muestre cuando se haya clickeado el "leer más"?
ResponderEliminarSaludos!
Hola Mathias,
ResponderEliminarPara que se muestre sólo en las entradas individuales encierra el código que pegaste en el paso #2 entre:
<b:if cond='data:blog.pageType == "item"'>
y
</b:if>
¡Saludos!
Funciona!
ResponderEliminarmuchas gracias por la ayuda
Wow!! otro "detalle" mas que hace profesional a un blog. Especialmente para "vender tu imagen". Por ejemplo, supongamos que tienes un blog sobre moda, y en ese lugar puedes decir "bla bla bla soy asesor de moda desde 1996..etc etc etc"
ResponderEliminarUn abrazo!!!
Claro, con un poco de suerte y hasta salen algunas contrataciones para los bloggeros. Le diré a Katty que lo ponga en el blog :D
ResponderEliminarNo no, con ella no, sino tendrá muchos pedidos y no tendrá tiempo para nosotros :P jajajajajajaja
ResponderEliminarUn abrazo!!!
y para ponerlo como estaba ?
ResponderEliminarSólo elimina lo que has puesto y pega de nuevo el código que se menciona en el paso #1
ResponderEliminarmuy bueno potro, intentare implementarlo lo antes posible.
ResponderEliminarhttp://www.comunidadbloggers.com
Excelente artículo, ahora recién lo encontré, hace bastante tiempo que odiaba a WordPress por tener esa opción, ahora sigo odiando a WordPress pero a la vez, amo a Blogger!
ResponderEliminar¡Saludos desde Chile!
Younes Elazizi, seguro te quedará muy bien :)
ResponderEliminarRoster, jajaja, alguna vez también envidié a Wordpress por poder hacer eso, quizá esa "envidia" fue la que me llevó a hacer que los que usamos Blogger podamos tener algo tan lindo como ellos.
Tengo una duda... Yo utilizo el "More" de Blogger, y quería saber, cómo ocultar este cuadro y que aparezca dentro de la entrada y no en la página principal... Por favor, El Potro... Ojalá encuentres algo, me avisas!
ResponderEliminarSaludos!
Mira el comentario #83, ahí está la respuesta ;)
ResponderEliminarVerdad, ya lo publiqué y anda a la perfección... www.tapadon.cl
ResponderEliminarSaludos!
Hola men...!!!
ResponderEliminarestoy empezando con esto de los blog's y gracias a ti he modificado el mio bastante bien...!!!
pero no se como hacer para que al escribir un comentario en mi blog, en vez de verse mi nick, salga una imagen personalizada...gracias
Entra en Configuración > Comentarios, y en donde dice '¿Mostrar imágenes de perfil en los comentarios?' déjalo en 'Sí'.
ResponderEliminarSi con eso no se muestran entonces sigue las indicaciones que explica ChicaBlogger:
http://chicablogger.com/blogger-permite-que-muestres-tu-avatar-en-los-comentarios/
Si men, eso lo enviendo, pero si te fijas...en este mismo blog en tu comentario sale tu avatar y al lado derecho: El Potro dijo...
ResponderEliminarcomo se puede hacer para que salga una imagen chica al lado derecho del avatar y reemplazase a: El Porot dijo...
y se vea solo la: "imagen" dijo...
no se si me explico bien...jajaja...gracias
Nunca lo he hecho pero podrías probar expandir los artilugios y buscar esta línea:
ResponderEliminar<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
Eso que está en negrita debes cambiarlo por el código de la imagen. De funcionar toma en cuenta que todos los comentarios tendrán la misma imagen que elijas.
Oye Potro...te pasaste...!!!
ResponderEliminarme imagine que por ahi podria hacer el cambio, pero no tenia idea de como hacerlo ni exactamente que poner...!!! asi que cambie data:comment.author por img src="URL imágen" y quedo perfecto...puse algo de mi gusto...!!!
quizas a alguien mas le interese y podrias hacer una entrada con este contenido...gracias nuevamente
Hola Potro ya lo realize solo queria preguntarte si se podria justificar el contenido dentro de esa targeta. (:
ResponderEliminarClaro, en el código que va antes de ]]></b:skin> agrega esto:
ResponderEliminar.acercadelautor p {
text-align: justify;
}
Hola Potro!
ResponderEliminarque debo agregar para enlazar redes sociales al final?
como por ejem.
Puedes seguirnos en wtitter y facebook
muchas gracias
y otra pergunta...como hacer para correrlo hacia la izquierda ya que me queda pegado al borde derecho-
ResponderEliminarla consulta 104 esta solucionada
ResponderEliminargracias!
Hola el Potro, me gustaria saber cmo hacer que el cuadro completo de acerca del autor dea mas pequeño, con menos altura, saludos y gracias
ResponderEliminarHola Cocofansclub,
ResponderEliminarSólo usa el código normal para un enlace, por ejemplo, síguenos en <a href="http://twitter.com/usuario">Twitter</a> sólo cambia el nombre de usuario, para Facebook es igual, sólo remplaza la URL por la de Facebook.
Hola Rudymania,
ResponderEliminarDebajo de .acercadelautor { agrega esto:
width: 300px;
height:100px;
El primero es el ancho y el segundo es el alto, puedes modificar esos valores por otros hasta que quede al tamaño que deseas.
Gacias nuevamente, me quedo muy bien! ;). Saludos!
ResponderEliminarEspero y haya sido de tu entera satisfacción :)
ResponderEliminarGracias potro este add se le hace ver como mas pag warez a mi blog :D gracias!
ResponderEliminarQué bueno que ha sido de tu agrado!
ResponderEliminarMuy bueno, en cuanto lo he visto me lo he añadido, sigue asi!!
ResponderEliminarHola ElPotro, a ver si puedes ayudarme, que ya no se que probar...
ResponderEliminarLa zona donde pone PUBLICADO POR VINDI ...
solo quiero ponerlo en minúsculas Publicado por...
Este es mi blog, muchas gracias
http://elvigilantedeseguridad.blogspot.com/
Busca esta parte de tu plantilla y elimina lo que está en negrita:
ResponderEliminar.post-footer {
margin: .75em 0;
color:#ffff7f;
text-transform:uppercase;
ElPotro, no esperaba tan rápida tu ayuda, eres un fenómeno, ya he conseguido que aparezca en minúscula;
ResponderEliminarTe lo agradezco muchísimo, si algún día apareces cerca de mi ciudad, cuenta como mínimo con una merienda, ya supongo que Bilbao(España), te pilla lejos, pero el mundo es un pañuelo;
Un saludo amigo, ayudas a muchísima gente, gracias por ser así.
César (Vindi)
Muchas gracias Vindi, un día me apareceré por allá :D
ResponderEliminarPues no dudes en contactar conmigo
ResponderEliminarelvigilantedeseguridad@gmail.com
Un saludo ;)
Oye Mai, mi Avatar no se muestra.
ResponderEliminarinformaticoadicto.blogspot.com.
Gracias por tu Ayuda!.
No veo que lo tengas puesto, pero posiblemente has colocado mal la URL de la imagen.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarsi, lo que quiero es quitar la franja azul de fondo, creo que ese sería el problema.. pero ya me diras.. esque llevo buena parte de la tarde arreglando..
ResponderEliminarGracias de antemano!!!! y lo que sucede es que en mi otro blog de prueba si quedo bien http://diariosdecajon.blogspot.com/ pero me interesa el otro..
disculpame potro de verdad las entradas eliminadas de arriba, mi lap se puso muy lenta y se me caia el sistema a cada rato, por lo que ponia comentarios a medias y se mandaban asi, y después elimine..
ResponderEliminarte felicito por los muy buenos tips que nos das, y que cuando me preguntan por una pagina para su blog, de inmediato los direcciono para aca..
De donde sacaste las imagenes de ejemplo de Cindy y Manuel¿? Esque llevo tiempo buscando una pagina donde crear una imagen de perfil chula como las de JC y Alejo.
ResponderEliminarGracias y mi blog es http://estelapuk.blogspot.com
liznieves, saludos, para eliminar el color de fondo solo hay que quitar esta parte del codigo:
ResponderEliminarbackground:#EFFBFB; /* Color de fondo */
♥ Lollipop ♥, los hice en este sitio: http://www.manga.com/content/avatar-face-maker
Hola Potro, hace tiempo puse esto en el blog y la verdad es que me encanta. Lo que pasa es que me gustaría que no apareciera en las páginas estáticas. ¿Sabrías como decirme para configurarlo?
ResponderEliminarTe mando la que estoy aún editando: http://planescaping.blogspot.com/p/razas.html
Como bien puedes ver, aparece "Escrito por..." al final, lo cual rompe un poco con el ambiente de bitácora. Si me dices como quitarlo (pero sólo para esto, no para el resto del blog) te lo agradecería mucho.
¡Saludos!
Encierra el código del paso 2 entre:
ResponderEliminar<b:if cond='data:blog.pageType != "static_page"'>
y
</b:if>
Saludos.
¡Muchísimas gracias! Funcionó.
ResponderEliminarHola Potro tengo un problema en el segundo administrador el cuadro aparece arriba y no envuelve el texto + el avatar aqui puedes verlo:
ResponderEliminarhttp://compartiendo-archivos.blogspot.com/2011/01/mf-epica-design-your-universe.html
Atte. GRACIAS
Oh disculpa por hacer doble post otro problema k tuve es de como hago para que después del nombre quede un espacio, linea completa o punto aparte ya que sale junto no como en tu ejemplo.
ResponderEliminarHola América,
ResponderEliminarTal parece que es debido a que el cierre </div> no está colocado al final del código sino al inicio. Revisa de nuevo para cerciorarte que el </div> que está en azul esté al final.
Para darle una separación puedes agregar debajo del código esto:
<br />
O si lo prefieres puedes hacer que esa separación sea una línea, en ese caso agrega esto:
<hr />
Saludos.
Gracias Potro me ayudo mucho ya arregle esos 2 problemitas!
ResponderEliminarSaludos
Hola!
ResponderEliminarAunque puse el codigo adicional para que el recuadro no salga en las páginas estáticas... no funciona.
El recuadro sale en TODAS las páginas, pero ahora sin el borde ni el color de fondo.
Por qué será??
Hola Malvina,
ResponderEliminarSeguramente hay un error en el código que has puesto. Debe quedar así:
<b:if cond='data:blog.pageType != "static_page"'>
<div class='acercadelautor'>
<img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>
Muchisimas gracias!
ResponderEliminarHabía entendido mal y puse los códigos condicionales con los de la configuración estética del cuadro :-P
Gracias por la paciencia :)
Gracias a ti por visitar la Ciudad y por no quedarte con la duda :)
ResponderEliminaroh vaya!! batalle para ponerlo en mi blog, pero ya quedo xD... gracias por el post esta genial...
ResponderEliminarLo bueno es que al final todo ha salido bien. ¡Saludos!
ResponderEliminarHola Potro, por aquí de nuevo he realizado el truco y se ve en cada una de las entradas no en 1 entrada sola mira:
ResponderEliminarhttp://el-blog-de-pruebas.blogspot.com/
Ademas se ve mal en el post-footer, lo probe incluso en el post-footer-3 y tambien se ve mal, queria agregarlo despues de la fecha y esas cosas.
Atte gracias he realizado muchos mas trucos tengo una gran blog gracias a ti!
Hola América,
ResponderEliminarNo me queda muy claro el primer problema, supongo que te refieres a que quieres que no se vea en la portada sino al ingresar a la entrada, si es así mira el comentario #137.
Por lo otro que mencionas es el diseño de tu plantilla, quizá quitando lo que has puesto antes de ]]></b:skin> podría hacer que se adapte más al estilo de tu plantilla.
Saludos!
Esta muy buena la idea pero no hay forma de que resulte en nuestro blog =(. No sé que es lo que va mal, si lo he hecho tal cual tu lo señalas.
ResponderEliminarHola Libro Adictas,
ResponderEliminarVeo que en el segundo paso sólo has puesto esto:
<div class='acercadelautor'>
</div>
Pero no veo el resto, es decir, la imagen y el texto de la biografía que debe ir dentro
Hola, gracias por contestar, pues si lo he puesto.
ResponderEliminarDe echo somos dos autoras, entonces he puesto esto lo que decias de agregar más de un autor. Pero no me funciona.
He vuelto a revisar una y otra vez que estará mal en mis codigos o en qué fallé, pero no hayo nada distinto a lo que señalas
Espero tu ayuda... :)
Saludos
Posiblemente en el nombre del autor está fallando (si es que estás usando el código para dos autores), prueba hacerlo primero como se indica que sería si fuera sólo un autor. Si todo sale bien entonces seguro el error está al poner el código para dos autores.
ResponderEliminarDe cualquier forma te agradecería me dijeras cuál es la plantilla que usas para hacer una prueba ahí y ver si es un problema con la plantilla o con la colocación del código.
Saludos.
networked blogs para agregar seguidores de blog con facebook y poner una pagina del blog en facebook lo recomiendo he aqui un blog que encontre en facebook http://profesoreregonzalo.blogspot.com en la sidebar en la parte de abajo aparece
ResponderEliminarOla Potro sabes este truco me gusta mucho , pero quiero saber si al añadir bastante codigos afecta al rendimiento de mi blog ??, Digamos afecta al tiempo de carga del blog??
ResponderEliminarGracias :)
Hola LJK,
ResponderEliminarCualquier elemento que agregues al blog es otro contenido más que el navegador tiene que leer. Obviamente hay de elementos a elementos, en el caso de este es sólo una imagen pequeña y un breve texto así que no debe interferir con la velocidad de carga del blog.
Saludos.
Gracias aplicare este trucos :) , por cierto sabes podrias darme algunos tips sobre mi blog ??
ResponderEliminarhttp://saintkeane.blogspot.com/
Quiero aligerar el tiempo de carga o no se a tu opinion esta bien o mal??
Prometo no tardar mucho en publicar lo de cómo aligerar la carga del blog, de ahí podrás tomar unas ideas que quizá quieras aplicar ;)
ResponderEliminar¡Saludos!
Ola potro ya me anime a instalar el truco pero , me sale centrado hize todos los pasos, excepto el primero porque no lo encontre.
ResponderEliminarhttp://saintkeane.blogspot.com/2008/05/naruto-manga-dd.html
Como ves si , mi imagen descuadra el share que tengo mas abajo desplazandolo.
Atte. LJK
Como podria solucionarlo Grax
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola LJK, entré q tu blog y parece que ya lo has resuelto. Saludos.
ResponderEliminarhola!! oye potro! tengo un incoviniente es que he púesto esto en mi blog pero somos dos administradoras y los temas aparecen todos con uno solo... no aparece el segundo autor, porq?
ResponderEliminarops!! ya lo arregle xD!! gracias de todas maneras.. y muchos saludos ! ;D
ResponderEliminarGracias potro por tomarte tu tiempo en respondernos amigo
ResponderEliminarSaludos lizeth002 :)
ResponderEliminarHola potro sera que se puede poner mas abajo, por lo menos para que no se vea en todas mis entradas resumidas... mira mi blog a ver que se puede hacer.
ResponderEliminarmi bloges : http://tutoxpc.blogspot.com
Gracias potro por leer mi comentario!
Hola .:R.G.F:.,
ResponderEliminarSi usas entradas resumidas quizá convenga que sólo se vea en las entradas individuales por razones de estética.
Mira el comentario #10 para que veas cómo hacerlo.
Saludos.
Hace mucho lo buscaba gracias :)
ResponderEliminaro que bien gracias!!!, pero sabes Potro no me aparece al cuadro con color no se porke y eso que copie tal cual el código de los colores y eso :(
ResponderEliminarmira http://www.bebloggera.com/2011/08/lindas-campanas-colgantes-para-adornar.html
Hola LMM,
ResponderEliminarEs porque te has eliminado una llave de cierre en el código anterior. Mira esta entrada para que detectes el error:
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Muchas gracias Potro, te pasaste.
ResponderEliminarXD ni me fije
atte LMM
HOla potro, soy yo de nuevo fijate como quedo, cada vez que agrego a un autor se agrega esas barritas del mismo color del box, y en nuestro blog somos mas de 10 blogueras habran 10 de esas barritas como las elimino , aca el link http://www.bebloggera.com/2011/08/el-fantasma-de-lo-que-fui.html
ResponderEliminarListo ya me di cuenta de mi error olvidate del post xD
ResponderEliminarGracias
Hola Potro, gracias por tu post me ha sido muy útil. Pero tengo una duda con él, el comentario sobre el autor (osea yo) está debajo de los otros items del post (mi blog) incluyendo del linkwithin. ¿Cómo puedo colocarlo inmediatamente después del post y antes de todas las otras cosas.
ResponderEliminarHola Roberto,
ResponderEliminarPrueba ponerlo inmediatamente después de <data:post.body/>
Hola potro,
ResponderEliminar¿Cómo podría poner una imagen de fondo detrás del avatar y la descripción en vez de un fondo de color liso?
Hola William,
ResponderEliminarSólo cambia esto:
background:#EFFBFB; /* Color de fondo */
Por esto:
background:url(URL de la imagen);
Gracias como siempre Potro =)
ResponderEliminarBuenas!
ResponderEliminarEstaba probando el código para el template Liquid de btemplates http://btemplates.com/2011/blogger-template-liquid/
Y por más que modifico el código, no me aparece el recuadro con esa información.
Si pudieras ayudarme con ello te estaría muy agradecido.
Gracias por adelantado!
Buenas noches Noroduil, ¿en cuál blog lo has puesto?
ResponderEliminarEn http://endless-odyssey.blogspot.com/ cuando puedas lo echas un vistazo y me comentas.
ResponderEliminar¡Gracias por adelantado!
Pero en ese blog no lo veo puesto. Es necesario que estén todos los códigos puestos para que pueda ver qué puede estar pasando.
ResponderEliminarEstimado potro, todo bien observo los cambios pero cuando intento colocar el código para que no se vea en la pagina principal sino en los post individuales por esto de el "leer mas" me bota un error y no me permite guardar nada.
ResponderEliminarVerifica que pongas el código correctamente, es posible que al ponerlo estés eliminando algo o te esté faltando un fragmento del código.
ResponderEliminarTenias razón potro, ahora funciona perfectamente gracias.
ResponderEliminarTe queria también preguntar por este hilo como podria hacer para que en las vistas individuales de los post la imagen del mismo cambie por un cuadro de publicidad al momento de dar click en "Leer más"
He visto eso en algunas webs y me parece interesante.
Gracias.
Una consulta adicional porque no puedo ver el avatar en las entradas, en mi perfil de blogger lo veo perfectamente.
ResponderEliminarOk, ya se arreglo lo de la foto. Gracias
ResponderEliminarQue la imagen cambie no sé, pero sí puedes poner anuncios como AdSense y que sean sólo visibles en las entradas individuales y no en la portada del blog:
ResponderEliminarhttp://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html
Mira te paso la web donde al hacer click para leer la entrada completa cambia la imagen a publicidad. http://haganegocios.com/
ResponderEliminarSaludos.
Puedes hacer lo mismo que te dije, poner un anuncio que sólo sea visible en las entradas. Y en la portada usar un Leer más, pero tendrás que elegir qué imagen mostrar en el resumen, de esta forma esa imagen sólo se verá en la portada, pero no en la entrada, en la entrada sólo se verá el anuncio.
ResponderEliminarGracias por este excelente aporte, tengo una duda... aprendí que para modificar el nombre del autor tengo que cambiar esto pero tengo un problema como se modifica para la versión móvil de blogger, ya que tengo varios blogs y modifico el nombre del autor pero cuando visito la pagina desde mi celular me aparece el mismo autor para todos, cual será el código que se debe de modificar para la versión móvil de blogger? Gracias.
ResponderEliminarJuan Francisco
Hola Juan Francisco,
ResponderEliminarPara versiones móviles nunca lo he intentado pero, si revisas tu plantilla deberás ver que los mismos códigos aparecen dos veces; uno es para la plantilla "normal" y otro es para los móviles, si también lo pones en el otro podría resultar que funcione, aunque como te digo, nunca lo he hecho y no podría asegurarte que funcione ya que aun cuando tenemos acceso a los códigos para móviles, Blogger controla casi toda la apariencia.
Saludos.
Se le pueden poner bordes redondeados al CSS?
ResponderEliminarPor supuesto, sólo hay que agregar debajo de .acercadelautor { esto:
ResponderEliminarborder-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
Me quedó mejor con 10px, yo solo agrege border-radius:20px; los demas hacen lo mismo no?
ResponderEliminarTodos hay que cambiarlos, unos son para un navegador y otros para otros, si lo cambias sólo en uno entonces en los demás navegadores se verá con el otro valor.
ResponderEliminarNo, pero yo digo que los otros no hacen falta ponerlos directamente. Supuestamente todos los navegadores deberian reconocer el border-radius para no tener que andar poniendo uno para cada uno
ResponderEliminarEn teoría sí, pero si alguien usa un navegador que no esté actualizado no verá los bordes.
ResponderEliminarAlguna vez vi en Vagabundia un script que detectaba el navegador del usuario, no recuerdo bien cómo funcionaba, pero ahí lo puedes buscar y ver qué posibilidades tiene.
ResponderEliminarMuajjaja, pues.. ya que me decías que querías verme antes de enero.. xD aquí estoy jajaja.
ResponderEliminarEn uno de mis blogs somos 4 publicadoras y se me ocurrió la genial idea de que en la caja de cada una de nosotras fuera de un color diferente.
Mi idea fue ponerle un " div class" a cada una de nosotras, así que para la prueba puse un " .acercadelautor2 " con el background en rojo y a las autoras 2 y 4 les dejé el mismo "div class" que a mi.
http://imageshack.us/photo/my-images/13/sinttulotjh.png/
El resultado se acerca a lo deseado, pero no es bueno U_U
Otra idea que se me ocurrió fue hacer tablas.
Fuera de la tabla dejé el código que esconde todo esto para que no se vea en la pág incial del blog y el "div class" con el color rosita que le tengo ahora mismo y le apliqué color a cada una de las celdas.
Esto se parece más a lo que quiero (ya que al menos.. solo aparece 1 recuadro U_U)
http://imageshack.us/photo/my-images/440/sinttulofoa.png/
Para mi desgracia, siempre queda a la vista las lineas de las demás publicadoras.
¿se te ocurre a ti otra solución?
un saludin :)
Ummm, quizá como le hiciste primero, asignar a cada una una clase con sus estilos independientes. Y para que éstos no se vean cuando esté en x autor entonces puedes agregar ahí mismo la indicación de que no se vea. Es decir, debajo de:
ResponderEliminar<div class='acercadelautor'><b:if cond='data:post.author == "Autor 1"'>
Poner esto:
<style>
.acercadelautor2 {display:none;}
</style>
De esa forma cuando esté en el autor1 no se verá nada del autor2, al menos en teoría debería funcionar... en teoría.
lo probaré y ya te contaré que tal. gracias.
ResponderEliminarInvento probado ¿sabes que? perfecto, el invento ha quedado perfecto. Ahora tendré más contentas a mis niñas ^^
ResponderEliminarEres muuu bueno y a mi me queda aun un pelín mas... de aprendizaje de html xD
Muchas gracias.
Excelente nenna, qué bueno que le atinamos :)
ResponderEliminarPotro, ante todo me disculpo si ya te lo preguntaron pero cuando dentro del texto de descripción del autor intento poner un link a twitter me saca error, hay alguna forma específica de agregar un link? yo uso esto
ResponderEliminarSiguela @Pabela
jajaja Potro, eres mágico porque me puse recién a intentarlo de nuevo y ahí sí me quedó! jaja perdón. Resuelto!
ResponderEliminar