Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada

Lo que vamos a hacer es reducir las entradas mostrando un resumen con una pequeña imagen.

El texto se mostrará resumido cuando navegamos por las páginas principales o por etiquetas, una ves que entremos a la entrada esta se vera completa.

La imagen se mostrará de un tamaño más pequeño que la original, y al entrar a la entrada, la imagen se verá con el tamaño original.

La imagen reducida se mostrará siempre que la entrada tenga una imagen.

Si la entrada no tiene ninguna imagen, se mostrará otra imagen que sera única, asignada en el código JavaScript.

Ver Blog de ejemplo:

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Paso 1:

Justo arriba de </head> poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 125;

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:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

if(img.length<1) {
imgtag = '<span style="float:left; padding:10px;"><img src="http://3.bp.blogspot.com/_WvACVGW1iPE/TDpRYmfdOoI/AAAAAAAABIQ/mQaJO0HZZj4/s1600/125x125-logo.png" 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>

Cambios que podemos hacer:

summary_noimg = 400;: Número de letras que se mostrará en el resumen con imagen única.
summary_img = 400;: Número de letras que se mostrará en el resumen con imagen reducida.
img_thumb_height = 125;: Altura de la imagen reducida.
img_thumb_width = 125;: Ancho de la imagen reducida.
.../125x125-logo.png: Imagen única que se mostrará al no tener la entrada una propia.
style="float:left; padding:10px;": Estilo de la imagen.

En el ejemplo la imagen tiene padding 10px, y se mostrará a la izquierda.

Se puede personalizar o mostrar a la derecha cambiando left por right.

Paso 2:

Ahora tendremos que buscar <data:post.body/>

Y cambiaremos por el siguiente código:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='summarythumb' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div align='right' class='rmlink' style='clear:both;padding:5px 10px 0 0'><a expr:href='data:post.url'>Leer la publicación:</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Cambiamos el texto "Leer la publicación:" por otro, o por una imagen.

Podemos personalizar el estilo del resumen con las clases summarythumb y/o rmlink.

Veremos los cambios y si todo esta bien guardamos la plantilla.

Agregado adicional:

Si queremos personalizar aun mas el post resumido podemos poner las clases dentro de condicionales.

Ejemplo:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post h1 { ............}
.post-title a:link , .post-title a:visited{ ...............}
.post-title a:hover {..........}
.post-body {...............}
.post-footer-line-1 {..............}
.post {.............................}
#main { .........................}
</style>
</b:if></b:if>

Si ya estamos utilizando este código y no tienen la opción de la imagen única, que muestra al no tener una imagen en la entrada.

Simplemente agregar al código JavaScript, el siguiente código:

if(img.length<1) {
imgtag = '<span style="float:left; padding:10px;"><img src="http://3.bp.blogspot.com/_WvACVGW1iPE/TDpRYmfdOoI/AAAAAAAABIQ/mQaJO0HZZj4/s1600/125x125-logo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

Para las siguientes entradas mostraré otras formas de reducción.

Parte 2: La primera entrada se muestra con tamaño original sin resumen.
Parte 3: Agregaré un botón en lugar de "Leer la publicación:", el cual abrira la entrada original por dejajo del resumen.

Ejemplo Parte 2:

Ejemplo Parte 3:

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
La hormiguita dijo...

Hola, quiero hacer esto en mi blog... pero no entiendo muy bien que hago una vez que encuentro eso lo saco esa lina sola y pongo el código???

Vku dijo...

Si es esto, Si:

Paso 2:

Ahora tendremos que buscar <data:post.body/>

Y cambiaremos por el siguiente código:

Vku dijo...

No se por que tienes 2, es raro.

A ver si tienes así:

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

La hormiguita dijo...

Ya está todo solucionado, :5) no se porque habia dos post data , estaba haciendolo en un blog de pruebas, para ver como quedaba primero y parece que el código estaba mal, puse una plantilla que estaba bien, vi como queda y ahora lo voy hacer en el blog.
Muchas gracias.:27)

Vku dijo...

Me parecía raro, pero bueno.
Me alegro que te guste, que te quede lindo.
Vku.

Mith86 dijo...

Hola VKU, yo tengo un problema con los thumbs, ese tema que uso, se llama TurnOutMAg el tema es que no importa que haga, solo puedo ver 3, o 2 thumbs en mi pagina principal...

Intente bajando otros estilos parecidos de themes, pero siempre obtengo el mismo resultado, arma un blog nuevo, limpito, cargue el theme, y me sigue pasando lo mismo, ya no se que hacer.

No se si influye, pero use firefox para navegar. sera eso?... ya no se que pensar o hacer jaja. Saludos

Vku dijo...

Al contrario, con firefox es mejor.

Ve a Configuración, Formato.

Donde dice "Mostrar un máximo de" cambia por la cantidad de entradas que quieras mostrar.

O lo puedes hacer desde Diseño, editar en entradas del blog.

Vku dijo...

Mith86. te elimine el comentario por una mala palabra :23)

El problema te pasa solo en un blog ya que en el de pruebas va bien por lo que vi.

Comapara las configuraciones a ver si encuentras que esta mal.

Si no cambia el nombre del blog por otro y al de pruebas le pones el nombre principal.

Jesuseltodopoderoso dijo...

Hola ya segui todos los pasos que pones pero cuando veo la imagen miniatura no e la que to quiero quisiera saber como poner la imagen miniatura del videos que tengo en mi entrada en ves de la imagen. Saludos espero tu respuesta

Vku dijo...

En donde esta para ver?

La miniatura que muestra es la primera publicada en la entrada y si no tiene ninguna imagen la entrada toma la que has cambiado en lugar de http://3.bp.blogspot.com/_WvACVGW1iPE/TDpRYmfdOoI/AAAAAAAABIQ/mQaJO0HZZj4/s1600/125x125-logo.png como dice.

Jesuseltodopoderoso dijo...

pero he visto blogs que publican videos y conbierten el video en thumbnail en ves de poner una url como solo publico videos y no imagenes deberia usar el thumb del video pero no sucede eso ¿sabes algo al respecto?

Jesuseltodopoderoso dijo...

http://3.bp.blogspot.com/_WvACVGW1iPE/TDpRYmfdOoI/AAAAAAAABIQ/mQaJO0HZZj4/s1600/125x125-logo.png esta url me pone una imagen de tu blog en todas mis entradas y no es lo que quiero por que se repite mucho checa este blog http://seguidoresdelreydereyes.blogspot.com/ en cada entrada tiene el thumb del video o de la imagen.

Vku dijo...

si le preguntas al administrador del blog tal ves te diga como esta echo.

Con esta entrada no te va a funcionar las imagenes del video

es dificil extraer la id de youtube.

tal ves lo genere con LinkWithin

fijate esta página: http://btemplates.com/2009/blogger-template-bloggertube/

Hector dijo...

Saludas VKU, ya tengo las entradas reducidas (gracias a ti) pero me encontré con un problema, al hacer una página estática o independiente, aparece reducida y no completa (que es como la quiero). Puede haber solución para esto?
GRACIAS!

Vku dijo...

Hector:

Si tienes razón, no lo tome en cuenta en el momento de hacer el código.

Ya está solucionado.

Agrega lo que puse en azul (negrita) en el paso 2.

Gracias por avisar.

Iliana Q dijo...

no encuentro este codigo en mi plantilla !!
ayuda porfavor mi pagina es www.recetasconsaborlatino.com

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?