JMiur [E]

Esto es una idea loca y absurda pero no importa. Se trata de intentar reproducir alguna de las facilidades de Tumblr para crear contenido con cierta facilidad, seleccionando algún tipo predefinido.

En realidad, como las posibilidades son muchísimas, las variantes son demasiadas como para tratar de mostrarlas así que me basaré sólo en algunas de ellas. En este caso, me imagino que mi blog tendrá entradas normales y además, tres tipos de entradas especiales que quiero generar rápidamente, sin escribir mucho código cada vez que publico algo y, por supuesto, quiero que esas entradas se muestren de manera diferente a las demás; que en el home no tengan títulos visibles ni comentarios, que sean una especie de miniposts que agrego porque si, porque sólo quiero compartir algo.

Para no ser demasiado imaginativo, se me ocurre que esas entradas serán Citas, Imágenes y Audio.

Entonces, me voy a aprovechar del campo de enlace que me permite agregar Blogger en cada entrada si tengo marcada la opción en la Configuración. En ese cuadro puedo poner una URL que luego, tal como mostraba en la publicación anterior, podemos leer desde la plantilla.

Pero, esa URL no tiene limitaciones, nadie dice que deben ser URLs reales así que voy a usar tres diferentes, simplemente, para poder reconocerlas en la plantilla y condicionarlas:

  • cuando cree una entrada de tipo Citas, pondré: http://cita.me
  • cuando cree una entrada de tipo Imagen, pondré: http://imagen.me
  • cuando cree una entrada de tipo Audio, pondré: http://audio.me

Y el contenido será lo más simple posible; un texto, una etiqueta IMG, lo mínimo necesario y nada más.

Ahora, el tema es la plantilla así que me baso en al Mínima, expando los artilugios y busco <b:includable id='post' var='post'> que es donde está el LOOP que muestra las entradas. Voy a condicionar todo eso para separarlo en dos partes, la primera será la que mostrará esas entradas especiales y la segunda es la que mostrará las entradas de manera normal, sea la que sea:
<b:includable id='post' var='post'>
  <div class='post'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.link'>
      <!-- AQUÍ PONDREMOS EL CODIGO ESPECIAL -->
    <b:else/>
      <!-- AQUÍ DEJAMOS TODO TAL COMO ESTÁ YA QUE SON LAS ENTRADaS NORMALES -->
    </b:if>
  </div>
</b:includable>
Si guardase eso y no tuviera entradas con algún tipo de enlace agregado no pasaría nada y no habría cambios; si tuviera alguno, simplemente no lo vería ya que, todo lo que hemos hecho es condicionar la forma en que se ven las entradas y decirle a Blogger que si la entrada tiene una URL como vínculo, haga algo distinto a lo que hace con el resto de las entradas. Lo que nos falta, entonces, es decirle qué queremos que haga con cada una de esas entradas especiales y claro está, eso puede ser cualquier cosa.

No voy a hacer nada sofisticado, simplemente, voy a decirle que muestre la entrada en un DIV con una clase diferente a la que usa habitualmente:
<b:if cond='data:post.link == &quot;http://cita.me&quot;'>
  <div class='post-header'>
    <div class='post-cita'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

<b:if cond='data:post.link == &quot;http://imagen.me&quot;'>
  <div class='post-header'>
    <div class='post-imagen'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

<b:if cond='data:post.link == &quot;http://audio.me&quot;'>
  <div class='post-header'>
    <div class='post-audio'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>
Por supuesto, todo eso se puede simplificar mucho más pero, basta como ejemplo.

Ahora, nos falta el CSS:
<style>
  /* las citas */
  .post-cita {
    color: #555;
    font-family: Times New Roman;
    font-size: 40px;
    letter-spacing: -1px;
    margin: 50px 0;
    text-align: center;
    text-shadow: 3px 3px 2px #CCC;
  }
  /* las imágenes */
  .post-imagen {
    text-align: center;
  }
  .post-imagen img {
    background-color:#CCC;
    border:4px double #EEE;
    padding:10px;
  }
  /* los audios usando un reproductor externo */
  .post-audio {
    -moz-box-shadow: 0 0 20px #000;
    background-color: #CCC;
    margin: 50px auto;
    padding: 10px 0 6px;
    text-align: center;
    width: 350px;
  }
