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=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)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

Comentários