- Bunny Crazy: 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:

Códigos

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

Códigos

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</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>

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:

Códigos

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

Remova isso também e no lugar cole:

Códigos

<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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<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'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</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>
</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:

Códigos

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 :

Códigos

width: auto;
height: 250px;

Abaixo está o código das proporções das postagens em miniatura:

Códigos

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.

17/07/2017

Criando estilo de revista, com resumo de postagem em miniatura

4 comentários:

Postagens mais visitadas