Widget: Acompanhamento Social [V. 2.0] - Com efeito de opacidade

Olá caros leitores, hoje estamos novamente com mais um widget exclusivo do Amotrix, mais uma nova versão do Acompanhamento Social, criado pelo designer Matheus Amorim. Enfim, a nova versão 2.0 traz como diferente a versão anterior, imagens lado-a-lado com efeito opacidade. Confira

Simulação do Widget em funcionamento

Observação: Iremos mexer no Código de Fonte do seu blog, então, recomendamos que você faça um backup do seu template e;ou testar em um blog de testes;

1. Instalando o estilo

Agora iremos adicionar o efeito de opacidade nas imagens. Então, por favor, siga os passos abaixos lendo-os com atenção.

Acesse o Blogger e faça seu login;
Entre em Modelo (Painel > Mais Opções > Modelo);
Procure pela seguinte tag:

]]></b:skin>

Abaixo, adicione o seguinte código:

/* ------ Efeito Clareamento ------ */
.efeitoclareamento img{
    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;    }
.efeitoclareamento img:hover {
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
   -webkit-transform:scale(1.0);
   -moz-transform:scale(1.0);
   -o-transform:scale(1.0);
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   opacity: 0.7;
   -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
    filter:alpha(opacity=50);    }
}

Salve e pronto, o estilo já está adicionado

2. Instalando o widget

Agora iremos adicionar o widget em seu blog, um script rápido e fácil de ser modificado e publicado.

Entre na página Layout (Painel > Mais Opções > Layout);
Clique em Adicionar novo Gadget;
Escolha a opção HTML/JavaScript;
E cole o seguinte código, ALTERADO nas partes destacadas:

<div class="efeitoclareamento">
<center>
<a href="http://www.youtube.com/user/seu-canal" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Nosso canal no Youtube" border="0" src="http://3.bp.blogspot.com/-9vMbIYt80Zw/T_YroVTiyzI/AAAAAAAABZ8/QEXUTnabdlk/s1600/Youtube-logo%2520%25281%2529.png" title="Nosso canal no Youtube" /></a><a href="http://www.endereço-do-seu-blog.com/atom.xml" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Assine nosso feed" border="0" src="http://2.bp.blogspot.com/-zgmWl7TOAmg/T_YrpONWvVI/AAAAAAAABaE/OBfWNgU5Wdg/s1600/icone-RSS.png" title="Assine nosso feed" /></a><a href="http://www.endereço-do-seu-blog.com/pagina-de-contato.html" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Entre em contato com a equipe" border="0" src="http://2.bp.blogspot.com/-BbpME1Eo62U/T_Yrpv4oaeI/AAAAAAAABaM/BG4GLP9Alr4/s1600/icone-contato.png" title="Entre em contato com a equipe" /></a><a href="http://www.facebook.com/pagina-de-fan" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Nossa página de fã no Facebook" border="0" src="http://2.bp.blogspot.com/-p_JLHjf0ZgI/T_YrqHNPeUI/AAAAAAAABaU/4n_VIFhPh3c/s1600/icone-facebook.png" title="Nossa página de fã no Facebook" /></a><a href="http://twitter.com/usuario-no-twitter" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Siga-nos no Twitter" border="0" src="http://2.bp.blogspot.com/-6wGbJ-6u0As/T_YrqnLxv4I/AAAAAAAABac/fGfU5u9sz90/s1600/icone-twitter34.png" title="Siga-nos no Twitter" /></a><br />
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://png-2.findicons.com/files//icons/575/pleasant/64/e_mail.png" /></a>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nome-de-usuario', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Digite seu email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
        <input type="hidden" value="Nome-de-usuario" name="uri" />
        <input type="hidden" name="loc" value="pt_BR" />
        <input class="subscribe" name="commit" type="submit" value="Enviar" />
    </form>
    <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://amotrix.webs.com/Codigos/JavaScript/Creditos/Acompanhamento%20Social%20-%20Atributos%202.0.js'></script></small></span>
</center>
</div>

Após modificar, salve e pronto.

*Atenção

Esse widget contem direitos autorais, então esteja sabendo que na ocorrência de infração, o contra fator poderá ser submetido à punição legal, de acordo com o disposto na Lei 9610/98 (Título VII, artigos 101 aos 110), bem como as sanções dispostas nos artigos 184 a 186 do Código Penal. Então, por favor, ao usar o widget não retirar as fontes e caso for publicar em seu blog/site citar as fontes. Agradecemos pela atenção

-Equipe Amotrix