Adicionar Gadget de Posts Recomendados – Montar um Blog

Por | Atualizado em 2014-12-30


Neste tutorial iremos explicar como adicionar um gadget de posts recomendados (com imagens) no Blogger, WordPress, etc. Adicionar uma lista de “Posts Recomendados” é uma excelente forma de manter os seus leitores interessados nas suas páginas, levando à redução da taxa de rejeição.

Você poderá adicionar os seus posts com melhor performance, aumentando os “pageviews” (impressões de página). Este gadget que desenvolvemos exibe posts fixos, não recorrendo a scripts pesados que possam atrasar o carregamento das suas páginas.

Adicionar Gadget de Posts Recomendados

Caso o leitor esteja interessado em apresentar postagens mais específicas, relacionadas com o tema da página apresentada, consulte o seguinte tutorial: Como adicionar posts relacionados.

Adicionar Gadget de Posts recomendados



Para exemplificar, iremos explicar como implementar este gadget usando a plataforma “Blogger”. Em primeiro lugar, é recomendável criar um backup do seu template, para que possa reverter as alterações mais facilmente, caso o resultado final não seja do seu agrado.

Caso necessite de mais instruções, consulte o nosso tutorial: Como fazer um backup do template Blogger.

Agora já podemos iniciar a implementação do Gadget. Para isso, será necessário adicionar o código CSS essencial para criar o “estilo” do Gadget.

Para isso, aceda ao menu “Modelo” – “Editar HTML”. Agora procure a tag “]]></b:skin>” e cole o código imediatamente antes:

#montarbox{height:190px;overflow:hidden;margin:0px;position:relative;width:520px; padding:5px 5px;}
#montarbox ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#montarbox ul li{ overflow: hidden; float: left; width: 120px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:0px 1px 4px 0px; text-align: center; }
#montarbox ul li:hover{ border-bottom:1px solid #c5c5c5; }
#montarbox img{width:110px;height:110px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#montarbox img:hover{border: 1px solid #c5c5c5; }
.montarcp img{float:left;}
.montarcp {position:relative;margin:0 5px 0 5px;width:110px;height:160px;display:inline;float:left;color:#c4c4c4;}
.montarcp h3{padding:5px 0; font-size:14px; font-family: verdana, sans-serif, arial; margin:0;}
.montarcp h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.montarcp h3 a:hover{color:#c5c5c5}
.montarfade img {
filter:alpha(opacity=70);
opacity: 0.7;
border:0;
}
.montarfade:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

Nota: Para minimizar o impacto do gadget na performance da sua página, decidimos “minificar” o código do gadget, cortando os espaços vazios.

Por fim, basta adicionar uma miniaplicação de HTML / Javascript no Blogger acedendo ao menu “Design” (Layout). Cole o seguinte código:


<div id='montarbox'>
<ul>
<li>
<div class='montarcp'>
<a class='montarfade' href='link_post_1'>
<img src='link_imagem_1' alt="descrição_imagem_1"/>
<h3>titulo_1</h3>
</a>
</div>
</li>
<li>
<div class='montarcp'>
<a class='montarfade' href='link_post_2'>
<img src='link_imagem_2' alt="descrição_imagem_2"/>
<h3>titulo_2</h3>
</a>
</div>
</li>
<li>
<div class='montarcp'>
<a class='montarfade' href='link_post_3'>
<img src='link_imagem_3' alt="descrição_imagem_3"/>
<h3>titulo_3</h3>
</a>
</div>
</li>
<li>
<div class='montarcp'>
<a class='montarfade' href='link_post_4'>
<img src='link_imagem_4' alt="descrição_imagem_4"/>
<h3>titulo_4</h3>
</a>
</div>
</li>
</ul>
</div>

Agora é só alterar os links dos posts, das imagens (com a respectiva descrição) e os títulos. Salve as alterações e visualize o resultado final. Caso esteja a obter erros na exibição do gadget, experimente limpar a cache do navegador pressionando as teclas de atalho CTRL+SHIFT+DEL. Para mais esclarecimentos, envie o seu comentário.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *