75

"Leer más" con miniatura de imagen ( script en la plantilla)

Son muchas las personas que me consultan sobre el tema y que aún tienen problemas para saber como alojar los script en algún servidor externo a Blogger.
Como algunos ya sabéis, muchos de los scripts que usamos en el blog, pueden alojarse sin problemas en la misma plantilla.

En el caso de la entrada que publiqué hace algún tiempo "Leer más" con miniatura de imagen, es bastante aconsejable hacerlo así, ya que además de ahorrarnos problemas de dependencia con algún servidor externo, el script no ocupa demasiado tamaño.

Nota:

Si vais a añadir este efecto por primera vez, es aconsejable que leáis antes la entrada anterior al respecto, más que nada porque encontraréis información de como funciona exactamente, así como un ejemplo en funcionamiento y las modificaciones que pueden hacerse.

Para los que ya lo estáis usando, fijaros que la única diferencia está en el código del paso [3] y que no deberéis modificar nada más.

[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>


[3] Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head>

Justo antes de esa etiqueta (</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>

75 comentarios:


Ascesino96

Hola rosa, justo lo que buscaba, bueno, gracias!!!
Tengo una duda, no encontre nada sobre esto, pero como hago para poner ese boton que hay en tu blog de pruebas que te da la opcion de agrandar y achicar el texto, bueno, espero tu respuesta, y te hago una pregunta quieres intercambiar links??, bueno, nos vemos, tu blog es el mejor, nos vemos, chau!!

..NaNy..

Hola Me parece muy buena esta entrada por lo menos para mi. Saludos y gracias

Yeltsin_Nicolas

Amiga, necesito que mi blog namas aparescan los puros nombres de las entradas, nada de texto ni de imagenes parecido a este blog,
www.puntojuegos.net :)
Me ayuda?

Ascesino96

Hola Rosa, cambiamos links o no??

Softread

ROSA podrias poner una preview de como se ve esto? o algunas imagenes que podriamos poner en lugar de el: "leer mas" =)

Softread

rosa lo hice pero solo hace que la imagen dela entrada se vea en pequeño, lo de leer mas sigue igual :S

Rosa

Yeltsin_Nicolas Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html

Rosa

Ascesino Ya te contesté a eso en otro comentario o en otros dos mejor dicho.
No hago intercambio de enlaces, lo siento.

Rosa

Softread Tal como indico en la entrada, si revisas la anterior, verás una imagen de como se ve y además un enlace a un blog de pruebas con el código aplicado.
Si, por eso es miniatura, porque se ve pequeña, y cuando pinchas en la página de la entrada se ve tal como la has subido.

Silvi

Gracias Rosita, siempre con las respuestas precisas!

Softread

ROSA, pense que este post era para saber como poner una imagen al "leer mas" para que tuviera una imagen en lugar deel texto: leer mas: tienes algun post con eso?

Yeltsin_Nicolas

Estimada ROSA ayudame a instalarle esto http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html es que no encuentro las opciones!

Rosa

Softread Para eso tan solo tienes que sutituir el texto que dice "Leer más..." en el código por el código que mostraría la imagen, o sea esto:
<img src="url de la imagen">

Rosa

Yeltsin_Nicolas Deja la consulta en la entrada que corresponde por favor y no me envíes un comentario y un email a la vez sobre el mismo tema.

En cuanto a la ayuda, lo único que puedo decirte es que lo hagas con paciencia y revises también los comentarios... mi ayuda es la que doy en las entradas, puedo aclarar alguna duda o problema, pero en las entradas está todo explicado lo mejor que puedo.

BOFOCAT

hola rosa como simpre muy buenos consejos ese efecto lo abia visto en una plantilla y me parecio super tengo una duda ves q los nuevos xploradores traen pestañas y alado se ve un logito como en blogger el un b y el el tuyo una chava conn su pc como cambio ese icono q aparece de antemano graicas y ten un super dia

BOFOCAT

yo t puedo ayudar Yeltsin_Nicolas

Rosa

BOFOCAT Eso que dices se llama favicon, y puedes ver como hacerlo en esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html

BOFOCAT

gracias rosa simpre al pendiente de todo jaja :D

TRECARUNGA

Hola Rosa :) Tengo un problema con el widget de seguidores (otra vez). Pasa que no aparece y no sé que hacer. Saludos ;)

TRECARUNGA

Veo qe el problema no es sólo mio. ¿Será de Google? :-|

Daniela

HOla Rosa
es bunísmio tu blog. Estuve buscando en tus etiquetas a ver si podia encontrar algo sobre cómo usar el gadget de preguntas en blog pero no encontré nada. ´Si lo posteaste ya podrás referirme al mismo? De lo contrario te agradeceré me ayudes con eso. Yo lo agregué en mi blog pero no sé por qué razón no me permite incorporar una pregunta.
Saludos

Manfenix

Trecarunga, tengo el mismo problema con el widget de seguidores, pero solo en FF en donde desapareció. En IE, se ve normal...:S

Rosa

@TRECARUNGA, @Manfenix LLeva días dando problemas... al menos yo, no paro de recibir consultas sobre ello... :S
Supongo que están de nuevo tratando de mejorarlo, ya que siempre ha dado problemas...

Rosa

Daniela ¿Hablas del gadget Encuesta? Si es así, ese gadget seconfigura (las preguntas y demás) antes de colocarlo... de todos modos si algún fallo tiene, no podemos hacer nada, ya que es un gadget que solo Blogger controla.

Fernando

excelente truco lo estoy probando

http://wfx2009.blogspot.com/

"Una argentina más"...

Perdón Rosa! Esta noche pruebo lo que me indicás sobre Leer más; pero estaba tratando de descubrir cómo hacer para que, en lugar de Enlaces a esta entrada, debajo de cada post, me aparezca Comentarios. Me fijé en la plantilla original y no me doy cuenta de cómo puedo modificar ésto y si es que se puede. ¿Se puede?
Cada vez que alguien desee dejar un comentario tiene que clikear en Enlaces a esta entrada, y lo mejor sería que directamente dijera Comentarios. Muchas gracias y prometo no molestarte más... por un tiempo. Gracias por la ayuda que me brindás!!!

MALINA

Rosa yo necesito ayuda para colocar el código de Adsense en ciertos sitios del blog.

Te cuento...

Puedes añadirlos como gadget o copiar el código directamente de Adsense, es un script pero que te da la opción de poder hacer un seguimiento de cada uno de los bloques de anuncio. Pero me encuentro con el problema de que no se como añadirlos, he probado con un simple html/javascript y no me aparece nada. Supongo que lo tengo que colocar en la plantilla, pero no se exactamente como hacerlo. Unos van en el sidebar y otros por encima de las entradas.

A ver si me puedes orientar cuando tengas un ratillo, vale?

Muaaaaaaa

Hace mucho que no te veo por Twitter, espero que estés bien :)

Suso

Hola Rosa.

De todos los blog que he consultado para aprender a modificar la plantilla HTML, este es, sin duda, el mejor con el que me he encontrado.

Llego aquí recomendado por Max Birrax, que no sé hasta qué punto sabrás quién es, pero que frente todas las dudas que le planteé de este tipo, me dio la misma respuesta: elescaparatederosa...

Así que, enhorabuena!!! No se consiguen 1303 seguidores con un blog mediocre!! Más bien, hay que andar cerca de la categoría de Maestra para atesorar esa legión de incondicionales. Por cierto, ya son 1304.

Un saludo!!

BOFOCAT

:)HOLA rosa buen dia oye me surgio un problema com una plantilla q descargue http://miespacio-z.blogspot.com/ apnas la estoy armando es de un proyecto q tengo pero lo q no puedo es cambiar el color de texto de los wiget esq en html muevo algo y no surge efcto gracias por leer spero y me puedas ayudar

Rosa

MALINA Para colocar los anuncios de Adsense directamente en la plantilla, después de copiar el código del anuncio hay que "transformarlo" para que Blogger pueda leerlo, sino aparecerá en blanco.
Puedes hacerlo en este convertidor, por ejemplo:
http://blogcrowds.com/resources/parse_html.php

Rosa

