Obs.: Neste artigo você aprenderá a adicionar efeito a todas imagens contidas no blog, em alguns templates não será habilitada a função no sidebar. Caso você esteja querendo o código da propriedade para ser aplicada em imagens individuais, clique aqui.
Advertência: lembrando que vamos atuar na parte interna do HTML, ou seja, no HTML central do blog, antes de efetuar o processo de habilitação da propriedade, recomendamos que você faça um backup do seu template e testar em um blog de testes.
Adicionando a propriedade
Efeito Desclareamento
1 - Entre em Modelo | Painel > Mais Opções > Modelo
2 - Clique em Editar HTML
3 - Clique em na caixa Expandir modelos de widgets
4 - Agore procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}
Caso não tenha achado o código citado acima, procure por: .post-body img { — pois em alguns blogs a etiqueta responsável pelas imagens pode se modificar de acordo com o modelo.
5 - Selecione-o todo e substitua por:
.post img {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
.post img:hover {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
6- Clique em Salvar Modelo
Efeito Clareamento
1 - Entre em Modelo | Painel > Mais Opções > Modelo
2 - Clique em Editar HTML
3 - Clique em na caixa Expandir modelos de widgets
4 - Agore procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}
Caso não tenha achado o código citado acima, procure por: .post-body img { — pois em alguns blogs a etiqueta responsável pelas imagens pode se modificar de acordo com o modelo.
5 - Selecione-o todo e substitua por:
.post img {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
.post img:hover {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
6- Clique em Salvar Modelo
--//--
Pronto, pode conferir o seu blog na página inicial ou em uma postagem/página. Caso a propriedade não tenha dado certo entre em contato ou deixe um comentário. Se tenha dado certo, por favor, comente para saber que o código está ativo. Caso não, também comente. E trataremos de achar o erro.
Com a migração da propriedade a todas as imagens do blog, em alguns layouts por modificação de estilo para os modelos Dynamic Views. Além disso em versões móveis (mobile) o efeito da propriedade não será habilitado, somente em visualizações em web page.
Com a migração da propriedade a todas as imagens do blog, em alguns layouts por modificação de estilo para os modelos Dynamic Views. Além disso em versões móveis (mobile) o efeito da propriedade não será habilitado, somente em visualizações em web page.