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.

7 comentários

  1. Eu gostei. Mas não teria como ficar alinhadinho um do lado do outro não? Acho que ficaria mais bonito na minha opinião!

    Beijos *---*
    Cereja Black // www.cerejablack.com

    ResponderExcluir
  2. Meu primeiro layout tinha esse estilo e foi super simples de montar, mas aderi ao estilo mais comum mesmo porque achava complicado de navegar rs

    Ótimo tutorial, beijos e um ótimo feriado <3

    http://perigosasgarotas.blogspot.com.br/

    ResponderExcluir
  3. Oi lindona!
    Belo tutorial, meus parabéns.
    Aguardo sua visita por lá.
    Meu Blog: ➥ Plantão da Beleza
    Minha Lojinha de Templates ➥ Lojinha Blog Chic
    Meu Instagram➥@plantaodabeleza

    BeijosssssssssSimara Pink ♥♡♥♡♥♡♥♡♥♡♥♡

    ResponderExcluir
  4. Nossa, eu achava que fazer isso era muito difícil, mas você passando o codigo claro que fica fácil né? Mas valeu por compartilhar!
    http://leitecombiscotos.blogspot.com.br/

    ResponderExcluir
  5. Muito legal o tutorial mas gosto mais do blog com os posts contínuos hehe

    beijinhos,
    www.blogsonhosdemenina.com

    ResponderExcluir
  6. o meu deu defeito no segundo código ( no código do ) eu refiz os passos várias vezes só que n funcionou, você pode me ajudar?

    ResponderExcluir
  7. Esse tutorial está excelente. Obrigado pela ajuda.

    M&N | Desbrava(dores) de livros - Participe do nosso top comentarista de Abril

    ResponderExcluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN