Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

El truco 'Leer más...' en la portada de tu blog

El truco Leer mas en la portada de tu blog en blogger como en El Balcon de JaimeDurante estos últimos meses me habéis preguntado cosas acerca del nuevo diseño del Balcón. Lo más popular ha sido el truco de 'Leer más...' o 'Seguir leyendo...' en la portada, que muestra un total de seis artículos resumidos.

Por tanto he decidio explicarte paso a paso como conseguir lo mismo que tengo yo en el blog, hacer que en la portada de tu bitácora se muestre tan solo un breve resumen y una imagen en miniatura.



Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta <data:post.body/> y bórrala para incluir esto en su lugar:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div expr:id='"blportadarsmn" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>blentradaresmn("blportadarsmn<data:post.id/>");</script>
<span class='blenlaceleerms' 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>

Ahora, encuentra la etiqueta </head> y añade el siguiente script encima:

<script type='text/javascript'>
blresumenno = 420;
blresumensi = 340;
blalturaimg = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function bltred(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 blentradaresmn(pID){
var div = document.getElementById(pID);
var blimgn1 = "";
var img = div.getElementsByTagName("img");
var blpost = blresumenno;
if(img.length>=1) {
blimgn1 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+blalturaimg+'px"/></span>';
blpost = blresumensi;
}
var blportadarsmn = blimgn1 + '<div>' + bltred(div.innerHTML,blpost) + '</div>';
div.innerHTML = blportadarsmn;
}
//]]>
</script>

Con esto terminamos el truco y tan solo necesitas guardar tu plantilla para comprobar el resultado. Aún así, puede que desees personalizar un poco el enlace 'Leer más', enmarcarlo o añadirle un color de fondo.

En este caso, añade encima de ]]></b:skin> este bloque de CSS:

.blenlaceleerms {
border: 1px solid #cccccc;
padding: 4px;
background: #f4f4f4;}

La primera línea representa el borde, que tiene un grosor de 1 píxel, el estilo solid (ver más estilos de borde) y el color #cccccc (utiliza la tabla de colores para cambiarlo).

La segunda indica la distancia que hay entre el texto y el marco (4 píxeles) y la última aporta un color de fondo gris claro (también puedes editarlo).

DFC dice...

Jaime
De nuevo gracias por este magnífico truco, no obstante, hay 2 cosas que parecen no funcionarme del todo bien:

a) Cuando selecciono en Configuración ---> Formato ---> 10 entradas, en lugar de salir 10 entradas al acceder al blog, sólo salen 7. ¿Tiene algo que ver con este truco?

b) Por otro lado, he cargado el bloque CSS que mencionas para "Leer mas" y no sale ni el fondo ni el borde alrededor del enlace, y he seguido punto por punto los pasos. ¿Que puedo haber hecho mal?

Muchas gracias

Jaime Trujillo Escobedo dice...

DFC, en primer lugar debes saber que blogger realizó cambios hace poco y no permite mostrar más de 10 entradas en la portada del blog (por ahora). El motivo es que el equipo de dicha plataforma desea que los blogs carguen a una mayor velocidad.

En cuanto a la decoración del enlace, prueba usando este otro bloque:

