17/07/2017

Tutorial: Criando estilo de revista, com resumo de postagem em miniatura

||

Hi guy's, como vocês estão? Como prometi vim postar hoje *batida no peito* ignorem isso por favor rs, hoje acordei super animada para postar e vim trazer algo bem legal! Pelo menos que eu acho legal!A poucos dias conclui mais um layout (futuramente será postado aqui no blog), seu modelo é estilo revista/jornal com resumo de postagens em miniaturas, para quem não entendeu deixarei uma imagem, mais abaixo para melhor entendimento. 

Trata-se de um modelo de postagens. Qual deixa a primeira postagem maior, e o restante em miniaturas, ele é bastante estiloso. Possuindo botão leia mais, numeração de comendatórios, imagens em miniaturas ainda sendo completamente editável! O código encontrei no blog "HankBlog", não sei dizer se é reblogado se for e conhecer o link, por favor me avisem. Devo dizer que fiz o teste em alguns layout's e templates, e funcionou em maior parte. Exceto em layout's extremamente carregados e já editáveis. Antes de começar esse tutorial aconselho sabiamente a fazer um backup do seu layout, caso o resultado final não lhe agrade você pode retroceder. 



1) Faça o longin no blogger, e em seguida escolha o blog qual deseja aplicar o estilo. Depois de fazer uma copia do Layout atual, vá em HTML e ative a pesquisa com Ctrl+F, dentro da barra da pesquisa cole o código abaixo e inicie a pesquisa:
<data:post.body/>
* É possível que exista mais de um desse código, mas pare no segundo. 

Remova-o e no lugar cole o seguinte código:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <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'><data:post.numComments/></a></b:if></b:if></span>
<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 class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More &#187;</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>
A parte marcada em vermelho é a frase do leia mais, você pode mudar mas cuidado para não apagar alguma parte do código. 

2) Agora pesquise por:
<b:include data='post' name='post'/>

Remova isso também e no lugar cole: 
<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'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<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'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More &#187;</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>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
* O código marcado em vermelho, também é o leia mais! Então o que escreveu no anterior deve estar também no segundo código.

3) Agora procure por </head> e cole o seguinte script sobre ela:
<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;first_thumb_sum = 450;img_thumb_height1 = 145;img_thumb_width1 = 165;</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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
  var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>
Agora outra vez sob o </head> cole esse código
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
    margin-right: 10px;
}
.summary {
    height: 100%;
}
#first { /* Estilo da primeira postagem */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* Cor de fundo da primeira postagem*/
    border: 1px solid #E5E5E5; /* Borda */}
.first-body { /* Style for the First Post summary */
    color: #545454;
    font-size: 13px;
    text-align: justify;
    padding: 5px 10px;
    line-height: 1.5em;
}
#first h3 a, #first h3 a:visited { /*Estilo do resumo da primeira postagem*/
    border-bottom: 2px solid #DFDFDF;
    color: #515151;
    font-size: 20px;
    display: block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4em;
    background: none;
}
#first h3 a:hover { /* Estilo do título em hover da primeira postagem*/
    color: #1061A1;
}
.post { /* Estilo das postagens menores */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* Cor do fundo das postagens menores */
    border: 1px solid #E5E5E5; /* Borda das postagens menores*/
    overflow: hidden;
}
.posts-thumb { /* Margem das postagens menores */
    margin-right: 10px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

h3.post-title a{ /* Estilo de título das postagens menores */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}
h2.date-header { /* Estilo de data das postagens menores*/
    display: none;
}
.post-footer {
    display: none;
}
h3.post-title {
    margin: 0px;
}
.readmorebutton {
    margin-top: 5px;
}
.readmorebutton a { /* Estilo do Leia mais */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* Cor do fundo do leia mais*/
    text-decoration: none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    float: right;
    position: relative;
}
.post-comment-link { /* Estilo do balão de comentários*/
    position: absolute;
    top: -35px;
    right: -10px;
    display: block;
    border: 1px solid #E1E1E1; /* Borda dos comentários */
    background: #EAEAEA; /* Cor do fundo dos comentários */
    font-size: 11px;
    position: absolute;
}
#first .post-comment-link { /* Margem dos comentários*/
    position: absolute;
    top: 10px;
    right: 0px;
}
.post-comment-link a { /*Cor do links dos comentários*/
    padding: 10px;
    color: #6A6A6A;
    text-decoration: none;
    font-weight: bold;
}
#blog-pager {
    clear: both;
}
</style>
</b:if>
</b:if>


Personalizando o estilo revista:

No inicio do código nos deparamos com:

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

As partes marcadas em vermelho é a configuração da primeira postagem, a maior. Enquanto a azul é das postagens em miniatura. 

# O primeiro código é o número de caracteres (letras) para as pequenas postagens quando não houver imagem disponível nas mesmas. 
# O segundo código é a quantidade de caracteres (letras) para as pequenas postagens quando tiver imagens disponível.
#A terceira e quarta linha são a altura e largura das miniaturas (imagens).
# O mesmo vale para o código em azul, mas isso afetara apenas a primeira postagem. Uma vez que a primeira publicação é mais larga, ela pode conter um número maior de caracteres e miniatura

Proporções:

Por fim temos os estilos do CSS. A última coisa que adicionamos é um c´digo que determina como as postagens ficaram na pagina inicial (de arquivos, pesquisa etc...) exceto a da publicação aberta. 

Para alternar a largura e altura, respectivamente o tamanho da primeira postagem, procure pelas linhas :
width: auto;
height: 250px;

Abaixo está o código das proporções das postagens em miniatura:
width: 46%;
height: 230px;
A largura será de 46% da largura e altura da coluna principal, que esta configurada para 230px. Caso não queira as postagens miniaturas em duas colunas, você pode mudar o 46% para 100% porém isso exigiria edições adicionais, como também pode fazer em três colunas, basta dividir o 100% por três, mas isso também exigiria edições para um resultado legal! Enfim é um código que dá para brincar bastante! - How to Create Magazine Style with Post Summaries and Thumbnails on Blogger.

4 comentários:

  1. Sabrina15/7/17

    Que incrivel! E facil de entender, meu layout ficara lindo

    ResponderExcluir
    Respostas
    1. É sim! Sem dúvidas ficara.

      Excluir
  2. Hannah Beth23/7/17

    Que lindo! É possível editar as cores?

    ResponderExcluir
    Respostas
    1. Tem sim! Ele esta bem base, então é possível alterar sem muitas dificuldades.

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram