Iconos por categoria en cada post | Oloblogger En las bitácoras, está bastante generalizado el uso de imágenes acompañando el texto de las entradas. Como nos gusta que cada imagen tenga r...

18 de septiembre de 2008

Iconos por categoria en cada post

En las bitácoras, está bastante generalizado el uso de imágenes acompañando el texto de las entradas. Como nos gusta que cada imagen tenga relación con el tema, pues no tenemos más remedio que irlas añadiendo "a mano".

Ahora bien, para cierto tipo de diseños, puede ser interesante ilustrar el comienzo de una entrada, con una imagen tipo icono. Esta imagen sería fija para todas las entradas que, por ejemplo, tuvieran la misma etiqueta (categoría). Al tiempo, servirían de enlace rápido a cada categoría. Como segunda opción, también podemos diseñar otro tipo de imágenes más grandes y acompañar nuestros post con ellas de manera fija, pero en función de la etiqueta temática. En una entrada anterior, ya se vió como hacer una imagen fija para cada post.


Para conseguir esto de manera automática, se puede utilizar la misma idea que explicamos anteriormente para colocar imágenes personalizadas para cada autor en un blog colectivo. Habría que colocar este código antes del </head>

<!-- IMAGENES POR ETIQUETA -->
<script type='text/javascript'>
function imagenetiqueta(etiqueta) {
imagenes = new Array();
imagenes[0] = &quot;&quot;
imagenes[1] = &quot;<img src='URLimagenETIQUETA1' style='float:left;display:block;border:solid 1px;' title='Categoría: ETIQUETA1'/>&quot;
imagenes[2] = &quot;<img src='URLimagenETIQUETA2' style='float:left;display:block;border:solid 1px;' title='Categoría: ETIQUETA2'/>&quot;

if (etiqueta == &quot;ETIQUETA1&quot;)
{document.write(imagenes[1]);}

if (etiqueta == &quot;ETIQUETA2&quot;)
{document.write(imagenes[2]);}

}
</script>

Las URLimagenETIQUETAX y ETIQUETAX, tienen que ser sustituidas por vuestros propios dibujos y etiquetas, respectivamente. Una vez más, tened cuidado con poner el nombre de las etiquetas literalmente, teniendo en cuenta mayúsculas y minúsculas. Si contienen acentos u otros caracteres, copiar la palabra con todos los símbolos que aparecen en la barra de direcciones, cuando se accede a una categoría desde el enlace. Por ejemplo, Diseño = Dise%C3%B1o
Más adelante (con los artilugios expandidos), buscamos el sitio dónde queremos colocar los iconos e insertamos:
<div style='height:40px;'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagenetiqueta(&quot;<data:label.name/>&quot;);</script></a></b:loop></div>

La altura en pixels (40px) del DIV, habrá que cambiarlo por la que tengan vuestras imágenes.

Para una sola imagen, esta última parte del código tendría que ser de esta otra manera, pero sólo cogería la primera etiqueta que leyera. Además, el STYLE del SCRIPT presentado en primer lugar, tendría que ser adaptado para que se "encajara" en el texto, quitando las etiquetas <div> y </div>

<div style='height:40px;'><a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagenetiqueta(&quot;<data:label.name/>&quot;);</script></a></div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

