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.

Entradas resumidas y enmarcadas estilo revista

Disponemos de una amplia gama de plantillas para blogger, tanto diseñadas por los encargados de dicha plataforma como modificadas por verdaderos expertos en el diseño web.

Las plantillas tipo revista o conocidas también por el nombre magazine muestran una particularidad que ninguna otra posee y es que los artículos de la portada aparecen resumidos en pequeñas cajas, lo que nos recuerda al aspecto de un periódico.

A continuación puedes ver una imagen para que comprendas lo que voy a enseñarte en esta entrada.


Existen diversos métodos para conseguir una portada estilo revista. El primero de ellos y por tanto el que explicaré en este artículo utiliza el mismo script del que hicimos uso en el truco "Leer más en la portada de tu blog" y un par de condicionales (además del CSS necesario para decorar las casillas).


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta <data:post.body/> y elimínala. Incluye este código en su lugar:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>blcnresummn1("summary<data:post.id/>");</script>
<span class='blcnleerms' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

El texto resaltado en el código (Leer más...) es el enlace que conducirá al artículo completo ya que en la casilla únicamente se podrá leer un resumen.

Puedes utilizar una imagen como enlace para 'continuar leyendo...', reemplazando la frase resaltada con esta línea:

<img src="URL DE LA IMAGEN"/>

Incluye la dirección de tu icono / imagen y listo.

Ahora busca la etiqueta </head> y justo encima añade estos bloques:

