JMiur [E]

Hay muchísimas formas de mostrar los post de manera resumida; no sólo hay variantes usando scripts sino que también podemos definir en qué páginas se mostrarán resumidos.

Para responder a varias inquietudes, aquí comienza la explicación del método que utilizo aunque, en realidad, el primer paso es modificar el encabezado de las entradas para manipular la fecha de manera segura y no tener que estar lidiando con ella.

El LOOP de Blogger es la parte del código de la plantilla donde se muestran las entradas y se encuentra dentro de un INCLUDABLE [Ver/Ocultar Código Original [+]
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>

Es my largo porque está lleno de cosas que por lo general no usamos así que lo simplificamos un poco para quedarnos sólo con lo fundamental y tratar de entenderlo:
<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
</b:includable>
Eso que vemos como b:loop es un bucle. Blogger recorre la lista de entradas (tantas como hayamos establecido en la Configuración) y ejecuta otra parte, otro INCLUDABLE; por último si es una página individual, le agrega los comentarios. La forma en que se mostrarán los post es lo que se encuentra en ese otro INCLUDABLE así que lo primero que vamos a hacer es interceptar esa parte, es decir, en lugar de mostrar las entradas, vamos a agregar alguna condición para que sólo se ejecute en determinados casos y en otros, se ejecute otro código personal. Esto, no es otra cosa que una variante del hack que muestra tanto en el blog de Gem@ como en El escaparate de Rosa y que es el llamado PeekABooPost.

¿Qué condición pondremos? Eso puede variar, y en este ejemplo haremos lo mismo que hace PeekABooPost: el home se mostrará normal pero las páginas con listas de entradas (etiquetas, navegación, archivos) se mostrarán resumidas:
<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='ResumenPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
</b:includable>
Y justo debajo de </b:includable> agregamos nuesto nuevo INCLUDABLE:
<b:includable id='ResumenPost' var='post'>
<!-- aqui luego pondremos el nuevo código -->
</b:includable>
Si ahora viéramos el blog, tanto el home como las entradas individuales no tendrían cambios pero ninguna página con listas de entradas mostraría algo así que sería hora de agregar nuestro código personal:
<b:includable id='ResumenPost' var='post'>
<table cellpadding='0' cellspacing='0' class='post-resumen'><tbody>
<tr>
<td rowspan='2'>
<h3><a expr:href='data:post.url'><data:post.title/></a></h3>
<p class='txt-resumen' expr:id='&quot;resumen-&quot; + data:post.id'/>
</td>
<td class='celdaderecha'>
<span class='lafecha-resumen' expr:id='&quot;fecha-&quot; + data:post.id'>
<script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script>
</span>
</td>
</tr>
<tr>
<td class='celdaspan'>
<a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>[+/-]</a>
</td>
</tr>
</tbody></table>
<div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id'>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
</div>
<script type='text/javascript'>resumenPost(&#39;<data:post.id/>&#39;);</script>
</b:includable>
Tratemos de entender todo eso que parece tan engorroso porque es la mejor manera de poder personalizarlo y armar cualquier otro modelo.


En la columna de la izquierda de la tabla colocaremos el titulo de la entrada y su resumen al que lo mostramos como un párrafo.

En la parte superior de la columna derecha irá la fecha que se mostrará usando un script que la descomponga (el mismo que usamos para las entradas normales) y debajo, un enlace que ejecutará otra función de JavaScript para expandir y contraer el post oculto.

Fuera de la tabla se ubica el post normal pero oculto y por último la llamada al script que resumirá la entrada.

La mayor parte de las etiquetas tienen un atributo class que nos permitirá personalizar cada sector y a varias de ellas les colocamos un ID único para poderlas identificar y decirle al script dónde debe escribir o qué elementos debe modificar.

Pongamos entonces el script antes de </head>:
<script type='text/javascript'>
//<![CDATA[

// RESUMEN POSTS
function resumenPost(idPOST) {
var divAuxiliar = "dummy-" + idPOST;
contenido = document.getElementById(divAuxiliar).innerHTML;
resumen = contenido.replace(/<[^>]+>/g,'');
longitud = 150; // máxima cantidad de caracteres a tener en cuenta para resumir la entrada
var auxiliar = resumen.split(" ");
var nueva ="";
for(var i=0; i<auxiliar.length; ++i) {
nueva = nueva.concat(auxiliar[i]) + " ";
if(nueva.length > longitud) {break}
}
resumen = nueva +"...";
var spanResumen = "resumen-" + idPOST;
document.getElementById(spanResumen).innerHTML = resumen;
}

// PERMUTAR ESTADO
function toggleResumenPost(cual) {
var elpost = "dummy-" + cual; 
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}

//]]>
</script>
Lo que faltaría es el CSS así que lo agregamos antes de </b:skin> y ahí deberemos usar nuestra imaginación:
.post-resumen { /* tabla post resumidos */
border-bottom: 1px solid #444;
height: 100px;
margin: 30px 0 0;
padding: 0 0 0 10px;
width: 410px;
}
.post-resumen:hover {background-color: #000;}
.post-resumen td {position: relative;}

.post-resumen td.celdaderecha { /* la celdas con la fecha */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: #333;
text-align: center;
vertical-align: top;
width: 60px;
}
.post-resumen td.celdaspan { /* la celda con el enlace */
background-color: #333;
text-align:center;
vertical-align:top;
width: 60px;
}

.post-resumen h3 { /* el título de las entradas */
color: skyBlue;
font-family: Lucida Grande,sans-serif;
font-size: 20px;
font-weight: normal;
margin: 0;
}
.post-resumen h3 a {
color: skyBlue;
font-family: Lucida Grande,sans-serif;
font-size: 20px;
font-weight: normal;
text-decoration: none;
}

/* la fecha de las entradas */
.post-resumen span.lafecha-resumen {text-align: center;}
.post-resumen span.lafecha-resumen .lafechaDia {font-size: 24px;}
.post-resumen span.lafecha-resumen .lafechaMes {font-size: 14px;}
.post-resumen span.lafecha-resumen .lafechaAnio {font-size: 12px;}

/* el post resumidoen si mismo */
.txt-resumen {color: #CCC; margin: 5px;}

/* el enlace para expandir yy contraer */
a.toggleresumenpost {
color: #87CEEB;
font-size: 12px;
text-align: center;
}
a.toggleresumenpost:hover {color: #FFF}

/* el post normal oculto */
.post-oculto {
border-bottom: 1px dotted #333;
display: none;
margin:30px 0;
padding-bottom:15px;
}

157 comentarios:

Emerald  

Hola JMiur!!
parece que la fecha o los códigos que tenía se han enredado! cuando entré hoy a mi blog una aplanadora había pasado por ahí. :) se le ha cambiado la configuración con que la tenía, le arreglé un poquitín pero me sigue apareciendo "undefined" bajo ella, y no sé encontrar lo que produce esta palabrita dos veces!!
Me podrías ayudar?
el script tiene problemas, ya que tbm se le cambió el color y el tamaño.Uffff :S
Muchas gracias, JMiur

Responder
Emerald  

Sorry sorry JMiur!! ya se solucionó solito :) son los duendes de blogger supongo porque trasteé un poco y ya está bien! Gracias!!
Siempre me digo a esta hora de la noche no tocar la plantilla jaja
Un abrazo

Responder
Gem@  

Que buena explicación J.Miur, probaré después con calma en el blog de pruebas porque mi plantilla está tan modificada que miedo da expandirla :D

Responder
Anónimo  

está muy bien, ahora solo me queda editar el CSS

Responder
Anónimo  

Un momento JMiur, me acabo de dar cuenta de que cuando le das a expandir no se exapnde, bueno espero tu respuesta, mi blog es http://laplataformaazul.blogspot.com y cuando se solucione ya editaré el CSS

Responder
Deybi  

El problema que tengo es con el link para descargar la plantilla de pruebas. No funciona.

Responder
JMiur  

LuzdeLuna: parecería que ayer hubo un problema general con eso y ya se solucionó. Por suerte, no me di cuenta :D

Gem@: No deberías tener problemas en adaptarlo al esquema que usas pero, cualquier problema avise :D

Raul: Hay un error de transcripción del script. Dice:
for(var i=0; i
y debería decir:
for(var i=0; i<auxiliar.length; ++i) {
En el ZIP está el XML, de allí es más sencillo copiar el código.

Responder
JMiur  

Deybi:
Pareceque Fileden está en mantenimiento así que lo he subido a SkyDrive para que lo descargues.

Responder
Emerald  

:) tal parece que blogger me quiere enloquecer!jaja, bueno, si queres no te cuento asi esta noche se soluciona y no lo ves! :D
no toco naaa, mejor me voy a dormir tranki y que la aplanadora se solucione sola, me pregunto si todas las noches tendré la misma sorprecita?
Un besote JMiur

Responder
JMiur  

LuzdeLuna:
Esta vez lo vi :D
La fecha se muestra con este formato: 16 octubre 2009
o sea, cada dato está separado por espacios. Verifica si eso has colocado en la Configuración.

Si es así, sólo cambia esta parte del script del Calendario:
var lafecha = cual.split('-');

por esto:
var lafecha = cual.split(' ');

De esa manera, en lugar de separar cada dato por los guuiones, lso separará por los espacios.

Responder
planck956  

Me parece una forma muy buena de presentar el blog, muy al estilo "periodico". Solo una cosita, a mi entende, también deberia tener un enlace al numero de comentarios y un link a estos. Si no, la unica forma para ver los comentarios es dandole al enlace. Si expandes, ves el post completo, pero no sabes si esa entrada tiene comentarios, el numero de comentarios y debes entrar en el post para comentar.

No se si me he explicado, para comentar y ver comentarios la unica forma es entrado en cada pagina de post individual.

Saludos¡¡

Responder
Anónimo  

Hola JMiur, he intentado arreglarlo como me has dicho y se expandia correctamente pero la fecha la mostraba mal, ya tengo otro script para la fecha en forma de calendario, pues cambié el script mil veces me fijé en el xml del zip y era totalmente distinto así que ahora no me muestra las entradas, está fatal ojalá me puedas ayudar, si quieres te paso una plantilla que guardé pero es de hace tiempo, yo solo quiero que me muestre las entradas como estaban antes, por lo menos para poder volver a intentarlo porque ahora no se ponerlo como estaba y si uso la plantilla que tengo guardada me borrará algunos gadgets y scripts porque es ya de hace bastante tiempo, o por lo menos dime que tengo mal en la plantilla yo creo que quité todo lo relacionado con resumen post, el CSS, el Script y he sustituido lo de los posts por el de la plantilla antigua y tengo unos líos en el blog que yo lo único que quiero es que todo sea como antes

Responder
Emerald  

Gracias JMiur! al cambiar blogger mi fecha, (estaba con el mismo formato q vos tenes, pero ya no me aparece en configuración)tomaba todo como el dia (tamaño, color) y desconocía mes y año. Ya le cambié en el script y quedó perfecto, claro hasta que los duendes decidan que ese formato de fecha tampoco viene mas!! jajaj
Un abrazo

Responder
JMiur  

planck956: Pués, eso no es problema, cada uno le pude agregar lo que quiera, basta mostrar el footer de los posts, comentarios, etiquetas, como se quiera.

Raul: Hazlo pero no se sí encontraré el problema porque no sé que has hecho.

LuzdeLuna: Todo esto es raro. Me parece más un error de Blogger que un cambio. Hay cosas que están funcionando mal como los avatares y me da la impresiñon que todo debe ser parte del mismo problema. Uno serio, por cierto :D

Responder
Anónimo  

Gracias a tu correo lo he solucionado JMiur, pero ahora veo otro problema (esto no va a acabar nunca :() parece que en algunas entradas la fecha sale bien pero en otras en lugar del mes pone undefined, es raro que en unas si y en otras no

Responder
Jano Pérez P.  

gracias X la ayuda Jmiur todavia no he tenido muy buenos resultados pero creo q con tiempo lograre mi cometido gracias por tu ayuda tio te has pasado :D

Responder
JMiur  

Raul: Lo de las fechas es un problema general. Mira esta entrada

Jano: Paciencia, mucha paciencia :D

Responder
Anónimo  

Lo he intentado en un blog de pruebas pero nada :(( te dejo el link para que veas cual puede ser el problema http://blogdepruebas-quirocidios.blogspot.com/
Gracias

Responder
JMiur  

Pués allí está, fíjate, por ejemplo en esta página. El problema es que tienes los posts duplicados, se muestran reducidos y al a vez, se muestran expandidos. Eso debe ser porque hay un error en la parte del:
<b:includable id='main' var='top'>

Así, online, no podría decirte esxactamente cuál es porque eso sólo puede verse en la plantilla misma.

Responder
Anónimo  

Bue.. está bien
gracias, voy a ver que hago.

Responder
Neko  

¡Me sirvio de mucho!, solo me quedo una duda, JMiur ¿será posible combinar esto y darle efectos con Scriptaculous al momento de desplegar el post?, de momento lo intente y no he logrado hacerlo :(

Saludos, leo desde hace tiempo tu blog, me he animado a comentar :)

Responder
JMiur  

Neko: Sí, no hay problema, podría hacerse; depende de cuál efecto quieras usar. Por ejemplo, podría ser Toggle. Habría que ver cuál es el código que colcacs porque en Blogger se hace complejo el uso de comillas. Si me muestras un ejemplo, podríamos probar.

Responder
Gem@  

La tercera vez que lo intento hoy J.Miur jajajaja que desmadre de plantilla tengo.
Como sabes añadí el PeekABooPost pero es que antes había añadido uno de esos sistemas de Read More paa expandir y recoger las entradas ¡qué error más grande!! añadir esas cosas cuando con unas simples líneas lo podemos hacer en cualquier parte :)
El caso, que ese sistema de Read More también va añadido en b:includable id='main' var='top.
Así que imagina la ensalada de códigos jajaja pero sigo probando, por aquí ando :D

Responder
JMiur  

Ohhhhhhhhh sí. Lo mejor es penzar desde una plantilla limpita porque no es dificíl de armar pero hay que hacerlo con cuidado ¡Destruí tantas, Gem@ !!!!!!!!! :D

Responder
Neko  

De Nuevo yo, pués probé usando el efecto "slide", pero creo que mi sintaxis me quedó un poco mal, las comillas me revuelven y no logro que funcione.

Me basé apartir de un tutorial que encontre en otro blog:
elescaparatederosa.blogspot.com/2009/04/efecto-deslizante-slide-para-entradas.html

En otro de mis blogs, donde tengo funcionando el "PeekaBoopost", dicho efecto me funciona :X

Responder
JMiur  

Tendría que ver el código exacto tal cual lo colocas y si estuviera online, mejor.

Responder
Renzo  

Hola JMiur, e usado tu plantilla que dejaste en la tercera parte de esta entrada y esta funcionando todo bien, hubiera quedado con la mia pero no me salio, y me simplifique la vida usando la que dejaste para descargar jeje.

pero con eso surgieron unos problemas, el primero, no hay ni un link para agregar comentarios, no lo veo por ninguna parte y se me a hecho dificil poner el formulario de entradas.

Lo segundo como alguien dijo por aquí esta genial mostrar las entradas resumidas de esta manera, pero al expandir la entrada no se muestra la parte de comentarios, cuantos tiene o para agregar uno, y si pudieras ser mas expecifico en como agregar el link de los comentarios cuando se expande la entrada, me harías muy feliz :O:$

bueno por ahora solo eso, aquí te dejo mi blog de pruebas por siacaso
ojala me respondas :(

http://pruebafechas1.blogspot.com/

PD: e tratado de ponerle el formulario para comentarios incrustados a continuacion del poste, pero no e tenido exito como te puedes fijar :(

Responder
JMiur  

Pués, como dije, la plantilla sólo es un modelo y como tal, resumido. En esa plantilla no hay una serie de cosas tales como comentarios pero, pueden restarurarse, basta copiarlas de cualquier otra y reemplazarlas. Por ejemplo dice:

<b:includable id='comment-form' var='post'/>

así que habría que cambiar es línea por el INCLUDABLE original que puede tomarse de cualquier otra:

<b:includable id='comment-form' var='post'>
.......
</b:includable>

Poner el footer o cualquier otra cosa tambien es posible, hay que copiar todo el código que es bastante largo y colocarlo en el DIV oculto, tal como está en los posts normales:

<div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id'>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
<!-- y quie ponemos el footer -->
<div class='post-footer'>
..........
</div>
</div>

Responder
Renzo  

ok gracias :D

se podria desir que e acabado con el diseño de ese blog de pruebas, guarde el XML de la plantilla lo subi a un nuevo blog.

Y todo esta perfecto pero las fechas ya no se ven? alguna forma de arreglarlo? porque los codigos estan ahi?
no se puede pasar el xml de una plantilla a otra?

y si algo pasa como lo arreglo plis !

mira :http://ultimapruebafriends.blogspot.com/
pase el xml de la otra plantilla lista a esta(que tenia otro diseño)
y las fechas no se ven :$ :-|

Gracias por la respuesta :)

Responder
Anónimo  

¿Y esto reduce el tiempo de carga de la página principal? ¿Mucho o poco? ¿O nada? ¿Más o menos que la opción "Leer más"?

Responder
Neko  

JMiur, perdona la demora no tenia internet, ya he logrado darles el efecto "toggle slide" a estos extractos de texto y me gusto mucho el resultado

¡Otra vez gracias por compartir esta manera de sacar extractos de texto con nosotros!

Responder
JMiur  

Renzo:
La fecha no sale porque debes configurarla con el formato adecuado tal como se ve en la primera parte de esta explicacióne Debería ser Formato de hora mes/dia/año

LeonardoN:
Depende. Algo oculto no reduce el tiempo de carga, sólo esta oculto pero está. Si "Leer más" se refiere al MORE, eso es más rápido pero, debería sumarse el hecho de tener que abrir el post así que un visitante tardará más tiempo en leer algo (abre dos ventanas). El tiempo de carga de un blog tiene mucho más que ver con el contenido que con estas formas de mostrarlo. En mi caso parece ser más rápido pero, en términos generales, diría que el efecto es neutro.

Neko:
Me alegro que resultara :D

Responder
...  

Fantástico post JMiur :D, fíjate que el único problema que encontré es a la hora de visualizarse en IE. Ya sabes con lo que IE es una por quería.:((

Mira el error que me muestra es este:

null or not an object

Trate de solucionarlo pero no encuentro el carácter erróneo. Te pido que lo cheques …
Pero en fuera de eso te felicito.:D

Un saludo…

Responder
JMiur  

No es un problema de IE. Lo mismo ocurre en Firefox.

Veo que el problema es que la fecha no está configurada correctamente: Formato de hora mes/dia/año. Fíjate en esta entrada.

También en la funcion del final.falta una llave de cierre:

function toggleResumenPost(cual) {
var elpost = "dummy-" + cual;
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}

Creo que con esos dos cambios, se solucionaría el problema.

Responder
enrique  

Una preguntita: ando buscando la manera de agregar un efecto deslizante cuando expandimos una entrada utilizando el "leer más", y también cuando la misma se cierra, es posible eso?
Muy agradecido por cualquier consejo. Saludo.

Responder
JMiur  

Si, eso es posible. hay que usar un script, por ejemplo, algo así funcioanría con Scriptaculous pero hay muchos más.

Responder
Jabba  

Hola J, llevo un rato dando vueltas por Vagabundia y la Red en búsqueda de una posible solución a una duda que tengo y no encuentro nada. ¿Sabes si sería posible hacer en Blogger un enlace a una sección determinada de un post? Es decir, que al pinchar en el enlace no nos lleve al comienzo del post sino a un párrafo determinado (una url del tipo #). No sé si tendrá algo que ver con aquello que te consultaba recientemente sobre el acceder directamente a un comentario en cuestión cuando uno pinchaba sobre el link del widget de comentarios recientes de la sidebar en lugar de ser direccionados al comienzo del post.

Con tanto rizar el rizo con algunos de mis comentarios, seguro que terminaré por aparecer en tu futura lista de lectores non gratos de Vagabundia :)

Responder
JMiur  

Jabba:
Sí, eso es posible, bastaría agregar algo así donde quieras que apunte:

<a name="ejemploJabba"></a>

siempre un name diferente si es que hay varios. Si eso se coloca en una entrada, entonces, cuidado al editar ya que se se pasa al modo Redactar, el enlace cambiará.

Aquí puse un ejemplo

el enlace es:
http://jmiur.blogspot.com/2008/07/las-necesidades-innecesarias.html#ejemploJabba

Responder
Jabba  

Como siempre impecable ;) . Funciona de maravilla. Imaginaba que habría que insertar algún código en la entrada para poder referenciarlo luego con # pero no tenía ni idea de cómo hacerlo. ¡Muchas gracias!

En otro orden de cosas, estoy preparando una visita a mi hermanita para el próximo año (tenía intención de hacerla en febrero pero creo que tendré que dejarlo para junio) y si la escala que hace el vuelo en Buenos Aires es lo suficientemente larga, que sepa que tendrá usted a un linuxero por tierras argentinas encantado de invitarle a una buena jarra de cerveza fría :p . Pero vamos, que como te digo queda mucho todavía :)

Responder
JMiur  

Me alegro que funcionara y veremos que nos depara el año que viene :D Cualquier cosa, nos tomaremos la jarra igual, aunque sea digitalmente :D

Responder
Maite  

Estoy intentando hacerlo pero no estoy muy concentrada, la verdad.
Antes de estropear algo prefiero preguntarte si "longitud = 150; // máxima cantidad de caracteres" es elección tuya o porque no admite más. Me gustaría que al menos me sacase un par de párrafos de cada entrada.
Y creo que voy a tener problemas con el "leer más" que tengo actualmente y que no uso porque daba problemas, tendría que quitar no solo el codigo de la plantilla sino el de cada entrada a la que puse los codigos correspondientes?
Gracias JMiur, me encanta esta presentación aunque no recordaba que la hubieses utilizado desde hace tantos meses! mira que he tenido que venir para atrás... ;) besos

Responder
Maite  

Estoy dándole vueltas a mi comentario anterior. Te comentaba que quiero mostrar un par de párrafos pero entonces se desplegaría y repetirían en resumen y en la propia entrada. Poco práctico.

Te pregunto entonces de otra manera, sería posible mostrar como tú la primera entrada completa, y luego hacer un tipo "leer más" con las demás entradas donde podamos seleccionar la cantidad de texto a mostrar, sin que sea un resumen a parte?
He visto la manera de contraer todas las entradas pero en ningún caso se expandía la primera. Espero haberme explicado bien, hoy tengo un día un tanto "espeso" jejeje :D

Responder
JMiur  

La longitud es a gusto del consumidor :D En este caso, dice longitud = 150; pero, puede ser cualquier otro valor. Ve probando hasta encontrar el que más te gusta, no hay límitaciones.

Para eliminar el leer más ese, que debe ser el mismo que utilizaba yo, un viejo hack, no hace falta modificar las entradas, basta quitar el script y el CSS correspondiente. Este sistema que es el que ahora uso, es perfectamente compatible con el leer más que agrego Blogger. esto l odigo por si quieres tener esa opción.

Cuando lo que muestras es sólo un par de párrafos, al desplegar, esos párrafos no se repiten o mejor dicho, en realidad, queda ese resumen visible y luego, debajo el post desplegado. Llegado el caso, podría oculatarse el resumen haciendo alguna moificacíon al script. Ahí ya es un tema subjetivo, tiene el estilo de lo que aquí se llama "copete" que es la forma en que se ve una noticia en un periódico, por ejemplo.

Si l oque quieres es, por ejemplo, que se vea el primer post completo pero del resto , sólo el título y la fecha, creo que bastaría eliminar el llamado a la función, es decir, no poner esto:

<script type='text/javascript'>resumenPost(&#39;<data:post.id/>&#39;);</script>

De esa manera, no habría resumen. Sólo un título, la fecha y un enlace para expandir y contraer.

Responder
MAI  

"Llegado el caso, podría oculatarse el resumen haciendo alguna moificacíon al script" :D ¿en serio? "nos" animamos entonces y lo hago? jajaja pero te necesitaré más que nunca!
yo me animo, lo voy a hacer en el blog de pruebas, pero quiero poner la primera entrada entera, y al menos dos párrafos en cada entrada resumida y que luego desaparezca el resumen al expandirla, ¿vale? cuento contigo para ese codigo extra??? porfa porfa porfa??? :D

Lo primero que voy a tener que hacer es separar todas las entadas por fechas, hay días que he hecho más de una.
Me pongo a ello :D gracias JMiur!

Responder
JMiur  

Adelante y veamos a donde llegamos :D

Responder
Maite  

Qué lio llevo JMiur... he hecho las dos entradas en tres blogs, uno de ellos desde la plantilla minima virgen, pero cuando hago esta segunda entrada tuya veo los mismos resultados que en la primera, es decir, no hay resumen.
Al final me he decidido a bajar tu zip y pensé que solo habías añadido el codigo de encabezado porque al visualizarlo no me sale las entradas resumidas, pero cuando he ido a añadir en la plantilla los codigos de aqui arriba me encuentro con que ya están incluidos!!! qué lio! :O yo no visualizo tu plantilla como debiera!
Para colmo he visto los resultados en los blogs de Renzo y Neko y me han encantado... me ha mirado un tuerto JMiur :P qué hago!

Responder
Maite  

Estoy mirando los codigos fuentes del blog de pruebas de Renzo, que él mismo te decía que le salían bien, y resulta que veo tras la orden de .post-oculto { una orden nueva .miniresumenpost que no encuentro en tus codigos. A ver si me he despistado y me falta hacer algun paso indicado en otra entrada... pero si ni siquiera me funciona la plantilla que te he descargado a ti no se cuál puede ser el problema. Lo mío son los expedientes X jajaja

Responder
JMiur  

Y cuál es el blog donde estás probando. Como en el caso de los comentarios, hay detaalles que no pueden verse online y sólo en laplantilla pero, por lo menos, para que pueda ver el resultado parcial.

Responder
Maite  

Lo que más me extraña es no ver los resultados instalando los códigos que tú nos ofreces en el zip. No quería liarte mirando plantillas pero ahora te mando las direcciones, gracias

Responder
JMiur  

Habrá que verla, Maite, no hay alternativas :)

Responder
Maite  

¿Sabes lo feliz que estoy desde que implantamos este truco? en dos días he podido revisar todas las entradas de manera comodísima (de no haber hecho el resumen ni loca me hubiera puesto a modificar ni arreglar cosas en las entradas, resultaba demasiado engorroso).
Quise preguntarte cómo sustituir el +/- por una imagen, como tú tienes, pero al final me gusta el estilo rudimentario :D
Lo que sí me gustaría es incluirlo al final de la entrada resumida, junto con el número de comentarios como lo tengo ahora pero por más que intento no atino con los codigos exactos o el sitio donde ponerlo. ¿Me echas una mano una vez más porfa?

Le veo un pequeñíiiiisimo inconventiente, y es que cuando expando una entrada resumida cuando se encuentra con el "leer más" en los casos que he necesitado ponerlo por la extensión del texto no muestra el contenido.

Creo que de la nueva plantilla no me interesa tanto el nuevo aspecto como lo práctico que ha resultado este truco incluso para mí misma!!!! estoy encantada. Ahora voy a incluir paginación tipo google, creo que es lo único que le falta para que resulte perfecta la consulta en el blog :D ayer me perdía con las flechas de anterior y siguiente porque tuve que marchar y volver unas cuantas veces al blog, y tuve que meter en favoritos la dirección de la página donde me había quedado, supongo que con esa paginación simplificaré mucho las cosas igualmente.

Bueno, pues eso, que estoy feliz :D gracias :D

Responder
JMiur  

El [+/-] sólo es un texto así que basta cambiar eso por una etiqueta IMG con la imagen que quieras utilizar:

<a class='toggleresumenpost' ............... href='javascript:void(0);'>
<img src='URL_IMAGEN' />
</a>

No entendí muy bien lo de incluirlo al final ¿QUieres que haya otro de esos enlaces para contraer y expandir debajo de cada post? El enlace que hace eso es el que te indico ahí arriba. Aclarame eso un poco :)

Responder
Maite  

Si, a lo que me refiero es que cuando expandimos uno de los resumenes vemos la entrada completa y debajo cuántos comentarios hay, lo incluí como información adicional. El caso es que quisiera que desde ahí abajo, junto a xcomentarios, saliese también ese codigo para poder contraer nuevamente la entrada. Me valdría con que pusiera simplemente "contraer" o algo similar. Pero no se en qué sección de la plantilla expandida tengo que repetir ese código ni qué lineas le corresponden exactamente.
He intentado incluir todo nuestro codigo personal de ResumenPost que has puesto ahí arriba (no me deja escribir la linea del codigo)pero no atino dónde ponerlo.

Lo de incluir la imagen me lo pensaré jejeje me gusta el +/- no se por qué... con lo feo que es jajaja

Responder
JMiur  

Lo puedes colocar ahi, en el footer mismo donde ahora ves la cantidad de comentarios ¿Esa parte logras identificarla? Bastaría colocar ese mismo enlace que te dije antes:

<a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>
CONTRAER
</a>

Responder
MAI  

Me ha costado ubicarlo porque estaba empeñada en ponerlo al lado de comments2, recuerdas? cabezona que es una :P. Estéticamente no me agrada demasiado, ya buscaré cómo hacerlo para que quede chulo, pero lo que sí me gustaría es que al contraer subiese hasta el resumen el cursor nuevamente, es posible hacerlo? Si la entrada es muy larga y contraigo me quedo en un punto muy bajo del blog y pierdo la referencia de donde estaba :S
Gracias... estoy va quedando cada vez más comodo :D
AH! puse la paginación tipo google y no veas lo práctico que resulta!

Responder
Maite  

Qué lastima JMiur, para ponerlo bonito he incluido una imagen con una flecha para contraer la entrada en el footer, pero la he tenido que quitar porque si es el caso de entradas que no llevan imagen propia me coge esa flecha por defecto y la muestra como imagen en la caja de resumen, que tiene toda la lógica por cierto... hay alguna manera de solucionarlo? :O

Responder
JMiur  

Sí, Maite, hay una forma. Primero lo fácil, a esa imagen que no quieres que sea mostrada, colócale una clase así:
<img class='nores' src='URL_IMAGEN' />
Esa clase se la puedes agregar a esa imagen y a cualquier otra que no quieras que sea mostrada como miniatura; tamto en la plantilla como en los posts.

Ahora, faltaría modificar levemente el script para filtrarlas. Fíjate que en el codigo dice esto:

if(listaImagenes.length>0) {
mostrarImagen = listaImagenes[0].src;
}

Cámbialo así:

for(var i=0; i<listaImagenes.length; ++i) {
if(listaImagenes[i].className!="nores" ) {
mostrarImagen = listaImagenes[i].src;
break;
}
}

Prueba a ver como funciona eso :D

Responder
Maite  

Pues funciona tan bien a la primera que hasta me ha dado la risa floja :D mezcla de satisfacción y de admiración porque nunca te he preguntado algo que no sepas hacer :D
Me apunto el dato de esa clase para cualquier otra imagen.
Una cosa más, lo que te comentaba antes, ¿podríamos hacer que al contraer la entrada el cursor subiese hasta la caja del resumen de esa misma entrada?

Responder
JMiur  

Si funcionó al primer intento, hay que desconfiar, debe ser un error :D

Lo de posicionarse, podemos intentarlo. Veamos, acabo de hacer la prueba en este blog. Seria ascí, primero, le agregamos un ID a la tabla que ahora dice:

<table cellpadding='0' cellspacing='0' class='post-resumen'>

de este modo:

<table cellpadding='0' cellspacing='0' class='post-resumen' expr:id='&quot;tabla-&quot; + data:post.id'>

Y por último, cambiamos el enlace de abajo, ese nuevo, ahí ahora dice:

<a ........ class="nores" href='javascript:void(0);'>Contraer entrada</a>

todo queda igual pero, en lugar de de href='javascript:void(0);' pondremos el enlace al ID de esa tabla, así:

expr:href='&quot;#tabla-&quot; + data:post.id'

Es un lio escribir esto pero, funciona bien :D

Responder
Maite  

"Funciona bien" es poco, funciona GENIAL! cuando se contrae se queda arriba en la pantalla, justo la primera de la lista de resumenes! ahora si que no me pierdo ni yo misma! había entradas tan largas que me quedaba abajo del todo del blog al contraer.
¿Lio para escribir? jajaja para mi no, que solo me has hecho copiar y pegar. Eres estupendo, muchísimas gracias.
Ahhh riamonos de nuevo y confiemos jejeje, que ha salido nuevamente a la primera! Un beso
(qué comoda ha quedado la luna, esto no tiene precio ni manera de agradecertelo).

Responder
JMiur  

Genial. Me alegro que funcionara y claro, te he copiado la idea :D

Responder
Maite  

Un honor :D

Responder
JMiur  

:D

Responder
kinokopowercdmx  

Hola JMiur!
Sabes tengo una duda, en realidad esto me ha funcionado de maravilla, lo del "resumen post" pero ahora que he querido implementar lo de las paginas estaticas en blogger, aparecen resumidas. Se que no tienen gran utilidad pero, crees que tenga solución? He intentado por mi cuenta pero no he tenido exito en base a este post de pizcos http://humanossinsentido.blogspot.com/2010/01/paginas-estaticas-como-expandirlas.html

y mira te dejo el link de la pagina en cuestion de prueba en mi blog
http://kinokopower.blogspot.com/p/podcast-kinoko-power-para-llevar.html

Espero que me puedas ayudar!!! y gracias por tus siempre brillantes instrucciones! sin ti, mi blog seria inmundo jeje

Responder
JMiur  

Kinoko Power:
Debería poder resolverse porque hay un condicional que permitiría separar esas pàginas y evitar que se muestren resumidas. Déjame probar porque es algo que sólo puede verse en una plantilla y te contesto o hago una entrada al respecto.

Responder
JMiur  

Kinoko Power:

Estuve probando y no veo nada raro o que interfiera con las páginas estáticas. He puesto algunas en un blog de pruebas que tiene esta misma plantilla y este mismo estilo de resumen y se ven normalmente:
http://jmiur.blogspot.com/

Hice lo mismo con el demo del post y tampoco veo problemas:
http://vpresumenposts2.blogspot.com/

Responder
kinokopowercdmx  

Gracias por tu pronta respuesta Jmiur.
De hecho me he fijado que ahí en el codigo que esta en amarillo, debajo esta la parte condicional
Pero me pregunto si tal vez, eso se deba agregar en algún lugar dentro de ...intente pero no me fue posible, sigue apareciendo resumida la pagina estática.
Y si, he visto que en tu blog de pruebas funciona sin problemas...caray que sera!

Muchas gracias de nuevo por tus atenciones.

Responder
JMiur  

Kinoko Power:
Es una buena pregunta ¿por qué no me envias tu plantilla por mail y la miro el fin de semana? Como Blogger agrega códigos constantemente, puede ser que haya algo en la tuya que difiere de la mñinima sobre lo que está basado el ejemplo e inclusive, la plantilla de este mismo blog.

Responder
kinokopowercdmx  

Claro que si Jmiur! Ahora la envio, muchisimas gracias!

Responder
Bilosony2™  

Intente lo que me dijiste en la respuesta anterior no logre hacerlo :( Me lei las combersaciones muchisimas veces y aun asi no lo entiendo :( Despues de tantas horas ya noce si darme por vencido :(( Me podrias ser mas detallista de como hacer eso para que se contraigan los post???


Saludos!!

Responder
JMiur  

Simplemente busca la parte donde está el post oculto:

<div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id'>

y ahí, debajo de:

<div style='clear: both;'/>

coloca el mismo enlace que usas para expandir:

<a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>[+/-]</a>

Responder
Bilosony2™  

E borrado el comenterio porque ya resolvi el problema :) Pero de este surguio otro :(( Que es que en IE no aparece el botoncito de expandir entradas?? Saves porque sera???


Saludos!!!:)

Responder
JMiur  

Revisa las definiciones del CSS porque tienen un error de sintaxis. Entre el paréntesis de cierre y la palabra no-repeat debe haber un espacio; por ejemplo:

background:transparent url(http://lh3.ggpht.com/_cOZIddYTJ9I/S-w2mezdBII/AAAAAAAAKks/rZSCTDON4lc/sprite44.gif) no-repeat;

Responder
Bilosony2™  

Gracias JMiur no savia que las definiciones tenian que estar separadas para que anden correctamente ;) Ya esta creo que estoy feliz de como deje el blog :D

Hoy descansare trankilo (antes que aparesca algo nuevo para hacerle al blog jeje) :O

Responder
JMiur  

:D

Responder
Gem@  

Otra vez ando con esto, me he propuesto poner la plantilla patas arriba :S

Responder
JMiur  

Adelante. Avíseme cuando termine así doy vuelta el monitor, sino, me va a dar tortícolis de rtner que leer pa'rriba :D

Responder
Gem@  

Cuando termine no, será antes cuando me asalten las dudas jajajajaja

Responder
Felipe Calvo Cepeda  

Hola JMiur.

Bueno, desde que lo vi en el home de Vagabundia me llamó la atención, y lo he adaptado a mi blog principal sin mayor inconveniente, solo que al principio no me aparecía el texto del resumen pero gracias a tu sugerencia de hacer un debug deshabilitando el hack de no mostrar errores, pude dar con el problemilla. :)

Listo y funcionando!
Saludos.

Responder
JMiur  

Me alegro que todo se resolviera :D

Responder
Pixérico  

Hola he implantado los resumenes en mi blog pero tengo un problema y son las fechas, e intentado de mil formas y me he dado por vencido, si pudieras hacer el favor de explicarme como lo puedo hacer mi blog es el siguiente
http://noesfacilserdios.blogspot.com/

Un saludo y gracias por todos tus aportes

Responder
JMiur  

Lo que veo es que el formato de la fecha es la que corresponde a la hora así que debes cambiar eso.

Responder
Pixérico  

Gracias JMiur ya consegui colocar adecuadamente la fecha, ahora solo me falta poder poner un acceso alos comentarios y las etiquetas haber si soy capaz un saludo

Responder
Pixérico  

Holo otravez yo alomejor soy un poco pesado lo siento, creia que todo iba fenomenal con los cambios, el blog tiene poco tiempo y al principio pense que nadie lo veia jeje por que nadie dejaba comentarios nuevos, hasta que me doy cuenta que desde que hice los cambios no me sale la opcion de ver los comentarios ni en los resumenes ni en las entradas de cada post, no se si puedes ayudarme te lo agradeceria mucho estoy ya que me pego un tiro jeje un saludo

Responder
JMiur  

No es algo que pueda verse online, sólo en la palntilla misma.

Revisa si en el includable main está el código de los comentarios:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>

Responder
Pixérico  

@JMiur

Gracias por contestar tan rapido si tengo puesto ese codigo te mando aqui la direccion para que puedas descargarte mi plantilla haber si le puedes echar un vistazo si no es mucho pedir http://www.megaupload.com/?d=JIBUG1DG

Responder
Pixérico  

por fin despues de mucho comparar una plantilla antigua con la actual e conseguido lo de los comentarios el problema era que el codigo que me has puesto antes dicendo que si lo tenia lo tenia duplicado aunque en uno ponia static y he borrado ese y ya me va aparte de otros cambios muchas gracias por tu ayuda

Responder
JMiur  

Perfecto :-)
static se refiere a páginas estáticas
item se refiere a páginas individuales

Responder
Pixérico  

Gracias por la aclaracion, me vas a poner de pesado pero es que ahora tengo otro problema, no se por que a fecha de Julio no me sale bien, me sale como desconocida me refiero solo a la parte del mes lo otro me sale bien, y la de los demas meses tambien, la verdad es que no me lo explico si pudieras ayudarme, gracias de antemano eres un maquina

Responder
JMiur  

Hay una línea en el script que cice esto:

verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[0]=lafecha[0].substr(1) }

cámbiala para que diga esto:

verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[1]=lafecha[1].substr(1) }

sólo cambia lafecha[0] por lafecha[1]

Responder
Pixérico  

Resuelto muchas gracias eras la maquina

Responder
JMiur  

Perfecto :-)

Responder
ADRIAN  

Jmiur con respecto al script, mi pregunta es si podrías modificar para que muestre solo los titulos sin tener que borrar la línea del llamado al script y hacer que las imágenes se muestren completas así sea que se deformen o caso contrario borrando el llamado como colocar una misma imagén en todos los posts resumidos ya que queda el espacio en blanco de la imágen que debería mostrar el post.

espero puedas ayudarme,

saludos

Responder
JMiur  

Poder se podría. Habría que modificar todo el script pero no le veo sentido. Para eso, te conviene usar alguna otra clase de script que haga eso que deseas.

Responder
ADRIAN  

se puede dejar de mostrar el resumen en el post contraído y solo mostrar el título si eliminamos la siguiente línea
*p class='txt-resumen' expr:id='"resumen-" + data:post.id'/*
lo cual en mi caso necesito ya que no todos los posts tienen texto pero todos incluyen imágenes que son cuadradas y por eso preguntaba si se pueden mostrar completos ya que presumo no tienen porque deformarse.

si puedes modificar esa parte del scrip estaré muy contento y agradecido por tu trabajo.

Saludos Genio.

Responder
Emerald  

Hola JMiur! de nuevo molestando con otra preguntita :) tengo en mi blog el PeekABooPost con imágen para las entradas de listas, quisiera sacar el post-footer cdo el post está resumido, he probado con condicionales pero parece que no le doy donde tiene que ir :S
Cdo tengas un minuto podrías ayudarme?
Gracias!!

Responder
JMiur  

Luz:

¿Cuál es la condición que usas para eso? Es algo que no puede verse online. Debe haber alguna que haga que la página se muestre resumida en esas páginas. De ser así, podría agregarse la regla de CSS ahí mismo:

<style> .post-footer {display:none;} </style>

Otra posibilidad es poner algo así antes de &lt/head>:

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

Que significa: si NO es el home del sitio y si NO es una entrada individual, entonces ocultar el post-footer.

Responder
Emerald  

:D perfecto!! quedó impecable! le puse los codigos antes de /head y resultó! como siempre JMiur, :D tenés una solución para todo!
Muchas gracias, un abrazo!!

Responder
atajar  

aquí!! la conflictiva ,resulta que hice todo los pasos y no hay manera que me salga :(

Responder
atajar  

aleluyaaaa!! ya me salio ,siento el mensaje anterior ,repetí todos los pasos de nuevo y ahora si sale ,gracias maestro un abrazo

Responder
Carlos Martínez  

Hola JMiur, excelente esto, lo he aplicado a mi blog haciendo ciertas modificaciones y todo genial :D...

Pero surge un pequeño detalle, en las páginas estáticas no se carga el script y no se ve nada bien :(, espero puedas ayudarme con esto....

Gracias :)

Responder
JMiur  

Simplemente, agrega un condicional extra para que las páginas estáticas pero, como no sé que código usas, n osé exactamente donde debes ponerlo.

Responder
Carlos Martínez  

Este es mi código en la parte condicional, pero no se porque muestra el resumen en la paginas estaticas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='ResumenPost'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Si muestra el contenido pero no muestra el titulo como deberia, no se que pueda ser....enlace a plantila

Responder
Carlos Martínez  

Nah listo, me fije que estaba mal la condición, cuando llevas horas frente al pc se te satura el cerebro que no das con erores simples, jejejeje.... A la final el código quedo así:

<b:include data='post' name='breadcrumbs'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='ResumenPost'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Mil gracias JMiur, saludos

Responder
marti  

JMiur, Maestro. Estoy siguiendo los pasos detallados aquí, ya tengo ajustada la fecha en los post y todo perfecto. El inconveniente que tengo ahora es con los post resumidos, lo que sucede es que uno se pone en la barra lateral, al lado del primer post, y el otro si se ubica debajo como en tu ejemplo, no se como arreglar eso. te dejo mi blog de pruebas así ves lo que comento. http://123acero.blogspot.com/

Responder
JMiur  

A la definición de .post-resumen {}, agrégale esto:
.post-resumen {
.......
clear: both;
}
de esa forma vás eliminando las flotaciones superiores y todo se acomodará bien.

Responder
marti  

Gracias maestro, ha quedado perfecto. Saludos cordiales!

Responder
JMiur  

Perfecto :D

Responder
Unknown  

Upppss..Auxilio..al parecer me sucedio lo de Gema con lo de tener codigos de expasion anteriores...ahora no tengo ni idea de como eliminarlos... :( .. Me podrian ayudar.. Aqui les dejo mi blog para q chequen please

http://manosparaamar.blogspot.com

Responder
JMiur  

Eso no es algo que pueda verse online, sólo se muestra en la plantilla.

Responder
Unknown  

Quedó de maravilla en mi blog, muchas gracias JMiur.

Sólo tengo una consulta, ¿como podría hacer para que el [+/-] lleve a una página individual y no muestre el texto oculto debajo?

Muchas gracias de nuevo, eres un genio :D

Responder
JMiur  

En ese caso no te conviene usar esto porque está pensado exactamente para lo contrario.

Responder
Alicia Vivancos  

Hola JMiur es la primera vez que comento pese a que mi blog está en pie gracias a ti.

Estoy implementando el resumen de los post y todo está quedadando perfecto pero hay algo que me gustaría poner y no se como hacerlo.

Me gustaría que los resumenes se desplegaran y contrajeran con efecto slide. ¿Me podrias explicar como hacerlo?

Vi en un comentario que alguien lo habia hecho pero no ponia como.

Responder
JMiur  

No sé en cuál de tus blogs intentas hacerlo ¿Tienes agregada alguna librería JavaScript?

Por ejemplo, si usas Prototype+Scriptaculous, bastaría reemplazar la función toggleResumenPost() por esto:

function toggleResumenPost(cual) {
Effect.toggle('dummy-'+cual,'slide');
}

Si usas jQuery podrías reemplazarla por esto:

function toggleResumenPost(cual) {
var elpost = "#dummy-" + cual;
$(elpost).slideToggle();
}

Responder
Alicia Vivancos  

Perdona JMiur se me olvidó decirte que era en el blog "El Templo de Artemisa" si que uso Prototype+Scriptaculous, es mas tengo en la sidebar dos elementos con el efecto slide, pero en esto no consigo hacerlo.
Supongo que la parte que debo modificar es esta:

// PERMUTAR ESTADO
function toggleResumenPost(cual) {
var elpost = "dummy-" + cual;
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}

//]]>

Pero ¿debo reemplazarlo entero por lo que me has puesto o solo las dos primeras lineas?
Es que si lo remplazo entero no hace nada, no se expande y si reemplazo las dos primeras lineas no solo no se expande si no que dsaparecen las imagenes.

Responder
JMiur  

Sí, sólo reemplaza todo eso que has escriot y que es la función por la otra.

Si te fijas en el código fuente de este blog, verás que es la misma que uso yo. No deberías tener problemas.

Responder
Alicia Vivancos  

Bueno, aquí estoy otra vez y es que nada de nada, sigo sin conseguirlo. Hago exactamente lo que me dices, he visto el codigo fuente y nada...
al ponerlo, el resumen no se expande.

Después de mucho poner y quitar, he hecho esto:

// PERMUTAR ESTADO
function toggleResumenPost(cual) {
Effect.toggle('dummy-'+cual,'slide');
var elpost = "dummy-" + cual;
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}

Así es la unica manera de que haga el efecto deslizante "o algo parecido" pero evidentemente no lo hace correctamente.

Lo dejo puesto en el blog para que veas a lo que me refiero.
http://eltemplodeartemisa.blogspot.com/
si puedes pasar y echar un vistazo a ver si hay solución te lo agradeceria porque me estoy volviendo loca con esto... al final lo dejaré como está :(

Responder
JMiur  

Eso pasa porque no has borrado lo anterior y dice esto:

function toggleResumenPost(cual) {
Effect.toggle('dummy-'+cual,'slide');
var elpost = "dummy-" + cual;
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}

Cuando debería decir sólo esto:

function toggleResumenPost(cual) {
Effect.toggle('dummy-'+cual,'slide');
}

Responder
Alicia Vivancos  

Ya, pero es que si pongo solamente eso, no hace absolutamente nada, hago click en el enlace y no se expande.

Será que he hecho algo mal pero con el lio que es mi plantilla no quiero tocarla que al final la liaré mas.

Muchas gracias de todas maneras JMiur, me hubise gustado poner ese efecto porque queda mucho mas bonito pero lo dejaré tal cual.

Un saludo.

Responder
JMiur  

Déjalo colocado como te dije y me avisas. También agrega style='display:none;' en el DIV oculto

<div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id' style='display:none;'>

Responder
Alicia Vivancos  

Lo dejo todo como me has dicho.

Pero continúa sin hacer nada.

Responder
JMiur  

Correcto. Creo que falta un detalle, debes quitar el display:none de esta regla de estilo:

/* el post normal oculto */
.post-oculto {
margin:30px 0;
padding-bottom:15px;
}

Responder
Alicia Vivancos  

Bueno. Como era de esperar ahora SÍ que funciona :)
Se que te lo dicen mucho porque sigo tus explicaciones y comentarios desde hace tiempo y no quiero ser repetitiva pero... Eres un verdadero genio!!! tienes solución para todo.

Muchas gracias ;)

Responder
JMiur  

Perfecto Artemisa. Me alegra que se haya solucionado.

Sólo era cuestión de paciencia :D

Responder
Alicia Vivancos  

Pues sí, además cambié un poco los estilos porque no se visualizaba del todo bien en chrome. Ahora queda mejor.
Aunque en explorer no hace nada al hacer click en el el enlace de espandir, pero no me importa. Mi blog se ve fatal en ese navegador, lo de las entradas es casi lo de menos.

Un saludo.

Responder
Paco  

Hola JMiur!
Me lío un poco y no se como cambiar algunas cosas, por ejemplo, me gustaría resumir todas las entradas menos la primera de cada página (incluida la página principal) y no se como hacerlo. Me gustaría también saber como poner una imagen a la izquierda de cada entrada resumida y que una vez se abran aparezca abajo el número de comentarios, las estrellas de puntuación, etc.
Gracias de antemano y perdona las molestias!
Saludos

Responder
JMiur  

Ls tres partes en que está dividido esto, hablam de como poner la primera entrada completa y las otras resumidas. Est sería la tercera.

Lo otro ya es un tea de diseño que dependerá de como armes las cosas así que habría que verlo funcionado.

Responder
Paco  

Muchas gracias!! voy a empezar a hacerlo con paciencia y a ver como sale. Un saludo.

Responder
Paco  

Perdona JMiur, me salió una pequeña duda, me funciona todo correcto, incluso en las entradas resumidas he podido poner lo de los comentarios y otros botones. Ahora bien, como medida de puntuación de cada entrada utilizo las estrellas de Outbrain, he intentado poner esas estrellas en las entradas resumidas pero sin éxito. Que puedo hacer para que aparezcan?? no se que código poner.... Gracias!!!

Responder
JMiur  

No recuerdo el código específico porque no lo uso. Entiendo que debes buscar algo como:
<span class='star-ratings'>
o data:top.showStars

Responder
Paco  

Ufff no puedo encontrar ningún código, a lo mejor es que no aparece en la plantilla, no tengo ni idea... El código de Outbrain es un script que te dan para ser añadido en forma de gadget. Si se te ocurre algo me dices. De todas formas muchas gracias!!

Responder
JMiur  

Fíjate en una plantilla mínima, allí, seguro que está y es igual para todas.

Responder
Paco  

No lo entiendo mucho lo que quieres decir... lo único que encontré en mi plantilla de outbrain es esto:


ya probé con poner lo de showstars, showReactions pero no hace nada.
Creo que me daré por vencido y si quieren puntuar la entrada pues que la abran de forma individual :P Gracias!

Responder
Alicia Vivancos  

Hola JMiur otra vez yo por aquí con una duda que me está poniendo de los nervios.

No se si tendrá que ver con los resumenes pero he puesto en el post-footer botones para compartir las entradas y en los resumidos se ven bien alineados pero en el post principal aparecen muy separados.
Por mas que intento no encuentro manera de quitar esos espacios.

¿Alguna idea de por qué me sucede esto?

Por cierto es en el blog "El Templo de Artemisa"

Responder
JMiur  

Eso ocurre poque las imágenes del post (que incluyen el footer), tienen definida una regla de estilo que les agregar padding:

.post img {
border: 0 solid #000000;
padding: 4px;
}

Puedes hacer dos cosas; cambair esa regla para que solo afecte a las imágenes de la entrada exclusivamente:

.post-body img {
border: 0 solid #000000;
padding: 4px;
}

o agregar otra regla para que esos botones no tengan padding:

.pushbutton { padding: 0 !important; }

Responder
Alicia Vivancos  

mil gracias JMiur, ahora están perfectos :)

Responder
JMiur  

Perfecto :D

Responder
Unknown  

Hola JMiur.
Queria que me echaras una mano. En esta pagina estatica (http://www.tortugasveloces.com/p/tecnicas.html) quiero separar el contenido, como lo tengo en la principal (http://www.tortugasveloces.com) con los post, pero solo de manera visual, enmarcados. Puedes ayudarme? gracias.

Responder
JMiur  

La única diferencia entre ambos es que en la página estática no se muestra un título y por eso, el post sube. Podrías ponerle un padding, condicionado, con el valor que quieras:

.post { padding-top: 30px; }

Responder
Unknown  

Creo que no me he expresado bien. Lo quiero es "enmarcar" las tres partes, separadas ahora por imágenes que contiene la página. Si observas, alrededor hay un marco (borde) de 1px que, lógicamente, rodea todo el main-wrapper. Lo que qisiera es que rodeara cada una de las partes (temas) de la página, al igual que sucede con los post o con los widget de la sidebar, que quedan rodeados por ese borde.

.post {
background: #FFF;
border: 1px solid #E5E9D5;
border-radius: 10px 0 10px 0;
-moz-border-radius: 10px 0 10px 0;
margin-bottom: 10px;
padding: 10px;
margin:0.5em 0 1.5em;
padding-bottom:1.5em;
}

Gracias por tu atención.

Responder
JMiur  

Entonces, debes inlcuir esos pares de DIVs que componen cada sección en otro con alguna clase CSS:

<div class="marco">
<div class="polaroid"> ... <>
<table id="hor-minimalist-b2"> ... </table>
</div>

Y luego establecer las propiedades de esa clase que será el contenedor:

.marco { ....... }

Responder
Unknown  

Muchísimas gracias. Depués de unos ajustes todo a quedado como quería.

Responder
Tospiando  

hola Jmiur como estas?,espero que la pases muy bien este nuevo año y sigas con este execelente y útil blog si es que lo deseas jeje. El tema de este artículo me gustó bastante y me gustaría que me ayudaras con un problema que tengo relacionado a lo que planteaste. Mi problema radica en las imágenes de mi página (www.tospiando.com)ya que no encuentro la forma de añadir el enlace de la publicación a esta automáticamente sin que yo tengo que modificar el enlace manualmente. Tengo entendido que debería hacerlo con javascript y con esta codigo expr:href='data:post.url' pero más de eso no se xD

Responder
JMiur  

No entiendo el problema, en las imágenes del home donde tienes las entradas resumidas, las imágenes son enlaces a esas entradas.

Responder
pvillegasy  

Hola Jmiur, he intentado aplicar este método en mi blog de prueba pero no me funciona, lo que hace es duplicarme la entrada... http://pvillegasy.blogspot.com/2012/04/prueba-miniaturas.html

JMiur  

Eso ocurrre porque, seguramente, no has condicionado correctamente la etiqueta
<b:include data='post' name='post'/>
reemplazándola por completo.

Responder
ritmosymelodiasecuador.blogspot.com  

Hola Jorge, paso a consultarte algo: Como puedo hacer para que al permutar estado se abra el post con otro efecto como deslizante o aparecer?

Gracias por tu ayuda maestro.

Responder
ritmosymelodiasecuador.blogspot.com  

Hey maestro, acabo de solucionar leyendo lo que explicaste a artemisa.

Un abrazo amigo.

Responder
Unknown  

Hola amigo, requiero de tu ayuda ..el problema q tengo ahora es q no consigo extraer un contenido especifico de un post desde el home, es decir un texto que se encuentra dentro de un div en mi post(por ejemplo la sinopsis de una pelicula). Tengo entendido q el data:post.snippet nos proporciona un resumen automatico pero en este caso quiero personalizar para que me muestre el texto que yo quiero. Espero puedas ayudarme gracias.

JMiur  

Tendría que saber cuál es el método que estás utilizando.

Puede hacerse pero requiere leer los feeds, buscar esa entrada y luego buscar dentro del contenido para extraer ese dato si es que hay alguna forma de identificarlo. Todo eso, debe hacerse utilizando JavaScript por eso preguntaba cuál es el método que estás utilizando.

Unknown  

amigo gracias por responder ..Si hay forma de identificarlo, en cada post se crea un div id="sinopsis" el contenido q esta dentro es el que quiero extraer y ponerlo dentro en una etiqueta (p id="desc") y mostrarlo como resumen en el home.. para cada una de las entradas. me he guiado del script q ud proporciona arriba(function resumenPost(idPOST){}) mandando el id del post pero no me extrae nada, al parecer no accede al contenido real del post.
a lo que quiero llegar es algo como esto: http://www.moviezet.info/index.php ahi al poner el cursor encima de la entrada muestra la sinopsis de la peli.
con respecto al metodo q me preguntas no se a q se refiere :( soy nuevo en esto.

JMiur  

Lo que se lee de un feed en formato jSon es la entrada completa, una cadena de texto con el código HTML de esa entrada por lo tanto, habría que leer esa cadena, buscar ese DIV y detectar cuál es el final.

No puedo decirte cómo sería ese código en particular porque eso requiere probar y verificar; sólo me limito a indicar cuál es el camino que debería seguirse.

Responder
Anónimo  

gran entrada! =D> Gracias!

Responder
Silvia Quezada  

Hola JMiur!! Sabes quize adaptar este tipo de netrda resumida en mi blog, lo intente varias veces poniendo el codigo, pero sin resultados...asi que decidi bajar la Plantilla demo que adjuntas y lo aplique a mi blog, le hice varios cambios en relacion a apariencia...pero note dos cosas: 1.- En el cuadro Nunca me apareció los datos de la fecha, solo estaba el [+/-], que lo cambie por una flechita.

y el 2do. es que se desaparecieron los comentarios, no se donde estan, No veo ni la caja para escribir, ni puedo leer los comentarios hechos anteriormente....Que tengo que hacer para verlos?? Podrias por favor ayudarme, ?? mi blog es: http://arteymanualidadesdesivy.blogspot.com.
Y este es el enlace: http://sdrv.ms/19Ts282 para descargar la Plantilla y puedas ver donde esta el error.
Mil gracias anticipadamente

JMiur  

Para decirte algo debería verlo online. El demo, es del año 2009 así que muchas cosas han cambiado en Blogger desde entones y sólo es un demo, una demostración de este tema en particular por lo tanto, no tiene comentarios actualizados ni otro tipo de widgets.

Responder
Silvia Quezada  

Gracias por responder JMiur,como hago para que los veas online ?, Se me ocurrio subirla al skydrive mi plantilla para que la puedas descargar aqui el enlace:http://sdrv.ms/19Ts282 Y si deseas ver el blog esta es la dirección:http://arteymanualidadesdesivy.blogspot.com.

JMiur  

Puedes hacer pruebas creando un blog auxiliar. No hay otra forma de verlo funcionando.

Responder

¿Quiere dejar un comentario?

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

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