55 comentarios :

  1. hola amigo mio, te tengo puesto en blog recomendados desde casi comenzar el blog porque al ser un usuario novel necesitaba de buenos consejos para asesorarme. tu lenguaje es ameno y a pesar de ser un catatulfo en esto de la informatica no tengo ningun problema para comprenderte.
    por ahora tengo el blog lleno de trastos (yo soy muy excesivo en todo) pero me imagino que como solo llevo una semana enseguida hare una criba y ayudado por tus conssejos todo ira mejor.
    bueno, no te canso más te mando un afectuoso saludo y la total garantia de que volvere a visitarte tantas veces como te necesite o quiza solo para ver un blog ameno y muy bien escrito.
    un abrazo desde cantabria. jose

    ResponderEliminar
  2. Te agradezco mucho la visita a mi página pero, sobre todo el que me hayas ayudado a mejorarla de la manera que a mi me gusta: sin que tubieras obligacion de hacerlo, simplemente por el gusto dfe ayudarme. he seguido tus indicaciones y tienes mucha razon la pagina carga mas rapido..
    al otro lado del cable tienes un amigo. lo digo en serio agradezco muchisimo tu consejo.
    jose, torrelavega, cantabria.
    mi correo es: venecia2_2hotmail.com/ si tienes el de gmail es : venecia44@gmail.com

    ResponderEliminar
  3. Hola, estoy buscando una información en tu blog:

    me gustaría saber cómo poner en un blog pestañas con las distintas categorías. Debajo del baner, m gustaría tener una seie de botone donde se leyeran categorias para que la gente pinchara y accediera directamente. Por ejeplo: inicio, cine, mi ciudad, etc.

    Gracias!

    ResponderEliminar
  4. Gracias, me pasaré por el primer, porque yo lo que quiero es una barra horizontal.

    ResponderEliminar
  5. Que tal, primero agradeciendo la ayuda que brindas a nosotros los novatos, y con una pregunta, como podria hacer para poner los iconos debajo del titulo del post en vez del texto, sin que se desplacen hacia abajo, pues ya logre ponerlas en la sidebar, solo me queda ajustarlas bien para que encaje con el texto de la categoria, que es la que tiene el link, pero para el post, yo no quiero mostrar el texto, sino la imagen de la categoria, que ya logré que sea a la vez el link a la categoría, pero lo que todavia no puedo lograr, es que se ajuste a un lado del texto categorias, pues me las desplaza hacia abajo, incluso ya utilice el padding, margin y todos los css, que me podrian ayudar a acomodarla, pues cuando es una sola, no hay problema, pero cuando es un post que entra en dos o más categorias, es cuando viene el problema, ojala me puedas echar una mano, y espero haber explicado bien mi problema, gracias.
    Nos vemos...

    ResponderEliminar
  6. Nikite, he visto tu blog pero no entiendo dónde quieres poner los iconos.

    Veo que sale el título del post y debajo la palabra CATEGORIAS. En la misma línea, a continuación de esa palabra, se ven los iconos. No veo nada en la barra lateral y tampoco observo que se desplacen hacia abajo.

    Aclárame un poco dónde los quieres poner y cómo.

    Otra cosa la página, tarda bastante en cargar y no sé si será por los gifs animados que tienes de fondo o porque tienes muchos gadgets instalados. Echale un vistazo.

    ResponderEliminar
  7. Que tal, agradeciendo que te hayas tomado el tiempo de darte una vuelta, y ver a que me referia, supongo que no viste las imágenes, pues ayer estaba muy cansado, y regrese el blog a un backup que tenía, pues ya estaba muy cansado y preferí dejarlo para hoy, a lo que me refería era, que utlizando el script que pusiste, yo lo adapte a mi blog, y queria que en la sidebar, mostrara los iconos de las categorías, pero sin link, y a un lado el nombre con el link, hasta ahi, no hubo problema, solo me queda ajustar los iconos con el texto, pero en el título del post, abajo aparece la categoría y en vez de texto, puse el icono, que es donde está el link, el problema, es que las muestra desplazadas hacia abajo, y no a un lado del texto categorías, debajo del título del post, lo que descuadra mi imagen que está centrada, y lo que tu viste seguramente, fue una prueba que había hecho para mostrar los iconos pero con css, y ahí el problema, es que si pones el puntero sobre el icono, tiene el link a la categoría, pero no muestra lo que se llamaría el title de la categoría, cosa que no hay problema con el script, pues ya viene integrado el title y cuando pones el puntero, te muestra el nombre de la categoría, que es como quiero que quede, ojalá me haya explicado mejor, y ojalá que puedas ayudarme, pues la ventaja del script, es que ya viene todo integrado, la desventaja, es que no puedo usar padding o margin para los iconos, pues si un post entra en dos o más categorías, encima los iconos, incluso lo intenté con display:inline, pero sigue el mismo problema, al parecer es que toma cada icono como imagen independiente, y no he encontrado la manera de alinearlos, por eso pedí tu ayuda, haber si me puedes echar la mano, pues veo en tu blog que los iconos, incluso están juntos, hasta ya intenté una mezcla con los dos, y traté de modificar el script, para que solo mostrara el title, pero como viene con img, al mostrar los post de la categoría, me encima el icono con la imagen, aunque le haya quitado el link, pues como te digo es img, si pudieras decirme como hacer un script, que reconozca la categoría, y muestre el title correspondiente, con eso te estaría muy agradecido, y lo que mencionas del tiempo de carga del post, hice el test que hay en una página, y me marcó 8 segundos, y que lo mas tardado, era la imagen de cabecera, pero de todos modos, lo voy a checar, gracias, nos vemos...

    ResponderEliminar
  8. Nikite, sigo sin poder ver las imágenes de tu blog. No sé que pasa pero no se ven. Pero no me refiero sólo a los iconos que te preocupan, sino que tampoco se ven las imágenes que has puesto en los posts. Sólo veo la del post que se llama "Ya casi".

    Por decirte algo, aunque no puedo comprobar nada, tienes que saber que todo el código que se inserta en el lugar dónde queremos que aparezcan las imágenes, hay que ponerlo todo seguido, en la misma línea, sin saltos de línea. Ya te digo que no sé si será eso.

    Hoy la página carga algo más rápida. Sería mi conexión...

    ResponderEliminar
  9. Que tal, perdon por no responder antes, pero sali de vacaciones, y olvidé mi lap, bueno, para hacerlo más sencillo de entender, ya dejé las labels mostradas con el problema que tengo, muestra los iconos y ademas el nombre de cada categoria, y como verás, los iconos los muestra en la parte de abajo, lo que mueve mi imagen centrada, ojalá ahora si ecplique bien mi problema, viendolo ya directamente, gracias, nos vemos...

    ResponderEliminar
  10. Perdon por lo de ecplique, era explique

    ResponderEliminar
  11. Pues, yo también ando con mi PC fastidiado, pero veo que mi tardanza hace que al final arregles las cosas por ti mism@. Lo veo bien tanto en IE como en Firefox.

    Solucionado ¿no?

    ResponderEliminar
  12. Hola Oloman, me mola mucho tu blog y quería llevar a cabo un menu con iconos como el que tu tienes debajo de la cabecera para luego aplicar el truco de esta entrada, he mirado tu código fuente y lo he aplicado en un widget con mis iconos de superlopez arrastrandolo despues abajo de mi cabecera pero en vez de salirme los botones en horizontal me salen en vertical hacia abajo,
    con seis o siete botones me funciona pero a la hora de querer poner dos lineas de 10 la cosa se complica, que puedo hacer?

    Te mando un email con el codigo que he usado uno en "div" y otro en "tabla" a ver si me puedes hechar una mano y decirme en que fallo.

    Gracias y Felices Fiestas.

    ResponderEliminar
  13. En eso tienes razón, al final uno tiene que aprender por sí mismo, pero se te agaradece la enorme ayuda que brindas a nosotros los novatos, y viendo algunos de los trucos que has puesto, voy a poner algunos que me llamaron la atención, gracias, nos vemos...

    ResponderEliminar
  14. ¡No sabes cómo me gusta SuperLópez Espineli! Uno de mis comics favoritos aunque hace tiempo que no leo ninguno.

    Lo del menú superior con botoncitos, también me dió a mí más problemas de la cuental. Lo que pasa es que no tuve ganas de complicarme y lo solucioné utilizando una tabla.

    No he recibido el correo que dices, pero si lo haces de esta misma manera, sólo tienes que tener cuidado de redactar todo el código seguido, sin saltos de línea, porque a veces eso da problemas y la tabla se te va a hacer puñetas.

    Felices Fiestas

    ResponderEliminar
  15. Superlópez tambien es de mis favoritos ya te habrás dado cuenta (por mi blog hehe) la putada es que solo conservo 2 comics originales, uno la terrorifica historia de los petisos... y el otro Tyranosaurus sect.

    Bueno en fin la verdad es que sobre los iconos al final ayer estuve hasta las tantas de la madrugada como loco y dije juas me voy a dormir y hoy ya mas despejado lo he conseguido mirando el código fuente tuyo de una entrada de "Rollover" que mas abajo salia lo que yo buscaba osea "Onmouseover y onmouseout" que me ha venido de perlas, la verdad es que el que busca encuentra juas, bueno amigo.
    Año!!

    Por cierto tu blog es la ostia lo tienes super "maqueao". Chao :D

    ResponderEliminar
  16. Pues no te creas que estoy muy contento. Llevo como un mes dándole vueltas a cambiar toda la plantilla, pero me da una pereza...

    De hecho esta tarde estaba pensando poner una encuesta para los lectores, a ver si con un par de votos negativos me animaba. Pero resulta que lo mismo me decían que estaba bien y entonces me daría más pereza.

    Estoy en contra de las jodidas modas y, por tanto, de la estética 2.0, pero al final voy a tener que sucumbir.

    Por cierto, te he mandado un correo personal, cuando puedas (para después de Pascuas si eso) me dices algo.

    Saludos.

    ResponderEliminar
  17. Hola Oloman, en la segunda parte dices que hay que colocar otro código con la plantilla de artilugios expandida y que busquemos donde queremos ponerlo y jaja, yo en este mar de palabras no sé donde ponerlo...¿sería en la parte de posts? Yo quisiera ponerlo igual que lo tienes tú, los iconos a lado del título del post. Saludos...

    ResponderEliminar
  18. Seraphinprincess, busca en tu plantilla <div class="post-header-line-1'/>

    Tendrás que quitar la barra de cierre y dejar la cosa así:
    <div class="post-header-line-1'>
    CODIGO DE MARRAS :D
    </div>

    ResponderEliminar
  19. Gracias :D, y ya que estoy quisiera saber como poner mas artilugios uno a lado de otro en ese bloque que esta abajo de lo que sería el cuerpo de la entrada sin que se apilen uno encima de otro. Gracias por tu ayuda ^^

    ResponderEliminar
  20. Para eso, tendrás que meterlos dentro de un mismo gadget html/javascript. Cuando los añades de manera independiente, por narices se apilan.

    Dependiendo de los códigos que pongas, puede que tengas que que "encerrarlos" en DIV's independientes, uno con STYLE="FLOAT:LEFT;" y el otro con STYLE="FLOAT:RIGHT;", por ejemplo.

    Otra alternativa es meterlos dentro de una tabla.

    ResponderEliminar
  21. Antes de nada me gustaría agradecerte la enorme labor que haces ayudando a todos los que, como yo, estamos algo perdidos en esto de modificar los blogs. Mi blog (el cual estoy construyendo ahora) tiene como dirección http://blogtriforce.blogspot.com/
    Estoy intentando que aparezca el mandito de Wii al lado del título del post que tiene la etiqueta "Wii", pero me sale debajo. ¿Dónde he de colocar el código que das arriba para que salga al lado del título, igual que en tu blog?

    ResponderEliminar
  22. Pjehmaster, lo tendrías que poner justo antes de
    <h2 class='post-title entry-title'>

    ResponderEliminar
  23. Mil gracias! Funciona perfectamente, pero ahora el problema es que aparece por detrás del título del post, y no al lado como en tu blog. Además, la imagen viene rodeada de un marco más oscuro que hace que ésta no se integre en el cuadrado del título del post. Una vez más, muchísimas gracias. Cuando comience mi andadura con el blog te pondré en la sección de "Blogs amigos".

    ResponderEliminar
  24. Buenas de nuevo, he conseguido quitar lo del borde de la imagen. Ahora me falta saber cómo "empujar" el título del post para que no tape el mando de Wii. Te agradezco mucho tu ayuda.

    ResponderEliminar
  25. Parece que ya lo solucionaste añadiendo un float:left ¿no es así? :)

    ResponderEliminar
  26. Oloman, he investigado todo lo que he podido (hay muchas cosas que no entiendo todavía sobre los códigos de blogger) y no consigo solucionarlo. En mis dos ordenadores se ve el mando de Wii DETRÁS del título del post, y lo que quiero es que salga la imagen (o imagenes) a la izquierda y el título al lado. Exactamente como lo tienes en tu blog. Por cierto, no me extraña que te dieran el premio de 20 minutos porque es que no parece ni un blog, está genial.

    ResponderEliminar
  27. No estoy seguro porque las cosas las hago por el método de ensayo-error, pero creo que te sobra el display:inline;

    De todas formas insisto en que yo ahora mismo lo veo en su sitio tanto en IE(8) como en Firefox.

    ResponderEliminar
  28. ¿Se te ve bien? He quitado lo que me has dicho y no se me ve bien :S Tengo que probar en otros ordenadores. Muchas gracias por tu ayuda, de verdad. Un saludo!

    ResponderEliminar
  29. Pues ahora sí que lo veo mal y sin embargo sigue estando el display:inline. Prueba a quitarlo del escript o a sustituirlo por un display:block.

    ResponderEliminar
  30. Lo he probado con block y quitando el 'display' del script. He de quitarlo/cambiarlo en el campo de , ¿verdad? Si es así, ya lo he hecho y no funciona bien

    ResponderEliminar
  31. Sí. Actualmente lo tienes sin ningún display y se vuelve a ver bien.

    La prueba

    ResponderEliminar
  32. Muchísimas gracias! Debe ser cosa de mi navegador. Mañana me meteré en el blog desde otros ordenadores para verlo. Luego comprobaré si funciona bien poner varias imágenes de etiquetas seguidas. Un saludo!

    ResponderEliminar
  33. te mande un mail de como lo puse en la plantilla.

    ResponderEliminar
  34. Los dos últimos códigos no van juntos. O pones uno u otro.

    El lugar dónde ponerlo depende de lo que quieras hacer, pero para hacerte una idea, prueba delante de
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>

    ResponderEliminar
  35. El primer código se pone justo antes del /head, personalizando las imágenes y los nombres de las etiquetas según se indica en la entrada.

    Luego, antes del condicional que te indiqué, es dónde tienes que poner el segundo. El tercero es un caso especial para mostrar un solo icono y sólo lo puse como alternativa al segundo.

    ResponderEliminar
  36. Empieza por instalar el código que llamas 1 (el script) antes de /head. Eso no altera nada la vista de tu blog. Luego inserta el que hemos llamado 2, tal cual, en el sitio dónde te dije.

    Si lo haces, aunque no funcione bien, podré ver qué es lo que ocurre.

    ResponderEliminar
  37. Paso a paso Dark. Fíjate que en la segunda mitad del código, se usan de nuevo los nombres de las etiquetas. En tu código, dónde pone ETIQUETA1, cámbialo por anime. Y mete algo de contenido en el post para verlo bien, que por no tener, no tiene ni título ;)

    ResponderEliminar
  38. Dark David, empiezo a pensar que te estás quedando conmigo, porque no has hecho siquiera el cambio que te dije en #45. Además de eso, tienes los posts comprimidos hasta en la página principal y sin verlo, casi que te diría que si no se ve nada, es porque ese truco está mal aplicado. Creo que lo mejor es que comiences desde el principio y vayas solucionando los problemas que te surjan uno a uno.

    ResponderEliminar
  39. Hola Oloman.
    Sigo tus consejos y trucos desde que entré a formar parte de blogger. Hasta ahora no había necesitado de tus servicios personalizados, pero he llegado a un punto de no retorno y estoy más que perdido por mucho que estudie los comentarios y soluciones.
    LLevo un par de días (o cuatro) empapuzándome los códigos y donde ponerlos y de momento he conseguido que las imágenes de las categorías salgan debajo del título del post y enmarcados.
    Bueno, pues me gustaría saber si puedo ponerlos a continuación del título (al otro lado de donde los tienes tú), quitarles el recuadro azul y por último, que al final de la entrada junto a comentarios, botones, etc... no salgan las etiquetas. Desde diseño las tengo desmarcadas pero aún así aparecen.
    Ya perdonarás por la brasa del comentario, pero ya comprenderás porqué no era el primero de la clase ;D
    Un saludo y gracias de antemano.

    ResponderEliminar
  40. Hola Tapestryworkerman.

    En cada etiqueta STYLE que acompaña a cada imagen en el script, cambia LEFT por RIGHT y la parte del BORDER la pones a cero:

    style='float:right;display:block;border:0px;'

    En realidad, desde esa etiqueta puedes añadir cualquier propiedad CSS que quieras.

    Sobre las etiquetas, lo más rápido para no tener que trastear mucho es añadir antes del cierre del SKIN, esta clase:

    /* ETIQUETAS INVISIBLES */
    .post-labels {display:none;height:0px;widht:0px;}

    La primera línea es un comentario para que puedas localizar rápidamente esa parte por si más adelante las quieres volver a poner. Simplemente borrando esas tres líneas, volverán a aparecer.

    ResponderEliminar
  41. Hola Oloman.
    Es cierto, lo tenía en el morro y ni me enteraba, lo que es la ignorancia, eh?.
    He conseguido cambiarlas de lado y quitar el recuadro, pero en la siguiente línea o por debajo del título (que tampoco me desagrada), pero mi intención es poner las categorías en la misma línea que el title... al puro estilo Oloman.
    Y cuando borro las etiquetas, borro las imágenes del título y no las etiquetas que hay al final de la entrada, seguramente no coloco "el borrador" donde debiera, ya me contarás donde ponerlo.
    Gracias por tu tiempo.
    Un saludo.

    ResponderEliminar
  42. Oloman disculpa las molestias T^T bueno aqui mi pregunta
    puse todo como dijiste!=D y para no preguntar lei los comentarios y en el de Seraphinprincess y era la misma que la mia y lo puse asi <div class="post-header-line-1'>
    CODIGO DE MARRAS :D
    </div> xD
    Y la cosa es que me sale asi D:!
    http://i864.photobucket.com/albums/ab205/kru-chan/FondoDP.jpg
    Bueno y yo quisiera que saliera como el tuyo xwx (lamento la copioneria D: es que queda lindo!)
    Y pues quisiera saber si no es mucha molestia x3!
    Amo tu pag ehhh sigue asi ;O!

    ResponderEliminar
  43. Entendido Tapestryworkerman. En lugar de meter el código que genera las imágenes (el segundo de esta entrada), tras <div class="post-header-line-1">, hazlo después de <h3 class="post-title entry-title">. Dependiendo de si en tu plantilla eso es un bloque con salto de línea o no, puede que haya que hacer algo más. Prueba y lo dejas para que lo vea si no funciona como quieres.
    Y sobre lo de las etiquetas, el código CSS (estilo), tienes que ponerlo antes de ]]></b:skin>. Ahí es dónde debe ir en Blogger.

    Astrid.L., supongo que quieres lo mismo que Tapestryworkerman, así que sólo tienes que ver estos últimos mensajes en los que le expliqué cómo hacer eso ;)

    ResponderEliminar
  44. Hola Oloman.
    Prueba superada, los iconos de las categorías los dejo debajo del title que también me gustan ahí, además es una bala en la recámara para cuando quiera cambiar de look.
    En cuanto a las etiquetas, por fin han desaparecido, eres un crack.
    Muchas gracias y hasta pronto ;)
    Un saludo.

    ResponderEliminar
  45. Hola! Queria aplicar una sola imagen , pero no entiendo muy bien lo que quieres decir, este es el texto:

    Además, el STYLE del SCRIPT presentado en primer lugar, tendría que ser adaptado para que se "encajara" en el texto, quitando las etiquetas ..etc

    Mil gracias de antemano por la ayuda!!!

    Un abrazo.

    ResponderEliminar
  46. Ipsum, lo de los div's era sólo para evitar que el texto quedara flotando con respecto a las imágenes. Prueba sólo a usar el último trozo en lugar del penúltimo y si no te gusta como queda, entonces es cuando tienes que añadir unos div's al estilo de cada imagen.

    ResponderEliminar
  47. Nose si esto tenga que ver con el post, pero quiero que me ayudes, mi blog es este http://astroymas.blogspot.com/ y me gustaria saber como ponerle imagenes a las entradas que no tienen (imagen) en la pagina principal, poniendole imagen por etiqueta. No se si sea posible. Estaré esperando tu respuesta.:)

    ResponderEliminar
    Respuestas
    1. Para lo que quieres habría que modificar bastantes cosas, pero si te conformas con mostrar una imagen fija cuando el post no tenga ninguna, eso es bastante rápido.

      Busca en tu plantilla esta dirección
      http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif

      ... y la sustituyes por una imagen a tu gusto de al menos 200x200px

      Eliminar
  48. ¡Muy bueno Olo!

    Tengo algunas dudas con esta parte del post:

    «Más adelante (con los artilugios expandidos), buscamos el sitio dónde queremos colocar los iconos e insertamos»

    No sé exactamente a qué te refieres =$ .

    Me preguntaba además si sería posible colocar estas imagenzuelas en la banda que enmarca los títulos de los post, por ejemplo en la parte derecha que se desperdicio.

    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Desde hace unos días tenemos nuevo editor con el que no hay que expandir artilugios, pero la segunda parte tiene la misma validez. Por ejemplo en tu caso lo quieres poner en el título de post. En ese caso tienes que insertar el código dentro de...
      <h3 class='post-title entry-title' itemprop='name'> ... </h3>

      ...justo antes del cierre h3. Luego tendrás que ajustar el CSS y dentro de ese style='height:40px;' tendrás que añadir probablemente un float:right;

      Eliminar
  49. Hola Oloman!
    He puesto los códigos sustituyendo el nombre de la etiqueta y la url de la imagen pero no consigo que aparezca en la entrada que le estoy asignando a la imagen. Estoy poniendo el segundo código bajo post-footer para simular la "descripción de autor" y que en bajo la entrada aparezca la fotografía de un autor. ¿Me podrías ayudar y decirme que parte del código está en el lugar errado?. Según yo he seguido todos tus pasos.

    Muchas gracias! hace años que sigo tus consejos siempre útiles

    ResponderEliminar
    Respuestas
    1. ya lo solucioné, gracias de todas maneras! :)

      Eliminar
    2. De nada :(
      Ahora mismo iba a ver este comentario tuyo y me encontré con el segundo.

      Eliminar