En la
entrada anterior vimos cómo darle un
aspecto tipo revista al blog en el cual las entradas se muestran como "mini entradas" apiladas en columnas. En esta segunda parte vamos a ver cómo hacer que la primera entrada tenga un ancho más grande que las demás para darle otro estilo pero siempre dentro del tipo revista (magazine).
Si ya hiciste el de
Entradas resumidas estilo magazine (1) y quieres este método habrá que deshacer todo y empezar de nuevo ya que el script tiene algunas modificaciones que le he hecho y además hay algunas cosas más que agregar.
Bien, esta vez sin tantas palabras les diré los pasos a seguir; primero entra en
Diseño | Edición de HTML, marca la casilla
Expandir plantillas de artilugios y busca esta línea:
<data:post.body/>
Elimínala y en su lugar pon esto:
<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'>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>
<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>
Ahora busca esta línea:
<b:include data='post' name='post'/>
Igualmente elimínala y en su lugar pon esto:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<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>
<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>
</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Ahora antes de
</head> pega lo siguiente:
<script type='text/javascript'>
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;
</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;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg1;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = summary_img1;
}
var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>
Y debajo de eso pega esto:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#first { /* Estilos del contenedor del primer post */
margin: 0px 0 10px 7px;
padding: 0px;
width: 610px;
height: 300px;
float: left;
border: 1px solid #1c1c1c;
background: #E6E6E6;
}
.first-body { /* Estilos para el texto del post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #2E2E2E;
}
#first h3 { /* Estilos para el título del post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:center;
line-height: 1.4em;
}
#first h3 a, #first h3 a:visited { /* Color del título */
color: #DF0174;
}
#first h3 a:hover { /* Color del título al pasar el cursor */
color: #fff;
}
#first .comment-link { /* Estilo para el link de los comentarios */
float:right;
padding: 0px 5px 15px 0px;
}
.post { /* Estilos del contenedor de los mini post */
border: 1px solid #1c1c1c;
float:left;
width: 290px;
height: 210px;
margin: 5px;
padding: 0px 5px 5px 5px;
overflow:hidden;
background: #FBEFFB;
}
.rmlink a { /* Estilos del texto Leer más */
color: #39ADCE;
text-decoration:none;
}
h2.date-header { /* Con esto ocultamos la fecha */
height:0px;
visibility:hidden;
display:none
}
.post-footer { /* Estilos del post-footer de los mini post */
text-transform:uppercase;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
}
#blog-pager {
clear:both;
}
</style>
</b:if>
</b:if>
Con todo esto hemos hecho tres cosas, una es aplicar el Leer más automático a todas las entradas, otra es darle un identificador diferente al primer post así como un Leer más exclusivo a la primer entrada, y por último condicionar el tamaño y los estilos de las entradas en la portada.
Ahora vamos a personalizar:
En los dos primeros códigos que hemos agregado aparece en color rojo el texto
Leer más... ese se puede cambiar por otro o bien poner una imagen en su lugar, para tal caso se debe eliminar ese texto y poner este código:
<img src="URL de la imagen" />
Sólo agrega la URL de tu imagen donde se indica y listo. Eso deberás hacerlo en los dos texto de
Leer más... para que el cambio se vea tanto en la primera entrada como en el resto de ellas.
Después viene la parte del resumen de las entradas. Debajo de
</head>, al inicio del script que pegamos se encuentra esta parte:
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;
El primer número es el número de caracteres que se motrarán en las entradas cuando no haya una imagen.
El segundo número es el número de caracteres cuando hay una imagen.
El tercero y último es el alto y ancho de la imagen en miniatura.
Lo mismo para lo que está en color azul, pero esa configuración sólo afecta al primer post. Como el primer post es más ancho entonces cabrán mayor número de caracteres y podrás hacer más grande el tamaño de la miniatura.
Y por último vienen los estilos y tamaños de las entradas. Eso último que agregamos es un código que condiciona la forma que se ven las entradas en la portada.
Ahí veremos que las partes que empiezan con #first aplican sólo al primer post de modo que donde dice:
width: 610px;
height: 300px;
Es el ancho y alto respectivamente del tamaño de la primer entrada, ahí puedes modificar los valores hasta que se ajuste al tamaño adecuado. Generalmente el ancho deberá ser el mismo que tiene el ancho normal de las entradas.
Luego, debajo de .post se encuentran las medidas para el resto de las entradas, justo en esta parte:
width: 290px;
height: 210px;
De igual modo width es el ancho y height es el alto del resto de las demás entradas. Ahí tendrás que experimentar un poco con los tamaños para que queden justo como deseas; entre más pequeños sean más entradas cabrán a lo ancho del blog.
Para finalizar configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio. Para hacerlo ve a
Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.
Mira el mensaje oculto de la Semana
RSS
Subir
