Última postagem maior com posts menores ao lado na primeira página do Blogger

Que tal dar a seu blog uma aparência mais inusitada, facilitar a navegação do leitor e economizar espaço na primeira página do template de seu blog ? Este é um hack antiguinho que, se não me engano foi introduzido na blogosfera pela Ariane do Templates para o Novo Blogger. Dei uma atualizada no código HTML, mas está bem básico, prometendo aqui fazer mais dois códigos mais incrementados...



Vá até o modelo de seu blog e clique em Editar HTML.

Ao abrir a janela, clique em Ir para um widget e depois clique em Blog1

 Agora clique na setinha para abrir o código

Depois que abrir, clique novamente na setinha, para abrir o seguinte trecho:


 <b:includable id='main' var='top'>...</b:includable>



É dentro desta tag que encontraremos o código.

Agora, procure por:

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

Troque-o por:

<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>

 Procure agora por: <b:skin>...</b:skin>

E abaixo dele, cole o próximo código.

<!-- Design post grande-->
<style>
#first{
width: 60%; /*largura do post grande*/
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
}

.first-body{
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
}

#first h3{
display:block;
margin: 10px auto;
width: 100%;
padding: 0px 0px 4px 0px;
line-height:1.4em;
}
.first-body img{ /* estilo para as imagens */
padding:10px;
}
</style>
<!-- Design posts pequenos-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post{
border-top: 1px solid #eee;
width:38%;/*largura dos posts pequenos*/
height:180px;/*comprimento dos posts pequenos*/
font-size: 10px; /*tamanho da fonte dos posts*/
margin:12px 2px 15px 5px;
float:left;
overflow:hidden;
padding:2px;
line-height:1.4em;
font-size:12px;
}
.post-body{
height: 140px;/*largura do corpo das postagens */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body img{
width: 95%;
height: 110px;/*largura das imagens dos posts */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body iframe{
width: 95%;
height: 120px;/*largura das imagens dos iframes */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post h3{
height: 30px;
font-size: 11px;/*tamanho da fonte 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-footer{display: none;}


#showlink{
padding: 1px 3px 0 0;
margin: 0 2px 0 0;
float:right;
font-size: 10px;
}
</style>
</b:if>
</b:if>

SALVE!


Gostei muito, ficou legal Elke mas, cade o menu de navegação do blog ???

Calma apressadinho, agora vamos acrescentar mais um código...

Procure agora por  <b:includable id='nextprev'>...</b:includable> e abara a setinha que tem ao lado.

Cole então o código abaixo logo depois de <b:includable id='nextprev'>

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

Salve e aproveite seu layout bacanudo :-)