<script type='text/javascript'>
blcn_sinimagen = 200;
blcn_conimagen = 180;
blcn_alturaimagen = 60;
blcn_anchuraimagen = 60;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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 blcnresummn1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = blcn_sinimagen;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+blcn_anchuraimagen+'px" height="'+blcn_alturaimagen+'px"/></span>';
summ = blcn_conimagen;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#outer-wrapper {width:800px;}
#main-wrapper {width:570px;}
.post {margin-bottom:10px;font-family:Arial,helvetica,sans-serif;background:#F4F4F4;border:1px solid #CCCCCC;float:left;height:276px;margin-left:24px;overflow:hidden;padding:0 5px 5px;text-align:left;width:230px;}.post:hover {background:#F6F6F6;border:1px solid #DDDDDD;}
.column-center-outer {width:108%;}
.main-inner .fauxcolumn-right-outer {width:322px;}
h2.date-header {height:0px;visibility:hidden;display:none}
.post h3 {border-bottom:1px dotted #CCCCCC;color:#4A5C96;font-family:Arial,helvetica,sans-serif;font-size:15px;font-weight:normal;line-height:1.4em;margin:0.25em 0 8px;padding:0 0 4px;}
.post h3 a, .post h3 a:visited{color:#4A5C96;}
.blcnleerms a {color: #4A5C96;text-decoration:none;}
.post img, table.tr-caption-container {background:none repeat scroll 0 0 #FFFFFF;border:1px dotted #D1D1D1;margin-top:4px;padding:3px;}
.post-footer {border-top:1px dotted #CCCCCC;font-family:Arial,helvetica,sans-serif;
font-size:9px;padding-top:7px;text-transform:none;}
#blog-pager {clear:both;}</style>
</b:if>
</b:if>

En las primeras líneas de lo que acabas de incluir encontrarás valores con posible

blcn_sinimagen = 200; Número de carácteres a mostrar en el resumen cuando la entrada carece de imagen (200).

blcn_conimagen = 180; Número de carácteres a mostrar en el resumen cuando la entrada posee imagen (200).

blcn_alturaimagen = 60; La altura de la miniatura de imagen (60).

blcn_anchuraimagen = 60; La anchura de la miniatura de imagen (60).

Puedes modificar el color de fondo en los marcos editando #F4F4F4 e introduciendo el código de tu color favorito (utiliza la tabla de colores).

El número de entradas a mostrar en la portada del blog variará según la cifra que hayas incluido en el apartado Configuración - Formato - Mostrar un máximo de...

Eugenio Ramón dice...

Que gran truco Jaime y ademas el ancho me va a la perfección. Esta misma tarde lo aplico a mi blog principal y ya te comentaré, Muchísimas Gracias!

Jaime Trujillo Escobedo dice...

Es una forma ideal de mostrar un mayor número de artículos en la portada del blog, Eugenio. Me alegra mucho que te haya gustado.

¡Ya me contarás!

tHeLaRiOs dice...

Hola amigo vengo haber si me pudieras ayudar con una duda , la duda es como podria cambiar el tamaño de una sidebar al entrar a un post , si te doy ejemplo:
http://peliculasdirecto.blogspot.com/

en esa pagina la sidebar son un de tamaño , pero al entrar en el post estan cambian de tamaño se hacen mas grandes , y ademas las sidebar de la portada no salen , es raro tratandose de blogger, bueno sin mas espero y me puedas ayudar , salu2

Jaime Trujillo Escobedo dice...

TheLarios, ¿Deseas disminuir o aumentar el ancho de la sidebar en general? ¿Te gustaría dejarla con un único ancho?

No es algo extraño por tratarse de una plantilla en blogger, es un truco bastante simple que utiliza condicionales aceptadas por nuestra plataforma.

Laube dice...

Pues este truco me gustaría introducirlo en mi blog. Pero tengo dudas. Por ejemplo, si abro mi blog, en la página principal, ya me salen todas las entradas así directamente?.
Un besoteeeeeeeee

Laube dice...

Ahhhhhhhh... y también tengo dudas con la URL d ela imagen, porque nunca sé si me vale la URl de picasa o necesito otro alojamiento de imágenes. Es que, para ponerte un ejemplo, no me he podido poner aún el asunto de enlázame con una imagen, porque no sé cómo diantres traerme la URL de la imagen. He probado un montón de métodos y ninguno me ha servido.
Un besoteeeeeeeee

Jaime Trujillo Escobedo dice...

Exáctamente Laube. En la portada de tu blog aparecerán artículos resumidos pero tranquila, el diseño del marco es personalizable y no dudes en que te ayudaré a editarlo.

Respondiendo a tu segunda duda, la URL de picasa es la misma que la ofrecida al alojar una imagen en cualquier entrada del blog (blogger utiliza picasa como servicio para las fotografías).

Te recomiendo esta entrada en la que explico la forma de obtener cualquier URL.

¡Abrazote!

Laube dice...

Gracias guapetón. Me voy a echarle un vistazo ya de ya.
Un besote

Jaime Trujillo Escobedo dice...

Como siempre un placer, amiga.
Abrazote.

Esperanza Moreno Garcia dice...

Hola muchas gracias por darnos facilidad en la confeccón del blog .pondre esta pagina en favoritos, para leerla más detenidamente.

Jaime Trujillo Escobedo dice...

Gracias a ti, Esperanza. Es maravilloso que me tengas entre tus favoritos.

Dandi dice...

se me descuadra los temas, a que se deberá?

Blog de PCS y Laptops

Jaime Trujillo Escobedo dice...

Dandi, si no aplicas el truco no podré ayudarte pues actualmente, indicarte atributos a modificar será inútil.

Pedro A. Martinez Gutierrez dice...

Hola jaime! mira que aplico este truco en mi blog y primero no encuentro la etiqueta , me aparecen como 3 y no se en cual cambiarlo, bueno, despues aplico la segunda parte y se me desconfigura totalmente el blog, al parecer me reduce el tamaño de trabajo ya que los gadgets que tengo al lado derecho me lo desplaza hacia abajo.

http://pedroamartinez.blogspot.com/

Que debo hacer?

Jaime Trujillo Escobedo dice...

Pedro, dudo mucho que este truco pueda aplicarse a tu plantilla. Ésta ha sido enteramente modificada y los parámetros que el CSS de esta entrada utiliza harán que su apariencia empeore.

Prueba con esta alternativa.

Oscar Dávila Guzmán dice...

Espectacular! lo hare en mi pagina

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