</style>
Y ahí terminamos. Hay un demo online donde puede verse el ejemplo funcionando pero, en realidad, como decía al principio, hay muchas alternativas que podrían utilizarse dependiendo de las cosas que quisieramos mostrar.

24 comentarios:

obernardoo  

Hola JMiur! Genial el Blog.. Pregunta..Este método que propones, se podría hacer "filtrando" con las etiquetas?

Responder
Graciela  

Menos mal que se te ocurren ideas!

Responder
Dr. Victor Guillermo Pagé Hernandez  

Hola JMiur. Yo quisiera saber si esto se puede aplicar a los títulos expandible ya que quisiera que se vieran con otro aspecto, han quedado muy separados y se ven muy pocos, si me pudiera recomendar algo se lo agradecería enormemente. Saludos http://www.saludintegraldelamujer.com/

Responder
JMiur  

obernardoo:
Advierto que nunca propongo nada, sólo miro y muestro lo que miro. Sí. también puede hacerse con las etiquetas pero allí, las condiciones son más engorrosas de manejar.

Graciela:
Es l oque pasa cuando uno está aburrido :D

Dr. Victor Guillermo Pagé Hernandez:
No sería necesario hacer algo así. Én ese blog, los títulos que no se muestran es porque aparentemente, la entrada no tiene título. Verifique eso antes que nada y si falta, agréguelo y actualice la entrada; eso no tarerá inconvenientes, la URL de las entradas no cambiará.
La distancia entre títulos, puede ser modificada con CSS pero, debe condicionarla para que no afecte al resto de las páginas. Por ejemplo, podría poner algo así antes de </head>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style> .post {margin-bottom:0;} </style>
</b:if>
</b:if>

para eliminar el margen inferior en ese tipo de páginas que es lo que hace que se separen tanto.

Responder
Miguel  

Seria posible usar el campo Enlace para ponerle tu mismo la URL a la entrada o pagina?

Responder
JMiur  

Si te refieres a crear una URL no.

Responder
GOCASE  

Hoja JMiur, hace rato no entraba por aca y veo una maravillosa forma de resumir tus entradas, me refiero al sistema que estas usando donde se ve la primera entrada completa y las siguientes con una especie de leer mas me muestras como lo hiciste???

Mil gracias !!!

Responder
Dr. Victor Guillermo Pagé Hernandez  

Hola, muchas gracias por responder, dio resultado se ve mejor lo único que son muy pocas entradas, deberían verse mas, hay alguna forma de arreglar eso, o me recomendarías hacer algo diferente para que se vea mejor, pudiera tener un pequeño fragmento del post se pudiera hacer eso sin afectar las entradas de la pagina principal. Gracias, disculpa tantas molestias.

Responder
Aviber  

Hola Jmiur:eres una fuente inagotable de originales y nuevos recursos.MI duda es: ¿el div se coloca en donde dices y el CSS va antes de /head?.Gracias desde ya

Responder
JMiur  

GOCASE:
Eso está explicado en estaras tres entradas: 1 | 2 | 3

Dr. Victor Guillermo Pagé Hernandez:
Poder puede hacerse; el problema es que para eso, debría modificarse todo el script que es el que ahora muestra las entradas de esa manera y habría que cambiar el código de la plantilla.

Aviber:
El CSS sí, va antes de </head> como siempre. No sé a qué DIV te estás refiriendo.

Responder
Aviber  

JMiur:me refiero a que donde dices:

se coloca:
class='post-header'>
class='post-cita'>......................
.......
......


¿Es correcto?
gracias

Responder
JMiur  

Sí. Esa parte puede ir así exactamente, tal como está en la entrada; todo lo que hace eso es mostrar el contenido del post.

Responder
3rn3st0  

