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.
¿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.
Y muchos más artículos interesantes si nos sigues en...
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.
ResponderEliminarHola Oloman!
ResponderEliminarmuy 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í.
ResponderEliminarSaludos
¡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?
ResponderEliminarSaludos
Kanalla, seguro que muchas cosas no serán igual, pero espero que no sean todas.
ResponderEliminarLore, 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.
ResponderEliminarAcabo 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.
ResponderEliminarHe 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
ResponderEliminarSi, 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:
ResponderEliminar"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.
Hola, existe alguna forma de que el numero de palabras sea diferente en la pagina principal y en la página de etiquetas. Nos puede interesar que en la pagina principal el texto se mayor y en las etiquetas menor para facilitar la navegación en ellas.
ResponderEliminarIsaac, se me ocurre una cosa, pero ahora no tengo casi tiempo para probarla.
ResponderEliminarQuizás funcionaría añadir después de BODY una condición para comprobar si estamos en página de entrada y entre el IF y su cierre, insertar entre etiquetas SCRIPT un nuevo valor para las variables que controlan el número de caracteres: sumario_noimg y sumario_img
Si te lanzas, por favor me avisas de cómo te fue. Saludos.
Buenas amigo vendo del otro post. Logre hacerlo pero me linkea a la imagen completa el thumb en la pagina principal, no hacia la entrada. Sabes por que ?. Saludos. Muy bueno el blog
ResponderEliminarPues si lo has puesto en Test Plantilla, lo que ocurre es que no has puesto todo el código que indico. Faltan cosas.
ResponderEliminarListo amigo, ya quedo al pelo. Puedes fijarte en mi blog de peliculas como quedo. Muchas gracias Saludos te voy a recomendar :D. Busque esto por todos lados :D
ResponderEliminarOMG! Fantastic! :D
ResponderEliminar