Como colocar pequenas postagens do blog ao lado do post principal

Me pediram pra ensinar como deixar as outras postagens do blog ao lado da primeira postagem como NESTE exemplo. Bom, é bom que saibam que é um pouco trabalhoso já que para chegar a esse resultado é necessário aplicar não 1, mais muitos hacks. Tentarei simplificar, mas o que fiz foi juntar um monte de dicas.


A primeira delas é aplicar o "First post" que a Ariane ensinou.

Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI.
*Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

Vá ao HTML de seu blog, clique em "Expandir modelos de widget", salve então uma cópia de seu template para continuar, se der errado, disfaça as alterações, ok ?


Procure pelo seguinte código:

<b:include data='post' name='post'/>

Substitua então por este abaixo.

 

<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'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

Para dar estilo a primeira página aplique então o próximo código antes de ]]></b:skin>
Depois  faça as modificações conforme seu gosto.

#first{
width: 410px; /*largura do post grande*/
background: #ffffff; /*cor de fundo da página*/
border: 1px solid #cccccc; /*cor da borda*/
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
}

.first-body{
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
color:#000000;/*cor do texto*/
}

#first h3{
display:block;
margin: 10px auto;
width: 100%;
font-size: 19px;
padding: 0px 0px 4px 0px;
text-align:left;
line-height:1.4em;
color: #cc0000;/*cor do titulo*/
}
#first h3 a, #first h3 a:visited{color:#000000;} /* cor do título */
#first h3 a:hover{color:#cccccc;} /* cor do título no estado hover */

.first-body img{ /* estilo para as imagens */
padding:10px;
background:#fff;
border: 1px solid #333}

#first .comment-link{ /* estilo para o link comentários */
float:right;
padding: 0px 5px 15px 0px}

Agora veja que a sua última postagem já ficou diferente, o que faremos agora é colocar os outros posts menores e ao lado do primeiro post.

Vamos lá então...

Precisaremos modificar algumas coisinhas como o largura de seu blog. O que faremos será aumentar o tamanho dos elementos. Procure pelo trecho:

 /* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

 E substitua por este abaixo. (Note que estou consuderando o template "Minima" em seu estado original)

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 960px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 650px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 300px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

O que fiz foi fazer um cálculo. O primeiro número (vermelho) se refere a largura total do blog, o segundo número (azul) se refere a largura da parte das postagens, e o terceiro número (verde) se refere a largura da sidebar, portanto, se a largura total é de 960px, eu devo colocar a área de postagem + a área da sidebar de uma largura que não ultrapasse os 960px,  e depois ainda dar um descontinho de 10px para margin.

650 (das postagens) +300 (da sidebar) =950 (largura total do blog)

 Escrevi esta parte acima para que vc entenda, caso possua mais de uma sidebar

Agora vamos diminuir os outros posts.
 Procure novamente por:

]]></b:skin>

E abaixo dele cole o próximo código.(número na cor vermelha é a largura do post, na cor azul o comprimento)

<!-- Design posts -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post{
width:207px;/*largura dos posts pequenos*/
height:130px;/*comprimento dos posts pequenos*/
background: #ffffff;/*cor de fundo dos posts pequenos*/
border: 1px solid #cc0000;
color: #cccccc;/*cor das letras dos posts*/
font-size: 10px; /*tamanho da fonte dos posts*/
margin:2px 2px 2px 10px;
float:left;
overflow:hidden;
padding:2px;
line-height:1.4em;
font-size:12px;
}
.post h3{
height: 30px;
font-size: 11px;/*tamanho da fonte do título*/
background: #cccccc; /cor de fundo do título*/
color:#000000;/*cor das letras do título*/
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
letter-spacing:1px;
}
.post h3 a, .post h3 a:visited, .post h3 strong{ display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none;
padding:0 0 0;
}
.date-header{
display:none;
} .post img{
border:none;
}
.post-body{
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-footer{display: none;}
#showlink{
padding: 1px 3px 0 0;
margin: 0 2px 0 0;
float:right;
font-size: 10px;
}
</style>
</b:if>
</b:if>

Pronto ! Viu agora ?

Ah sim, mas os posts estão pequenos, mas lá embaixo do post grande.


Sim, mas é que falta um delalhe: o menu de navegação por página está desaparecido.

Procure por:

<b:includable id='nextprev'>



E abaixo dele  cole:

<div style='clear: both;'/>

Sim, sim, agora gostei, os posts menores estão ao lado do post grande, mas ainda falta colocar o "Leia mais" Respire, fique calmo, já está acabando...

 Procure por:

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


E substitua por:

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Agora abaixo de ]]></b:skin> cole o código abaixo

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 70;
img_thumb_height = 50;
img_thumb_width = 50;
</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) {
if(thumbnail_mode == "float") {
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;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>

Elkeeeeeeeeeee, amei !!!! Mas, eita, agora que vi, o cabeçalho do meu blog ficou pequeno, e o roda pé também ;-(


Bom meu caro ou minha cara, agora procure por:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

E onde está 660 substitua por 960

Agora procure por:

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

E também substitua o 660 por 960



Se preferir pegue o código do template AQUI