segunda-feira, 17 de agosto de 2015

Publicado 04:41:00 por com 3 comments

Gadget postagens populares do blogger com miniaturas maiores

Aprenda como deixar as miniaturas (thumbnails) do gadget postagens populares do blogger maiores e em formato retangular.
Este método realmente usa o widget de Postagens Populares do Blogger com alguns ajustes e
com uma melhor aparência. O resultado de como vai ficar você pode ver no exemplo abaixo.
1º passo - Faça um backup de seu modelo. Sempre é aconselhável fazer um backup para não ter problemas no caso de querer voltar atrás.
2º passo - Vá para o painel de controle e selecione a guia "Layout". Clique adicionar um gadget no local onde você gostaria de colocar. Adicione o widget "Postagens Populares", certificando-se de selecionar a opção "miniatura de imagem" e desmarcar a opção snippet. Em seguida escolha quantos posts você gostaria que fossem exibidos.
3º passo - Volte para o painel de controle e selecione a guia "Modelo", em seguida, clique "Editor HTML." Uma vez dentro do editor de modelo, Clique em Control + F (Ctrl + F) e procure esta tag:

</head>

Logo acima cole este código:
<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -10px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}

.PopularPosts .item-title {
clear:both;
font: 10px verdana;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}

.PopularPosts .item-snippet {
display: none;
}

.widget .widget-item-control a img {
height: 18px;
width: 18px;

}

</style>
4º passo - Ainda no editor de modelo, você precisa procurar por esta tag:
</body>

Logo acima você precisa colar o código:
<script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize(&quot;PopularPosts1&quot;,240);                   
</script>
5º passo - Agora existem alguns pequenos ajustes para fazer. Primeiro você precisa definir o tamanho da miniatura para o tamanho que desejar. Faça isso alterando os números em vermelho.
*Importante: você precisa ter certeza de que o valor em vermelho na segunda parte do código é a mesmo que a largura (width) da figura na primeira parte do código, caso contrário a miniatura não ficará ajustada corretamente.
Obs.: Você pode, se quiser, aumentar o tamanho da letra do título da postagem para menor ou maior, bastando para isso alterar o valor que está em azul para maior (exemplo: 10px, 11px, 12px, etc.), de acordo como ficar melhor.
6º passo- Clique em "Salvar modelo" e confira o seu gadget postagens populares recentemente embelezados. Se gostar deixe seu comentário. Ele é um incentivo para nós!
Os créditos vão para: Bloomin Rouge

3 comentários:

  1. Muito obrigado, funcionou perfeito aqui.
    Abçs

    ResponderExcluir
  2. Olá sou eu novamente.
    Vc saberia como editar o tamanho das imagens das postagens relacionadas? Este gadget que fica no final das postagens.

    ResponderExcluir
  3. Bom dia Milton, ainda não fiz nada sobre isso, mas dá uma olhada nesse post que talvez possa servir de ajuda: http://www.docetimidez.com.br/2015/03/postagens-relacionadas-no-blogger.html#.VeRcvaBViko

    ResponderExcluir

Pato persegue o cão - É morrer de rir!



Related Posts Plugin for WordPress, Blogger...