Suso Claro que recuerdo a Max y sus viajes je,je, una temporada atrás me visitaba bastante a menudo, aunque supongo que no ha dejado de hacerlo, sino que ya le ha pillado el "truco" a esto de Blogger...

Gracias por tu visita y por tus palabras, aunque lo de maestra me viene grande... más bien "compartidora" eso es más acertado, ya que lo que hago es compartir lo poco que se o que voy descubriendo.

Un abrazo :D

Rosa

BOFOCAT Para cambiar el color del texto del contenido de los widget, sería en esta parte del código:
.sidebar .widget-content{padding: 10px; 0px 10px}

Añadiendo la línea para el color:
.sidebar .widget-content{padding: 10px; 0px 10px;
color: #dddddd;}

Para el título de los widget, el sistema sería el mismo pero el código se añadiría en :
.sidebar h2{background: url(http://i34.tinypic.com/20krwv8.jpg) no-repeat;

Rorrokchorro

Rosa, como siempre infinitamente agradecido! Haces que esto del blog sea ademas de util divertido, porque luego es una tortura hacer las cosas. Gracias!

"Una argentina más"...

Gracias Rosa!!!! Ya pide solucionar lo de Leer más... y que me aprezca la palabra Comentarios. Estoy re contenta!!!! Graaaaacias!!!! Decidí hacer un blog de prueba, es sólo para eso, para ir probando distintos trucos como quien dice "en borrador", como no estoy muy canchera todavía prefiero hacerlo así, de esta manera meto menos la pata. Ahora estoy buscando alguna entrada tuya que me indique cómo colocar el pajarito de Twiiter que tenés para seguirte: el título sería Twiiter para seguirme en blogger??, bueno, pruebo y espero darme cuenta y encontrarla. Sos un amor!!!!! Que tengas un lindo día!

Ascesino96

hola rosa, lamento decirte que tengo una mala noticia, pero tambien una buena, bueno, primero la buena: encontre un lugar en donde alojar srcipts y si funciona, xooimage.com y ahora la mala, ya que puedo alojar scripts, muchos ahora ya me funcionan, pero el que sigue sin funcionar es el de últimos comentarios, bueno, espero tu respuesta, aver si hay algun nuevo código, porque el de blogger in draft, no me gusta, y uno de los feeds no dice quien escrivio el comentarios, bueno, nos vvemos, chau!!

Rosa

Ascesino96 No hay ninguna nueva opción y cualquiera de las que ya hay, si como dices ese alojamiento funciona, debería de funcionar correctamente.

Rosa

"Una argentina más"... Así es, nada mejor que usar un blog de pruebas antes de instalar nada :D
Arriba en mis etiquetas, pincha en "Twitter".

Vipper Mobile

Rosa no entiendo que diferencia hay entre esta explicación que das acá y la que hay en el leer mas original. Qué corrige o que mejora este nuevo codigo?
Gracias.

"Una argentina más"...

Rosa! Vos me podrías explicar qué diferencia hay entre Fee RSS, Seguidores y Twitter? En mi blog seguí tus instrucciones y coloqué un pajarito de TW con texto trabajado en PSP. Me gustab cómo quedó pero no sé bien para qué sirve (no sé inglés y el traductor mucho no me aclaró), coloqué el gadget de Blogger Seguidores... es igual que colocar un ícono de Feed RSS? Me gusta más este último si son lo mismo, es más original y se lo puede personalizar. Qué decís vos? Perdón por tanta preguntería y graaaacias!!!!
Me alegro que me des el visto bueno con lo del blog de pruebas... por una vez pensé antes de hacer!!! jajajaja

Rosa

Vipper ¿No has leído las entradas? en esta el script está en la propia plantilla, en la otra hay que subirlo a un alojamiento... solo se trata de leer para entender.

Vipper Mobile

Siii mil disculpas, no me di cuenta, quise borrar el mensaje y no se podia y no puse otro para no molestar! Perdonnnnn.
Muchas gracias Rosa!

Rosa

Una argentina más Por supuesto que no son lo mismo. Si pinchas en mi sidebar donde dice ¿Qué es RSS? tendrás la información sobre eso.
Seguidores es sencillamente un gadget de Blogger, donde las visitas pueden anotarse para seguir tu blog desde su panel.
Y Twitter, pincha en la etiqueta de mi blog que dice precisamente Twitter y en alguna entrada sobre el tema encontrarás información.
Por descontado que de los tres, el más importante y casi imprescindible es el RSS.

"Una argentina más"...

Como siempre Rosa... gracias por tu respuesta y por estar siempre ahí, lista para responderme, aclarar mis dudas y ayudarme. Te mando un fuerte abrazo!!!!

Administrador

denme su opinion que tal quedo y que les parece el diseño

http://detodoparatuvida.blogspot.com/

Fede

Excelente noticia Rosa, ya dejaremos de hacer pruebas con esos widget de antes, por fin! :)

Silvia Beatriz

Hola Rosa! pude aplicar el truco pero igual queda todo un espacio en blanco (el que ocuparía la entrada) antes de visualizarse la siguiente. ¿Qué puedo hacer? La dirección es:
www.escobarlarevista.blogspot.com
Gracias!!!

Rosa

Silvia Beatriz Veo que solo ha sucedido eso en tu última entrada, en las otras todo parece estar bien, así que supongo que hay un error de código o algo en esa última... ¿usas Word para editarlas? porque es incompatible con Blogger y suele dar ese tipo de problemas...

Eduardo

Hola Rosa, he conseguido implementar (de forma bastante chapucera) la posibilidad de publicar en forma abreviada (con el leer mas...) o simple basándome en un condicional. El único que encontré mas o menos posible fue basándome en el autor de la nota.

Si la nota la postea el coordinador, toma la forma abreviada, si no, la extendida.

Por supuesto que ello implica tener a por lo menos dos usuarios con cuentas de edición en el blog, y postear desde dos navegadores distintos, cada uno con una cuenta abierta.

Si necesitas mas datos puedo intentar clarificar el embrollo que es mi código y enviártelo.

Gracias por los excelentes consejos que nos brindas día a día
Eduardo

Rosa

Eduardo Te he entendido :D Imagino que usas las condicionales de Blogger. No es chapucera, de hecho para un blog compartido estaría genial... entiendo que tu haces como que eres dos `personas distintas a la hora de publicar, je,je, vaya lío :S

J.Rodríguez

Muchas gracias por el truco Rosa. Ya lo he puesto en mi web y va perfecto elgatodeltrastero.com

Sol

Gracias Rosa. Me ha venido de maravillas y ha quedado hermoso.
Gracias por siempre compartir herramientas tan maravillosas

SANTUARIO DE LA INMACULADA VIRGEN DE LA PUERTA

SALUDOS, HE SEGUIDO TODOS LOS PASOS, DE ESTA ENTRADA PERO NO ME FUNCIONA, ¿TENGO QUE AGREGAR ALGO EN EL FORMATO DE PLANTILLA DE ENTRADA? O ES AUTOMÁTICO? TE AGRADECERÍA MUCHO LA AYUDA

Rosa

SANTUARIO Es automático y además sencillisimo si los pasos se hacen de forma correcta...

Seagirl

Mil gracias Rosa!

Ha sido todo un hallazgo este blog en general, y este post en particular. Ya que la forma que explicaste anteriormente (que fue a donde me remitió google) me funcionó pero cuando volví a entrar en el blog, ya no funcionaba... con esto, parece que ya es más definitivo.

En fin, que muchas gracias y ahora... a seguir mirando este "pedazo" de escaparate que a buen seguro encontraré muchos truquillos interesantes!

El h@Cker De la vel@

hola rosa sonseguiste ña solucion a mi problema lo unico que me falta para terminar mi blog es eso ayudame si please

Rosa

El h@Cker De la vel@ No se que solución quieres que te de... en ese blog está muy bien explicado a pesar de estar escrito en español.
Sigue esas instrucciones y ya está.
Para explicartelo yo es imposible en un comentario, y para hacer una entrada requiere de tiempo, yo tengo una vida como todo el mundo además del blog...

Nightmare

hola rosa, saludos, como hago para que la imagen se quede grande? no me gusto como se ve pequeño

Rosa

Nightmare El título de la entrada ya lo dice "con miniatura de imagen" , así es como se ve hasta que pinchas en el título de la entrada, entonces se ve normal...

Nightmare

oks Rosa optare por colocar el de efecto deslizante de Scriptaculous, gracias

Jupet

HOLA ROSA MUCHAS GRACIAS QUEDO EXELENTE MIRA TENGO UNA DUDA SERA QUE HAY LA MANERA DE COLOCARLES UN POCO DE MAS PALABRAS A POST GRACIAS MIRA COMO SE VE... http://deskargalogratis.blogspot.com/

Rosa

Jupet En estás dos líneas del código:
summary_noimg = 430;
summary_img = 340;

La primera es que cuando la entrada no tienen imagen, se ven 430 caracteres... aumenta ahi el valor.

Y la segunda cuando hay imagen lo mismo...

nonochocono

Hola Rosa, lo h eprobado y va de maravilla, lo que no sé es si a alguien más le pasa lo que a mí: cuando la imagen se trata de un video, al principio d ela entrada me pone un montón de código que no sé cómo eliminar. ¿Quizás redimensionando el espacio especificado para la imagen?

www.nonochocono.blogspot.com

Gracias

Rosa

nonochocono No sirve cuando la imagen es un vídeo... en ese caso lo que hace la gente es incluir una imagen al principio de la entrada para que sea esa la que se muestre.

nonochocono

Ok. Gracias Rosa, algún apaño haré entonces. Un saludo y gracias por todo.

STBugman

Hola Rosa! Muy útil, sí señor, pero tengo una duda...
¿Hay alguna forma de reemplazar el texto "Leer más..." por alguna imagen que lo diga?
Gracias! ^^,

Rosa

STBugman Código del paso [2], donde dice: Leer más... borras eso y colocas la url de la imagen:

<img src="AQUI LA URL"/>

Gaviota

Hola Rosa,

Genial lo tuyo. Una pregunta, he estado intentando generar el efecto hover en la imagen, similar al del menú con imágenes, pero no lo logro. ¿Será que tiene que ver con el hecho de que la imagen se inserte en la expansión de plantilla de artilugios?

Agradezco tu ayuda. Nuevamente felicitaciones.

Micaela

Hola Rosa!
Buenisimo el truco!
Pero sabes que no en todas las entradas me respeta los caracteres que he puesto.
En una x ejemplo solo puse un link, y no me aparece la entrada completa... se puede hacer algo?

Este es mi blog de pruebas:

http://micaela-pruebas.blogspot.com/

Gracias!

Rosa

Micaela Si te fijas en la explicación de la entrada, ahí dice que puede cambiarse la cantidad de carcteres que la entrada mostrará, por defecto es 340 así que la entrada que tenga menos (como la del enlace) se verá cerrada, pero si disminuyes el valor entonces las otras quedarán fatal pues mostrarán apenas una línea... o lo dejas así o amplias el contenido de esa entrada...

Vipper Mobile

Rosa perdona la molestia, pero me habías dicho dónde podía ver el tema para modificar el código de los comentarios dado que tengo todo habilitado y no me pueden dejar comentarios, pero no encuentro el mensaje donde me decías que estaba eso, podrías pasarme el link porfa.
Muchas gracias y perdona.

Rosa

Vipper Mobile Supongo era esto:
http://elescaparatederosa.blogspot.com/2008/06/formulario-de-comentarios-blogger.html

Vipper Mobile

Muchas gracias, como siempre una genia vos!!!

LXX veces VII

Estaría perfecto si en vez de redimendionar las imágenes (que dan lugar a distorciones) apareciera un recuadro que mostrara lo que en el cupiera, como si se recortara la imágen... Rosa, porfavor si hay una posibilidad de conseguirlo hazmelo saber que me lo llevo!!! ;) Gracias guapa...

Snark

holas rosita que tal disculpa que te moleste pero en mi blog no aparese la opcion leer masssss :( gracias

Rosa

Snark NO aparece?... porque has añadido este efecto y no sale, ¿o porque?... con esa explicación a medias, no se que quieres te diga....



Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

lejaniaimposible@hotmail.com

 
Ir Arriba