Big Tutorial: Criando um layout estilo revista #03

Bom gente vamos lá, hoje vamos ter a continuação de como fazer um layout no estilo revista, parte 3, nos links abaixo você pode ver os passos anteriores... Parte 01 || Parte 02 

3. Posts

Agora preste muita atenção, Geralmente as pessoas erram muito nessa parte, ela precisa de muita calma, se ficar com raiva não vai conseguir fazer. Se não conseguir fazer, leia o tutorial novamente...

O estilo que vou ensinar hoje, é o dividido lado a lado, assim: 

Bom, não vai ficar idêntico, claro, você tem que personalizar, vou ensinar o básico para vocês, e qualquer dúvida, entre em contato comigo!

Primeiro, você vai ir no seu blog de testes (aquele que você fez no inicio do post da parte 01)  e vá no seu HTML, e faça o seguinte:

1- procure por </head>

2- Assim que achar, você vai colar o seguinte código abaixo, em CIMA da tag que você procurou:

<script type='text/javascript'>
var thumbnail_mode=&quot;float&quot; ;
summary_noimg = 180;
summary_img = 120;
img_thumb_height = 160;
img_thumb_width = 150;
</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;}//]]></script> 

Legenda dos campos em negrito:

summary_noimg = 180;                        Aqui é o numero das letras que vai aparecer na página incial quando estiver sem imagem.

summary_img = 120;                           Aqui é a mesma coisa do de cima, só que quando estiver com imagem. ( Então o numero vai ser menor.)

img_thumb_height = 100;                        Você vai mudar o numero, conforme você quer a altura da imagem.

img_thumb_width = 120;                   E aqui você vai mudar o número, conforme você quer a largura da imagem.

feito tudo isso, salve.

3- Agora você vai procurar por:

<data:post.body/>

Vai ter mais de um código assim, escolha o segundo. Vai está mais ou menos assim:

 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'><data:post.body/><div style='clear: both;'/> <!-- clear for photos floats --></div>

4- Então você vai substituir todo esse código acima por:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<scripttype='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'> Veja mais! </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Feito isso, Salve.

 Agora vamos para a outra metade do tutorial. Preste atenção!!

1-  Procure por: ]]></b:skin>

2- Cole abaixo o seguinte código:

<!-- Estilos post revista Inicio -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.main .widget{margin: 0 auto;clear:both;}
h2.date-header{
margin: 0px;padding: 0px;
text-indent: -9999em;
}
.post-footer{display:none;}
.post { /* postagem */
position: relative;display: inline;
background: #ffffff; /*  fundo */
width:44%;
height:320px; /* altura do post*/
float:left;margin: 5px;
padding:8px;letter-spacing:0px;
font-size: 13px; /* tamanho do texto */
line-height:1.4em;
text-align:justify;}
.post h3, .post h3 a, .post h3 a:visited, .post h3 strong {/* titulo do post */
display:block;word-wrap: break-word;
font-size:20px; /* --tamanho da fonte do titulo do post--*/
font-weight:normal;margin:0 0 15px;
padding:0;line-height: 1.3em;
letter-spacing: -1px;}
#showlink{ /* leia mais */
margin:5px;display:block;
float:right;padding: 4px 7px;
font-weight:normal;letter-spacing: 0px;
background: #000; /* cor do fundo se nao quiser fundo apague */
border-radius:5px;-moz-border-radius:5px; /* bordas se não quiser apague */
-webkit-border-radius:5px; /* bordas se não quiser apague */
}
#showlink a {color: #ffffff; /* cor do link */
}
</style></b:if></b:if>
<!-- Estilos post revista Fim -->

Feito isso salve!

No próprio código diz o que é pra fazer (mudar). É normal ficar com bug nos links de navegação, mas para isso é só fazer o seguinte:

1- Procure por: #blog-pager {

2- Assim que achar acrescente o código abaixo, antes do " } "

clear: both;

Em caso de Dúvidas, é só falar comigo.

Ah, se quiser que o efeito fique mais visível, é só ir em MODELO >> PERSONALIZAR >> PLANO DE FUNDO DAS POSTAGENS (ou algo parecido) >> E deixe na cor transparente. Salve!

Bom gente por hoje é só,

beijos e aguardem o próximo passo.