.blenlaceleerms a {
border: 1px solid #cccccc;
padding: 4px;
background: #f4f4f4;}

GAMC dice...

gracias jaime por esta entrada

Jaime Trujillo Escobedo dice...

Me alegra que te guste, GAMC. Tu blog: Maracaibo City Online va cada vez mejor!

Serra do Galiñeiro dice...

Hola Jaime¡

He utilizado este truco y en las entradas funciona pero ha afectado a las páginas. Ya no se pueden visualizar.
Me puedes ayudar?.

Gracias por todo.

^(.)^ Silvia ^(.)^ dice...

¡Hecho! Lo he puesto en uno de mis blogs donde las entradas suelen ser extensas. La verdad es que me ha quedado muy lindo.
Besicos Jaime.

^(.)^ Silvia ^(.)^ dice...

Ains Jaime, perdona que te escriba/moleste tanto pero ahora resulta que las páginas independientes no se ven en el menú que de momento tengo puesto (está en fase de prueba). Ha sido poner el truco este de "Leer más..." y las páginas no se visualizan. ¿A qué puede ser debido? Me pasa en ambos blogs. Échame un cable, please.

Mariona Monrós dice...

Hola Jaime! lo he aplicado y me sale perfecto, pero tengo el problema que el texto resumido me sale sin justificar i en un color que no es el original...

Hay alguna manera de solucionar este problema? mil gracias crack!

Jaime Trujillo Escobedo dice...

Ya estaba informado acerca de dicha desventaja, Serra do Galiñeiro. En breve publicaré la solución. Saludos y gracias a ti por comentar!

Jaime Trujillo Escobedo dice...

Lo mejor de todo, Silvia, es que las entradas -por muy extensas que sean- siempre aparecerán con el mismo ancho, es decir: la portada del blog siempre tendrá el mismo aspecto y no se 'deformará'.

Abrazos!

Fermín Gélvez Caballero dice...

Amigo me pasa lo mismo que Galiñeiro las paginas se han dañado no me aparece la información.

Gracias por el truco pero esperamos una pronta solución a lo expuesto

Driwrgy dice...

Hola Jaime, encantada de coincidir contigo por estos lares. Yo soy Cris, alias Driwrgy, acabo de descubrir tu blog y con tu permiso, vengo para quedarme, a ver si así, consigo adecentar mi destartalado blog. Tengo un amigo informático, muy bueno pero me la tiene jurada por no haber elegido un soporte accesible como discanet y bueno, ahí ando peleándome con blogger para intentar conseguir un diseño mínimamente accesible. Estaré atenta a todos y cada uno de tus trucos e intentaré llevarlos a pa práctica, teniendo en cuenta lo torpeda que soy para esto de la programación, ji ji ji. Me gustaría hacerte alguna consulta en privi asi que ahora mismo localizo tu dirección y si no es demasiada molestia, me gustaría aprovecharme descaradamente de tu experiencia, jajaja. Un besito y muchas gracias por compartir.
Cris.

Driwrgy dice...

Jaime, acabo de poner en práctica este truco y gracias al botón buscar me ha sido facilisimo encontrar las etiquedas a modificar o reemplazar. Pensé que me volvería loca buscando entre tanto código html pero me ha resultado facilísimo. Muchas gracias por compartir.

Jaime Trujillo Escobedo dice...

Claro que la hay, Mariona Monrós, pero necesito ver el truco instalado en el blog para poder decirte que propiedades CSS debes incluir en el código :S.

Jaime Trujillo Escobedo dice...

Tranquilo Fermín, la entrada está en camino.

Jaime Trujillo Escobedo dice...

Cris, será un placer poder ayudarte a conseguir e diseño que deseas. Debes saber que el correo electrónico no lo suelo revisar a diario y por tanto podría tardar en responderte (no estoy diciendo que no vaya a hacerlo).

Me alegra que hayas conseguido este truco. Ya verás lo sencillo que resulta blogger una vez te familiarizas con la plantilla.

Driwrgy dice...

Muchas gracias, Jaime y descuida, que quien espera a mucho, espera a poco, no tengo prisa, tómate el tiempo que necesites, faltaría más, jejeje. Yo también me alegro de estar consiguiendo resultados gracias a tus truquis. El mérito es todo tuyo, eres un crack.

^(.)^ Silvia ^(.)^ dice...

Hola Jaime. En mi blog he puesto el Leer más pero no de la forma que explicas aquí, sino simplemente con el salto de línea en el nuevo editor HTML. El problema es que "acorta" los post, hasta ahí perfecto, pero al regresar al blog no se ve el enlace de "Sigue leyendo ..." ¿Por qué? Puedes verlo si quieres en mi blog, en el primer mensaje publicado. Me gustaría usar esto ya que yo elijo qué y dónde cortar el post. Espero como siempre tu ayuda.

Jaime Trujillo Escobedo dice...

Muchísimas gracias por entenderolo, Driwrgy. Leer tus comentarios siempre es agradable. Abrazos!

Jaime Trujillo Escobedo dice...

Silvia, en breve voy a publicar una entrada explicando el truco para incluir el "leer más..." solo en las entradas escogidas, de manera que no recibas dicho error.

IVARSITO dice...

Funciona pero el texto se muestra sin justificar, sabes como arreglar ese defecto.

Jaime Trujillo Escobedo dice...

Ivarsito, en ese caso tan solo necesitas utilizar la línea que te muestro en negrita en este bloque de CSS que encontrarás en tu plantilla:

.post-body {
line-height:1.6em;
margin:18px 0 0.75em;
text-align:justify;
}

Marga dice...

Hola Jaime, por fin he podido hacerlo y creo que está todo bien, execpto que me sale solo una entrada y no 7 o 10 como he leido que pueden salir. Me he dejado algo ????

Gracias y un abrazo.
Marga

Jaime Trujillo Escobedo dice...

Marga, en el apartado de Configuración>Formato>Mostrar un máximo de... ¿Tienes un 1 en la casilla? Si es así, cámbialo por una cifra más alta.

Si sigue sin funcionar avísame.

Marga dice...

Buenos días Jaime, he revisado este apartado y tengo puesto un 4.

Un abrazo
Marga

Marga dice...

Buenos días Jaime, no estoy segura de si me salió bien la respuesta a tu pregunta. Por si acaso te lo vuelvo a decir.
Dónde me indicas tengo puesto un 4, lo he cambiado varias veces a ver si me salía bien, pero sigue apareciendo sólo la última entrada.

Un abrazo,

Marga

Speed Shop OnLine dice...

que mas llave una pregunta? se podria agregar un codigo o algunun nombre osea, pero para que se muestre en las entradas antiguas asi como se muestra en la portada osea qse muestre en todo el blog.
muchas gracias espero tu pronta respuesta

ÎVî$ÎTØ dice...

GRACIAS hermano quedo todo ok

Jaime Trujillo Escobedo dice...

Speed Shop, se trata de un truco que publicaré más adelante. ¡Saludos!

Jaime Trujillo Escobedo dice...

Marga, en estos momentos no se me ocurre lo que puede estar ocurriendo en tu plantilla. Desde que encuentre la manera de solucionarlo lo comentaré en la entrada.

Siento mucho la espera, ojalá de con una solución.
Abrazos.

Speed Shop OnLine dice...

gracias por la respuesta llave, estaré pendiente del truco... espero que sea pronto.

Jaime Trujillo Escobedo dice...

Speed Shop, aún tengo que retocar varias categorías y por tanto tardaré un tiempo en publicarlo.

jhon dice...

quisiera personalizar el leer mas con una imagen ¿como hago esto?

Jaime Trujillo Escobedo dice...

Jhon, reemplaza entonces la frase 'Leer más...' con este código <img src="URL DE LA IMAGEN"/> e incluye la dirección de tu icono / imagen en el lugar indicado.

Marga dice...

Hola Jaime, revisando lo de "cargando el blog" me he dado cuenta que no contesté a tu último comentario.

Al final lo he hecho con el "Seguir leyendo" que nos facilita blogguer entrando por "Blogger in draft"

De todas formas te agradezco tu interés y tu paciencia !!!

Un saludo,
Marga

Jaime Trujillo Escobedo dice...

Marga, me acordé de ti al preparar la entrada de hoy. Habla especialmente de un script que acelera la carga del blog ya que muestra las imágenes cuando el lector 'las quiere ver'.

Te recomiendo leer el post y probar el truco en un blog de pruebas. De veras, el resultado es prometedor.

¡Abrazos!

P.M. dice...

Jaime, tengo un problema. Puse este truco, pero cuando le doy a entradas antiguas fíjate lo que pasa. Compruébalo tu mísmo. Como puedo solucionarlo?

Gracias de antemano

Casi tengo 20

Jaime Trujillo Escobedo dice...

P.M, no logro entender lo que sucede al acceder a entradas antiguas dado que lo veo todo tal y como aparece en la portada. ¿Podrías describirme el error?

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo