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.

Personalizar el "Leer más..." que ofrece blogger

Desde hace un tiempo, blogger personalizó un poco más el editor de entradas.

Entre muchas de las nuevas funciones, destaca la opción de poder "dividir" una entrada (aplicar el truco, leer más) pulsando el botón "insertar salto de línea".


Al incluir el salto de línea, el post se divide en dos mitades. La mitad de arriba será visible en la portada, mientras que el resto del artículo podrá leerse al pulsar en "Más información..."

Con este truco aprenderás a decorar un poco esa frase, cambiar el texto por algo personal o agregar algún que otro icono.


Diseño>edición HTML>expandimos artilugios


Para cambiar la frase por algo más personal:

Busca este bloque de código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

Y sustituye <data:post.jumpText/> por tu frase personal (por ejemplo: Sigue leyendo...).


Para incluir un icono:

Busca la etiqueta ]]></b:skin> y agrega este bloque de CSS encima:

.jump-link{
background: transparent url(URL DE TU IMAGEN) no-repeat left bottom;
}

Cambia URL DE TU IMAGEN por la dirección de tu icono.

La imagen aparecerá a la izquierda de tu frase. Si deseas que aparezca a la derecha cambia la palabra left por right.


Para agrandar el tamaño de letra:

Agrega la línea font-size: 14px; dentro del bloque anterior (debajo de .jump-link{). Cambia la cifra (14) por el tamaño que más se adapte a tu blog.

Más información en Vagabundia. ☺

J. Villegas Ruíz dice...

y como hago para cambiar a ese editor? yo todavia tengo el viejo jejeje

J. Villegas Ruíz dice...

ya lo descubri! y hasta lo aplique peor tengo un problema! no se porque altera todo el desño de mi plantilla.... que cosa tan loca...

José Luis López Recio dice...

Está muy bien el truco.
Saludos

Inmortal dice...

Interesante la nueva caracteristica, aunque al editor deja mucho que desear.... en fin, poco a poco va mejorando el buen Blogger.

Saludos Jaime ;)

Jaime Trujillo Escobedo dice...

Ville, ¿a que blog te refieres? ¿a qué altera? Ví el de Ilusión difusa y no veo que altere al diseño :S.

Jaime Trujillo Escobedo dice...

Me alegra que te guste, joselop44.

Gracias por tu comentario ;).

Jaime Trujillo Escobedo dice...

Guillermo Vazquez M., yo pienso parecido... no lo estoy usando, prefiero el antiguo editor :D.

¡Saludos!

Laube Leal dice...

Jaime... yo no tengo ese editor de blogger. Y me fijé ayudando a un amigo, en su casa, con su portátil... Pensé "es distinto al mío". Qué puedo hacer para actualizar el editor????

Anónimo dice...

no entiendo esque yo descargo mis plantillas no tengo las viejas y no se si pasa algo con eso

Jaime Trujillo Escobedo dice...

Laube, aunque tenía una entrada pendiente para explicar cómo "instalarlo" te doy los siguientes pasos:

Inicia sesión en blogger > Configuración > Básico > Configuración global (al final de la página).

Selecciona la opción Editor actualizado y guarda la configuración ;).

Jaime Trujillo Escobedo dice...

wwe-cv, no se trata de las plantillas, sino de la configuración que tienes en tu blog.

Lee el comentario número 10 de esta página y podrás configurar el nuevo editor :D.

J. Villegas Ruíz dice...

te puedo pasar un correo para mostrarte con imagenes que es lo que pasa? con dos capturas de pantallas se puede ver claramente lo que ocurre... lo que pasa es que si lo aplico en mi blog, ocurre lo que te digo se corta el diseño del blog... por eso no lo aplico y por eso no lo vistes... disculpa las molestias!

Anónimo dice...

y en eso en que me afecta en el blog

Anónimo dice...

es grandioso ya lo ise ya puedo y se ve mas renovado muchisimass gracias

Laube Leal dice...

Jaimeeeeeeeeeeeeeeeeeee... muchísimas gracias!!!!!! Ni me había dado cuenta de esa opción!!!!
Un besote!!!!!
Laura

Anónimo dice...

ok ya pude jaime pero quiero saber como porque no encuentro ese codigo o si no lo encuentro donde lo coloco en head

Jaime Trujillo Escobedo dice...

Ville, al parecer no se trata de un error en blogger o en la aplicación "Leer más..." sino en el lugar en el que se coloca la división.

Te dejo este post en el que JMiur explica cómo solucionarlo ;).

Jaime Trujillo Escobedo dice...

Laube, me alegro de haberte ayudado. Es cierto, la configuración está un poco "escondida" :D.

¡Saludines!

Jaime Trujillo Escobedo dice...

wwe-cv, busca la etiqueta </head> y un poco más arriba encontrarás la etiqueta ]]></b:skin> (que es dónde debe pegarse el bloque de CSS).

Puedes encontrar cualquier línea abriendo el buscador de tu navegador. Para ello utiliza las teclas Ctrl y F.

Si al aplicar este truco, el diseño de tu blog se ve afectado, dale un vistazo al comentario número 17 y encontrarás una solución ;).

Anónimo dice...

jaime no encuentro solucion solo no sale nada y tengo que poner un texto con el link mira este ejemplo
has clic aqui

Jaime Trujillo Escobedo dice...

wwe-cv, el Leer más debe aplicarse cuando hay contenido suficiente (que después dividimos). En el post que me enseñaste sólo veo la línea del enlace y debajo el vídeo.

Prueba a poner una línea de texto (encima del código del vídeo) y después, con el cursor en medio del vídeo y el texto, aprieta el botón "salto de línea".

Cristian Soriano dice...

HOLA!!! yo lo tengo hecho como dice en la pagina blogger pero quiero aumentarle el tamaño...como puedo hacer?? me estoy pegando una viciada terrible con tus trucos jaja

Jaime Trujillo Escobedo dice...

Hola Cristian! Para agrandar el tamaño del texto añade en el bloque CSS la línea font-size:20px;. El valor, 20px, puedes editarlo a tu gusto.

Cristian Soriano dice...

disculpa no entendi eso del bloque soy medio primitivo te aclaro jaja

Jaime Trujillo Escobedo dice...

Cristian, cuando nombro el término "bloque" me refiero a encontrar una línea en particular (en el caso del primer código, la línea verde) pero teniendo en cuenta que debe aparecer en una estructura similar a la del código de la entrada.

En el segundo caso, el bloque CSS son los atributos necesarios para personalizar el html que forma el enlace 'Leer más' de blogger.

SoyunFDF dice...

Perdón pero es que soy muy nuevo en todo esto y no encuentro lo del salto de página, no sé cómo poder poner esto de leer más o seguir leyendo o more, se me ve el artículo entero. Espero que me puedas ayudar, un saludo.

Jaime Trujillo Escobedo dice...

Indias, lo más probable es que tengas configurado el último editor para escribir entradas (no es algo extraño, incluso yo lo prefiero).

Puedes configurar el nuevo editor y encontrar así dicho botón accediendo a Configuración>Básico>Seleccionar editor de entradas>Editor actualizado.

¡Guarda la configuración y listo!

SoyunFDF dice...

Ok ya lo he cambiado Jaime y con éxito, muchas gracias. Lo que ahora no encuentro por ningún lado es para cambiar "más información" por otro texto. Me estoy volviendo loco, creo que lo he mirado 7 veces y no lo veo, porque estar tiene que estar ¿no?

Jaime Trujillo Escobedo dice...

Por supuesto que debería estar, Indias, al no ser que la plantilla sea una de las nuevas de blogger. En esta entrada explico un truco muy similar, también manual (el leer más lo pones tú en las entradas que desees) y que puede personalizarse por completo.

SoyunFDF dice...

Es minima black del 2004, así que seguiré buscando para ver si lo consigo cambiar. Por cierto eres un fenómeno, no hay una página en la que presten la atención como tú...Jaime=crack

Jaime Trujillo Escobedo dice...

¡Jajaja muchas gracias Indias! Como te comenté anteriormente, el otro truco es más efectivo.

Abrazos!

Cogedor_barato dice...

Excelente ayuda man. Ignoraba que estaba disponible esta opcion y me sirve mas que la otra donde el "leer mas" queda siempre aunque no oculte nada :D

Un tip que quiero dejar es que resulta "mas facil" agregar el url de la imagen en el espacio donde personalizas el mensaje de Leer mas, en vez de colocarla arriba del tag de ]]></b:skin>
ya que te pueden salir la imagen para un lado y el texto para otro(para los principiantes es frustrante).


seria reemplazar <data:post.jumpText/>

por

<img src="url de la imagen" /> Seguir leyendo


Asi nos queda todo juntito y listo :D
un saludo

Jaime Trujillo Escobedo dice...

¡Gracias por el aporte, Cogedor! Me alegra que hayas disfrutado con este truco.

Saludos.

"Andromeda" dice...

Hay gracias te amo!! ... Jaja.. Sorry es la emocion esque despues de intentarlo miles y miles de veces con cientos de consejos el tuyo al fin me sirvio.. Muchisimas gracias :D

Jaime Trujillo Escobedo dice...

Jajaja ¡Qué alegría Andromediita! Espero que sigas personalizando el blog así de bien, la plantilla está cada vez más bonita.

Gracias a ti por comentar.

EL Rickyy dice...

y si quiero lo quiero eliminar como hago? por que en mi blog no me gusta como queda y la plantilla que le puse lo tiene, www.musica-nuestra.blogspot.com

Jaime Trujillo Escobedo dice...

EL Rickyy, no he podido acceder a tu blog. Comprueba los permisos en el apartado de Configuración y envíame la URL válida para que pueda ayudarte.

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