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 != "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>
<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 != "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>
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}
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 */
}
----------------------------------------------- */
#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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 != "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 id='showlink'><a expr:href='data:post.url'>Leia Mais ►</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 style='clear: both;'/> <!-- clear for photos floats -->
</div>
<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 id='showlink'><a expr:href='data:post.url'>Leia Mais ►</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 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 = "float" ;
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>
var thumbnail_mode = "float" ;
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
