Modificaciones al sistema de sumarios
25/10/2009
9
Hay varias formas de crear sumarios y esta entrada hace referencia al último que se explicó aquí: Post en forma de sumarios (leer más) en dos pasos
Aitor nos preguntaba hace unos días cómo hacer para que la imagen del sumario fuera a su vez un enlace al post, al igual que pasa con el título. Esto es especialmente útil para blogs como el suyo en el que los sumarios no tienen texto y sólo tienen una imagen.
Para este caso, tendremos que localizar de entre el código que se facilitó la otra vez esta parte y en ella incorporar lo que se ha marcado en verde.
function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/></a>';
summ = sumario_img;
}
else {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></a></div>';
summ = summary_img;
}
}
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/></a>';
summ = sumario_img;
}
else {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></a></div>';
summ = summary_img;
}
}
Además, en la llamada al script habrá que incorporar el dato de la URL del post a enlazar...
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>","<data:post.url/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>","<data:post.url/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
Una vez más, lo que está en verde es lo que se ha incorporado nuevo.
Ya tenemos enlace en nuestra miniatura.
Si te gustó esta entrada, quizás quieras promocionarla: 
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
El botón que no hace nada
9 comentarios:
Bueno pues como toda persona de bien, mi mas grata enhorabuena. No conocia tu bitácora, a partir de hoy, lo siento pero ya nada sera igual. Un saludo colega y a todos los que esta vez no pudo ser, asi como a los otros seleccionados.
Hola Oloman!
muy bueno el post, y el blog es genial, paso siempre y soy una fiel seguidora tuya, ...
por eso se que cuando tengo una duda en blogger, tengo que acudir a vos,
bueno mi problema ahora es que quiero poner efectos en mi blog, y no encuentro una pagina que me de buenos efectos para blog, y seguros, ¿vos conoces alguna pagina que tenga buenos efectos par blogs? .. te explico, por ejemplo unos de los efectos seria, es que antes de cliclear, cuado apoyas el el cursor sobre el enlace (link) por ahi este cambie de forma, color o tamaño, para no mariarte por que no me se exlicar muy bien, el ejemplo seria este blog .. http://blends-lovejb.blogspot.com/ fijate que tiene varios efectos, en las fotos, los links, los brillos, etc.. a mi me gustaria poder poner algo paresido a esos efectos, pero yo ya he buscado y solo me aparecen paginas de efctos para My Space, que no se si son seguros para mi blog, y tampoco son exactamente lo que yo estaba buscando, asique si me podes ayudar en eso, te lo agradeceria mucho...
Suerte y Felicidades!!!
Lore (mi blog es: http://www.sonohraa.tk )
desde ya mucvhas gracias por la atencion =)
Demasiado complicado para mí.
Saludos
¡Hola Oloman! Me encantó tu blog, sobretodo la plantilla que está muy buena. También me gustó mucho eso de que "tratamos de escribir correctamente" ¿Lo sacaste de alguna parte o lo inventaste tu? ¿Te puedo copiar la idea?
Saludos
Kanalla, seguro que muchas cosas no serán igual, pero espero que no sean todas.
Lore, ya sé que me sigues desde hace tiempo. Lo de los efectos que comentas son efectos rollover. Busca en esta misma página TRANSPARENCIA y también ROLLOVER. Con ambas cosas puedes hacer lo que allí viste.
Joselop44, esto es para los que tienen montado el sistema de Leer más y sólo se trata de añadir un poco más de código.
Clau, sin ningún problema. De hecho si pinchas en el globo te sale el código. Y sí, es una bromilla que se me ocurrió hace algún tiempo, aunque creo que casi nadie la coge... creo que por causa del Efecto Stroop.
Buenas Oloman.
Acabo de echar abajo todo el css del blog, para partiendo de cero volver a construirlo y aprender css y xhtml.
Pues, es que acabo de empezar, y me he topado con un problema que no se de donde viene y por más vueltas que le doy no doy con él.
El caso es que dentro del post, entre post-body y post-footer hay un espacio muerto que no se como quitar. He puesto colorines para ver donde empieza uno y donde acaba otro, y ahí están, unos 10pixels que hacen que no puede conformar un fondo en tres partes. He trasteado con todos los paddings poniéndolos a cero, los margins igual...y como diría el cálico electrónico...me tiene frito...no veo el problema.
No quería molestar innecesariamente y ya he trasteado Ologblog arriba Oloblog abajo en busca de pistas, W3cschools, etc...y nada. Eres mi último recurso, si pudieras echarle un ojo me harías un apaño.
Está todo hecho unas bragas por eso de que ando comentando elementos de la plantilla, poniendo colores chillones para distinguir los límites de los wrapper y esas cosas.
Gracias por adelantado y felicidades por segunda vez.
http://obdemuriansenku.blogspot.com/
PD: Si logro solucionarlo, comento la solución.
Obdemurian, podría ser porque las líneas del pie del post (post-footer-line post-footer-line-1) están metidas como párrafos (P) y eso hace que haya un salto antes y después. Prueba a cambiar los tags P por SPAN en la parte HTML.
He encontrado una solución, que no se si es un parche, pero funciona. He cambiado el margen inferior del post body por un valor negativo para acercar el post-footer esos dichosos píxeles. Aunque a cambio tengo todo el blog alterado por la búsqueda desesperada del fallo...XD
Si, están como p y no como span. Aunque les he dado un estilo chillón y he vuelto a mover hacia arriba post footer para ver si son visibles y nada. Aún así coy a trastear cambiando p por span. Espero no hacer estallar nada.
Citando a Duffman de los Simpsons:
"Oh! Si! Duffman dice...Si."
Efectivamente eran la dichosas post-footer-line en forma de párrafos. ¡Qué alivio haber encongrado el problema!
Muchísimas gracias por la respuesta y además tan rápida.
PUBLICAR UN COMENTARIO