"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.
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





Sigueme en Twitter
Foro SpamLoco
Jauría de perros






















56 comentarios:
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!!
Hola Me parece muy buena esta entrada por lo menos para mi. Saludos y gracias
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?
Hola Rosa, cambiamos links o no??
ROSA podrias poner una preview de como se ve esto? o algunas imagenes que podriamos poner en lugar de el: "leer mas" =)
rosa lo hice pero solo hace que la imagen dela entrada se vea en pequeño, lo de leer mas sigue igual :S
Yeltsin_Nicolas Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html
Ascesino Ya te contesté a eso en otro comentario o en otros dos mejor dicho.
No hago intercambio de enlaces, lo siento.
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.
Gracias Rosita, siempre con las respuestas precisas!
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?
Estimada ROSA ayudame a instalarle esto http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html es que no encuentro las opciones!
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">
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.
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
yo t puedo ayudar Yeltsin_Nicolas
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
gracias rosa simpre al pendiente de todo jaja :D
Hola Rosa :) Tengo un problema con el widget de seguidores (otra vez). Pasa que no aparece y no sé que hacer. Saludos ;)
Veo qe el problema no es sólo mio. ¿Será de Google? :-|
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
Trecarunga, tengo el mismo problema con el widget de seguidores, pero solo en FF en donde desapareció. En IE, se ve normal...:S
@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...
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.
excelente truco lo estoy probando
http://wfx2009.blogspot.com/
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!!!
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 :)
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!!
:)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
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
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
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;
Rosa, como siempre infinitamente agradecido! Haces que esto del blog sea ademas de util divertido, porque luego es una tortura hacer las cosas. Gracias!
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!
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!!
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.
"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".
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.
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
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.
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!
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.
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!!!!
denme su opinion que tal quedo y que les parece el diseño
http://detodoparatuvida.blogspot.com/
Excelente noticia Rosa, ya dejaremos de hacer pruebas con esos widget de antes, por fin! :)
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!!!
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...
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
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
Muchas gracias por el truco Rosa. Ya lo he puesto en mi web y va perfecto elgatodeltrastero.com
Gracias Rosa. Me ha venido de maravillas y ha quedado hermoso.
Gracias por siempre compartir herramientas tan maravillosas
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
SANTUARIO Es automático y además sencillisimo si los pasos se hacen de forma correcta...
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!
hola rosa sonseguiste ña solucion a mi problema lo unico que me falta para terminar mi blog es eso ayudame si please
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...
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