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

Siguiendo con el tema de reducir entradas, visto en Parte 1 y Parte 2.

Al igual que la Parte 2, mostraremos la primera entrada, o la de arriba en su totalidad, sin reducir.

La diferencia sera que le agregué un botón el que abrirá y mostrará el total de la entrada en la parte de abajo del resumen.

Este botón al abrir cambiara por otro y una ves que se cierre volverá al mismo.

Para entender mejor ver el resultado.

Ejemplo 1.
Ejemplo 2.

¿Cómo se hace...?

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 = 350;
summary_img = 350;
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:0 10px 0;"><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:0 10px 0;"><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;
}

function togglvku( targetId )
{
var state = 0;
var blockvkuname = "blockvku" + targetId;
var blockvkuimage = "blockvkucollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockvkuname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockvkuimage ).src = state ? "http://2.bp.blogspot.com/_lMNoba63Ric/THSWIBbprnI/AAAAAAAAAJE/2ZFQ6A_3LDk/s1600/cerrar.jpg" : "http://1.bp.blogspot.com/_lMNoba63Ric/THSWG4dcb7I/AAAAAAAAAJA/JWys6a2vZlk/s1600/abrir.jpg";
}
}
//]]>
</script>

Cambios que podemos hacer:

summary_noimg = 350;: Número de letras que se mostrará en el resumen con imagen única.
summary_img = 350;: 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:0 10px 0;": Estilo de la imagen.

En el ejemplo la imagen tiene padding 10px a la derecha y 0px en los otros lados, y se mostrará a la izquierda.

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

En rojo estan las imágenes del botón de abrir y cerrar.

Paso 2: (Opción 1)

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

Y lo cambiaremos por el siguiente código:

<b:if cond='data:post.isFirstPost'>
<b:else/>
<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:0px;margin:0px'><a class='toggleresumenpost' expr:onclick='&quot;togglvku(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'><img expr:id='&quot;blockvkucollapse&quot; + data:post.id' src='http://1.bp.blogspot.com/_lMNoba63Ric/THSWG4dcb7I/AAAAAAAAAJA/JWys6a2vZlk/s1600/abrir.jpg'/></a></div>
</b:if>
</b:if>

<b:if cond='data:post.isFirstPost'><data:post.body/>
<b:else/>
<div expr:id='&quot;blockvku&quot; + data:post.id' style='display: none;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'><data:post.body/></b:if>
</div></b:if>

Cambiar la imagen en rojo de abrir por la misma que pusimos en el código del paso 1.

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

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

Por más detalles de cómo personalizar leer la parte 1:

Si quisieramos ocultar el contenido del footer de las entradas como en el ejemplo 2, en lugar del paso 2 hacer lo siguiente:

[+/-] Seguir leyendo...

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

¡que genial!, ya lo agrege a mi blog, tengo una duda:
¿Como Hago Para Abrirlo deslizadamente?
en el blog de Rosa lo explican pero ya lo intente y no me funciono
¿me ayudas?

Vku dijo...

Con este código no se puede.
Vi que tú tienes Prototype y Scriptaculous
No se si resultará ni como quedará.
Prueba:
Fijate donde está el link de la imagen de abrir
expr:onclick='"togglvku(\"" + data:post.id + "\")"'
Agregale un efecto de prototype.

Algo así:

expr:onclick='"togglvku(\"" + data:post.id + "\")";"Effect.toggle(\"" + data:post.id + "\",'blind')"'

Pero ya te digo que no creo que funcione.

O utiliza solo el efecto de prototype, pero no va a cambiar la imagen:

expr:onclick='"Effect.toggle(\"" + data:post.id + "\",'blind')"'

Pero donde está esta linea: div expr:id='"blockvku" + data:post.id' style='display: none;'

quita blockvku

algo asi:

div expr:id='data:post.id' style='display: none;'

Vku dijo...

Alejo:
Con Prototype y Scriptaculous el código es así:
<b:if cond=&apos;data:post.isFirstPost&apos;>
<b:else/>
<b:if cond=&apos;data:blog.pageType != &quot;item&quot;&apos;>
<div class=&apos;summarythumb&apos; expr:id=&apos;&quot;summary&quot; + data:post.id&apos;><data:post.body/></div>
<script type=&apos;text/javascript&apos;>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div align=&apos;right&apos; class=&apos;rmlink&apos; style=&apos;clear:both;padding:0px;margin:0px&apos;><a class=&apos;toggleresumenpost&apos; expr:onclick=&apos;&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot; ,\&quot;appear\&quot;)&quot;&apos; href=&apos;javascript:void(0);&apos;><img expr:id=&apos;&quot;blockvkucollapse&quot; + data:post.id&apos; src=&apos;http://1.bp.blogspot.com/_lMNoba63Ric/THSWG4dcb7I/AAAAAAAAAJA/JWys6a2vZlk/s1600/abrir.jpg&apos;/></a></div>
</b:if>
</b:if>

<b:if cond=&apos;data:post.isFirstPost&apos;><data:post.body/>
<b:else/>
<div expr:id=&apos;data:post.id&apos; style=&apos;display: none;&apos;>

<b:if cond=&apos;data:blog.pageType != &quot;item&quot;&apos;><data:post.body/></b:if>
<div align=&apos;right&apos; class=&apos;rmlink2&apos; style=&apos;clear:both;padding:0px;margin:0px&apos;><a class=&apos;toggleresumenpost&apos; expr:onclick=&apos;&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot; ,\&quot;appear\&quot;)&quot;&apos; href=&apos;javascript:void(0);&apos;><img expr:id=&apos;&quot;blockvkucollapse&quot; + data:post.id&apos; src=&apos;IMAGEN-CERRAR&apos;/></a></div>
</div></b:if>


Fijate que le agrege una imagen de cerrar en la parte de abajo, si no te gusta quitala.

Los efectos pueden ser 3: appear, slide o blind.

Acá esta el código:

Alejoblogger dijo...

por toda tu ayuda colocare un enlace hacia tu blog, te mereces mucho mas por todo lo que nos enseñas a todos en este magnifico blog, buena suerte!.

Alejoblogger dijo...

Hola de Nuevo Vku! :6)
quiero saber..
¿Como Hago para que se Muestren en Todas las Entradas?
Gracias :4)!

Alejoblogger dijo...

Digo. Como hago que se muestren en todas las entradas, Osea, para que las entradas reducidas se muestren en todas las entradas, y que no sea en la primera no y en las demas si..
¿Entiendes? ;)

Vku dijo...

Y es lo de esta entrada o en la primera.

http://loseasi.blogspot.com/2010/08/entradas-reducidas-con-thumbnail-1.html

daRIo dijo...

Gracias VKU, me estas ayudando a armar el diseño de mi blog. Permitame enlazar tu blog.

daRIo dijo...

Una consulta en el blog que estoy creando la entradas reducidas le hey dado de bordes redondeados la primera entrada que se muestra completa existe un margen de separacion pero en el resto (entradas reducidas) me muestra unidas y el borde se ve horrible, me puedes ayudar.

Vku dijo...

Busca:
.post-footer {
padding: 10px;
color:#999999;
}

Y agregale un margen inferior margin-bottom:20px

.post-footer {
padding: 10px;
color:#999999;
margin-bottom:20px
}
Ajusta el tamaño 20px

Alejoblogger dijo...

Amigo el link de el Resumen del que me Hablaste hace tiempo, ya no funciona :( saludos! (LO NECECITO XD)

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?