Widget Posts do Blog para a página inicial
Mostra as últimas postagens feitas pelo lojista no Blog Integrado. Geralmente usa-se na base da página inicial.
# HTML
{% set blog_posts = store.blogPosts() %}
{% if blog_posts|length >= 1 %}
<section class="block blog-posts">
<div class="central">
<h2 class="titulo">NOVIDADES DO BLOG</h2>
<section class="row justify-content-center">
{% for post in blog_posts %}
<article class="col-md-3 col-sm-6 text-center">
<div class="block item">
<a href="{{ post.blog_url }}/" target="_blank">
<div class="foto">
<img src="https://sistema.wbuy.com.br/img/loading-heart.svg" data-src="{{ post.imagem }}" alt="{{ post.titulo }}" class="img-cover lazy">
</div>
<h4 class="t">{{ post.titulo }}</h4>
</a>
</div>
</article>
{% endfor %}
</section>
</div>
</section>
{% endif %}
// CSS
.blog-posts{
background-color: #EEE;
padding: 20px;
.item{
height: 100%;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
overflow: hidden;
border-radius: 3px;
transition: all .25s;
.foto{
height: 195px;
overflow: hidden;
}
.t{
padding: 10px;
font-size: 20px;
line-height: 26px;
color: #000;
}
&:hover{
background-color: #EEE;
}
}
}