Aún cuando este post tiene más de un año, me pareció una buena opción para implementar en mi blog. Seguí las instrucciones al pie de la letra, usando, eso sí, sólo el bloque que corresponde a las citas (lo que en realidad me interesaba), sin embargo el resulto fue nulo. El post se sigue viendo como cualquier otro, no sé si sea por los cambios en la interfaz de Blogger. El campo de vínculo va acompañado ahora por otro campo para declarar el tipo MIME, ahí coloqué "text/plain" pero no sirvió de mucho.

Te agradecería cualquier ayuda que puedas prestarme al respecto. Saludos desde Venezuela :-)

Responder
JMiur  

¿Tienes algún ejemplo de lo que has hecho o intentado hacer?

3rn3st0  

Éste fue el bloque de código que modifiqué...

div class='post hentry uncustomized-post-template'>
a expr:name='data:post.id'/>
b:if cond='data:post.title'>
h3 class='post-title entry-title'>
b:if cond='data:post.link'>

b:if cond='data:post.link == "http://cita.me"'>
div class='post-header'>
div class='post-cita'>
data:post.body/>
div style='clear: both;'/>
/div>
/div>
/b:if>



Y en la sección "otros" de la nueva configuración active el combo que dice "Habilitar enlaces adjuntos", la cual, imagino, es el cuadro que mencionas en el cuarto párrafo del post.

3rn3st0  

Casi lo olvido, eliminé el símbolo ">" del código puesto que el sistema de comentarios me daba error con la etiqueta DIV.

JMiur  

Así como lo muestras, da la impresión de haber un error ya que todo está en un IF:

<b:if cond='data:post.title'>
........... etcetera
</b:if>

y debería ser distinta:

<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.link'>
<b:if cond='data:post.link == &quot;http://cita.me&quot;'>
<div class='post-header'>
<div class='post-cita'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:if>

<b:else/>
<!-- AQUÍ DEJAMOS TODO TAL COMO ESTÁ YA QUE SON LAS ENTRADAS NORMALES -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
.............. etcétera
</b:if>
</div>

3rn3st0  

Veo que no coloqué todo el bloque y eso se presta a confusiones.

Esta vez lo colocaré entre las dos etiquetas H3 y podrás apreciar en detalle dónde está ubicado el código. Hago la aclaratoria porque ciertamente el código empieza en un IF, pero si te fijas, está dentro del bloque que mencionas en el tutorial (o eso creo).

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<!-- Código nuevo -->
<b:if cond='data:post.link == "http://cita.me"'>
<div class='post-header'>
<div class='post-cita'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:if>
<!--
<a expr:href='data:post.link'><data:post.title/></a>
-->
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Si te fijas, tengo una línea encerrada entre etiquetas de comentario, ése es el código original de la plantilla.

Igual recibe mi agradecimiento por tu amabilidad y por tomarte el tiempo para aclarar este enredo que tengo montado :-)

JMiur  

Eso es distinto :-)

Ahí, la estructura es correcta, en todo caso, sólo me queda la duda de saber como afecta el H3 envolviendo todo pero no viene al caso.

Entonces, si no se muestra nada, daría la impresión que data:post.link queda vacío, que Blogger no lo detecta; si tuvieras un ejemplo online me puedo fijar y verificarlo.

Es posible que el problema surge en los nuevos editores donde aparece la obligacion de colocar el MIME Type aunque, en lo personal, hubiera puesto lo mismo que tú: "text/plain"

Probaría con text/html

3rn3st0  

Probaré y te cuento. ¡Gracias! :-)

3rn3st0  

Tiro la toalla JMiur, no logré hacerlo :-(

Responder
Bonzu Pipinpadaloxicopolis III  

Llegué a este post por lo de mostrar citas. ¿Hay alguna manera de mostrar varias citas al azar en un gadget de la sidebar, JMiur (que se muestren cada vez que se recargue la página)?

JMiur  

Si, claro, puede hacerse con JavaScript. No sé cuál es la idea pero, algo genérico y muy simple:

var frases=new Array();
frases[0]="una frase";
frases[1]="otra frase";
frases[2]="y otra frase";
var alea=Math.round(Math.random()*3);
document.write(frases[alea]);

Responder
Bonzu Pipinpadaloxicopolis III  

Gracias JMiur, funciona muy bien. Ni más ni menos, eso era lo que deceaba :-D.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR