Si quieres saber cómo poner en tu blog leer más con una imagen debes seguir los siguientes pasos:
1) Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código: <data:post.body/>
2) Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:
<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/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Nota: Si queremos que en lugar de "Leer más" como texto veamos una imagen en su lugar, sustituiremos en el primer código Leer más por:
<img src="aquí-la-url-de-la-imagen" />
3) Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head> Justo antes de </head> colocamos este código:
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
summary_noimg Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, cuando no hemos incluido imágenes en ella.
summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen.
Ejemplo del resultado final:
Ejemplo de blog con leer más con una imagen: Elgatodeltrastero
Visto en elescaparatederosa.
Oye en el post sale:
ResponderEliminar"Nota: Si queremos que en lugar de "Leer más" como texto veamos una imagen en su lugar, sustituiremos en el primer código Leer más por:"
pero luego hay una imágen que no se puede ver...
Disculpa Tejido en Telar, ya está arreglado.
ResponderEliminarUn saludo y gracias por tu visita.
Hola ¿que tal?,
ResponderEliminarhabría alguna posibilidad de que el texto te quedara justificado, es decir, completamente cuadrado.
Gracias y un saludo.
Hola Jairo. ¿No te aparece el texto centrado como en la imagen de ejemplo?
ResponderEliminarExplicame un poco mas que es lo que buscas por favor.
Un saludo.
Hola de nuevo, a lo que me refería era lo siguiente:
ResponderEliminar¿Es posible que todos los renglones del texto tengan el mismo largo?, es una cuestión estética y en el ejemplo de la imagen no viene así. Cuando publico una entrada en el blog tiene esa opción, de echo cuando le doy a leer más y se me abre el texto, entoces si me viene los renglones justificado, ¿no se si me entiendes?.
Gracias de nuevo.
En el codigo del paso 3) tienes esto:
ResponderEliminarsummary_noimg Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, cuando no hemos incluido imágenes en ella.
summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen.
Si pones que haya menos caracteres debe quedarte mas centrado.
Hola, según he probado con el codigo, en los posts de resúmen no me salen links, aunque si abro el post entero sí que me salen. Hay alguna manera de configurara para que en el resumen se puedan ver los vínculos y hacer click en ellos?
ResponderEliminarMuchas gracias!
Hola Ellen. Me temo que no se puede, ya que lo que aparece, tal y como dices, en sólo un resumen de las primeras palabras.
ResponderEliminarUn saludo y gracias por tu visita.
Okas grasias por el comsejo y que do bien en mi blog
ResponderEliminarGracias a ti Blog galaxy. ¡Bienvenido al blog!
ResponderEliminarPues hola, a mí no me ha resultado, damn!
ResponderEliminarCómo se supone que debía salir?
Hola Juan Carlos. En esta entrada tienes una fotografía de ejemplo. Revisa los pasos porque tiene que funcionar sin problemas. Saludos.
ResponderEliminarPor fin pude hacerlo, como a las 1500 veces pero quedo, ahora tengo una duda, el texto sale sin formato, por ejemplo, cuando voy a mi entrada por medio de "leer mas" me aparece mi texto con formato (letras de colores, justificado, centrado, etc) pero en la principal, antes de darle "leer mas" me aparece todo el texto de corrido sin ningun formato
ResponderEliminar¿como puedo solucionar esto?
Hola "dijo". Exacto, debe aparecerte tal cual dices. Lo de los colores etc, no lo puedes modificar. Para lo único que sirve este "leer más" para poner una pequeña introducción que la puedes modificar según las especificaciones que puse arriba.
ResponderEliminarahhhh, oyep, y hay algun "leer mas" que me permita poner la introducción con formato?
ResponderEliminarSí. En este blog encontrarás varios "leer más". Por favor emplea el buscador situado arriba a la derecha.
ResponderEliminarDe todas formas, te dejo el enlace para que lo veas: http://www.quierocrearunblog.com/2009/09/actualizacion-blogger-ahora-con-leer.html
Saludos y gracias por tu visita y por comentar.
grandeeeeeeeeeeeeee!!
ResponderEliminarEstoy flipando!! Gracias a ti, mi blog ya no es lo que era!! Sigue así y mil gracias por trabajar de forma gratuita para los demás.
Grande de verdad, grandeeeeeeeeeeeeeeee!!!
Aporto que deben cambiar esto para modificar el porte de la imagen
ResponderEliminarimg_thumb_height = 100;
img_thumb_width = 120;
Donde "img_thumb_height = 100;" Es el alto
Donde "img_thumb_width = 120;" El Ancho
Hola:
ResponderEliminarAlfin logre hacer esto.. Te agradezco.
Una pregunta.! existe alguna forma de agrandar mas la parte del texto que muestra.
Nuevamente te lo agradezco
@elquegrita. Gracias amigo.
ResponderEliminar@Alfre2Flores. Gracias por el aporte. Te voy a contratar para mi blog jaja. Un saludo compañero ;)
@joven_noble. Hola, sí puedes hacerlo. Está explicado en la entrada: "summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen." Espero que te sirva, un saludo.
muchísimas gracias..me salvaste muchas horas de seguir buscando.
ResponderEliminarsaludos
Hola, lo primero quiero felicitarte por la web, es una excelente fuente de recursos.
ResponderEliminarHe aplicado este tutorial y me gusta mucho el resultado en mi blog, quedan las entradas muy bien organizadas con su foto, su introducción y el "Leer más" de enlace... y aquí viene mi duda:
¿Existe alguna forma de hacer que "Leer más" no afecte a las páginas de la opción "Lista de páginas"? Me refiero a aquellas que podemos poner mediante un menu en la parte superior del blog: Home, about...
Gracias.
Un saludo
Hola Jbenayas, la verdad es que no sabría cómo modificar el script para hacer lo que me pides, de hecho no sé si podría hacerse en Blogger.
ResponderEliminarLo lamento, un saludo. Gracias a ti.
Hola, yo estoy creando un blog que se trata de "Trailers".
ResponderEliminarLo que yo quiero hacer es lo siguiente, tener una pantalla principal en donde presente las peliculas con un cartel para cada una de ellas y a travez de un enlace dirigirlas a su determinada informacion junto con su video trailer.
eso es lo que no se como hacer separar pelicula por pelicula, espero que me puedas ayudar!!!
Bro en mi blog ahi tres
ResponderEliminarpruebo con uno y otro y no funciona
Ya logre ponerlo.. pero ahora solo me aparecen 3 entradas en la pag principal y yo tengo seleccionado para 10 entradas....
ResponderEliminarAlguna solucion
Este comentario ha sido eliminado por el autor.
ResponderEliminarperdona y si no encuentro la linea
ResponderEliminar< data: post. body / > ??
Hola!!
ResponderEliminarQuería preguntar si es posible solo dejar una imagen antes, osea que no me aparezca texto, sino solamente que una imagen de ese post en particular lleve al post completo... y pues el texto lo cambiaría por "ver mas" o algo por el estilo. La cosa es que al reducir a cero los caracteres siguen saliendo alrededor de 5 o 6...No es posible quitarlos todos. Es para un fotoblog.
Gracias!!
hola .. me funciona perfecto .. solo que el texto sale por debajo de la imagen .. que podra ser??? es en una plantilla hecha en blogger .. ya lo habia aplicado en una plantilla externa y si salia bien .. pero en la plantilla sencilla de blogger sale el texto abajo .. ????? ayuda por favor...
ResponderEliminarhola si me funciono a la primera
ResponderEliminarpero una pregunta como hago para
que cuando ponga en el menu en mis pestañas salga una entrada de tamaño original y la otras en tamaño miniatura(como lo que pusiste alla arriba)
Hola que tal. Me ha servido mucho esta página y pude lograr lo que quería de hacer las entradas más cortas y poner "Leer más...".
ResponderEliminarPero lo tuve que quitar temporalmente, debido a que cuando hago ésto, no sólo se aplica a mis estradas, sino que también se aplica a todas las páginas de mi blog (cosa que no quiero sino sólo a las entradas), además el link que aparece en éstas de "leer más..." me lleva a la misma página donde está la misma información de donde provengo, en pocas palabras no avanzo, es como un ciclo, Lo que hace imposible que pueda visualizar el contenido completo de la página que quiero ver.
Bueno me gustaría que me ayudaras por favor.
¿Cómo lo hago? ¿Qué le pongo o le quito al código?
Hola te felicito por el post la explicaciòn es exelente y me salio en la primer prueba, aunque tengo una consulta para hacerte. Ay alguna forma de q me salga la imagen arriba y el texto junto al leer mas abajo de esa foto te agradeceria mucho la respuesta saludos desde argentina.
ResponderEliminaroie munchas gracias muy buena tuto
ResponderEliminarsaludos dela banda de http://wrestling-alterno.blogspot.com/
salu2
Que tal, gracia por el tip , pero cuando pongo más páginas, me lleva a una pequeña reseña de la
ResponderEliminarpágina pero al hacer clic pareciera que me lo refresca nadamás, que puedo hacer?
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarme sirvió mucho, muchas gracias n_n
ResponderEliminarHOLA TENGO UN PROBLEMA CON ESTO DE LEER MAS INGRESO TODO EL CODIGO TAL COMO DICES PERO AL MIRAR ..EN LAS ENTRADAS FUNCIONA BN PERO TABN ME LAS HACE EN MIS PAG INDIVIDUALES QUE DEBO HACER GRACIAS..
ResponderEliminarmuy buen post el unico de ayuda de los 26 de visite
ResponderEliminarGracias
hola una consulta yo hice todo lo que dijistes...
ResponderEliminaral final muestras una imagen donde dice asi te va a quedar pero a mi no me queda asi en lugar de leer mas me sale un cuadradito sin nunguna imagen y justo en ese cuadrado hay que darle clic para que se vea la continuacion de lo que he escrito como hago, y como subo la imagen por fa ayudame.
Hola,
ResponderEliminarAyer introduje este código en mi blog y al quitarlo se me duplicaron los posts. No sé si he podido dejar algo puesto. ¿Me puede ayudar?
Sophie Carmo
www.sophiecarmo.com