Span class-fade- efeito de transparência

 Para quem não sabe, trata-se de um hack que produz um esmaecimento, ou seja, quando este hack é inserido em determinado widget  com vários links -principalmente imagens- somente o link selecionado permanece normal, os demais ficam desbotados.

        Para que você tenha uma idéia, passe o cursor do mouse sobre minha linkbar ou sobre os ícones das redes sociais e verão o efeito que ele produz, salvo se você estiver navegando pelo explore.

 

Vale sempre lembrar:  ANTES DE IMPLANTAR EM SEU SITE, utilize um blog de teste para fazer a experiência.

Primeiro:  Em sua página, vá em modelo – Editar HTML –Expandir Modelos de Widgest;


Agora copie e cole Depois da tag  ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = &#39;inline&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = &#39;none&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = &#39;none&#39;;
} </script>
</b:if>
 
 

Span class fade - Agora copie e cole ANTES da tag </body>

  <script src='http://blogthietke.googlecode.com/files/fadelist.js' type='text/javascript'/> <script> $(function () {   $(&#39;.go-top&#39;).click(function () {
    $(&#39;html,body&#39;).animate({
      scrollTop: 0
    }, 1000);     return false;   });
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
if(!$.browser.msie) $(&quot;.fade ul li&quot;).hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
}); </script>

   


Visualize, se estiver ok pode salvar.  Para que o hack funcione basta adicionar os códigos entre:

 
<span class='fade'>
Adicionar os códigos ou imagens aqui
</span>
   

No exemplo abaixo, está o código dos ícones das redes sociais do meu header:

 
<div class="socia">
<div style="margin-right:-30px">
<span class="fade">
<ul>
<li><a href="http://facebook.com/mijadinhapost"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgttxo99Jn1mGbqCrWoT_gbUA89gTmo_FuWLEz6rc7-_NXXtmvWP78KRvGW8Xsn0gMZJZQ3ZSx3d8g3kwvVwno-hCG7en5USoZeBmdo2WGoi6_SAYPcR8OHl6VKm9atLoJG9moiRhS8JlBJ/s57/Facebook%2520alt%25201.png" /></a></li>
<li><a href="https://plus.google.com/117411377848085193548/posts/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWhcREWG99B9GWdcYpmYvsFtv8ddLPVKnvkHjqroqvLPJnDJIVvnfHOiK4_ZhJb6glj42vJ7sm_FjYr-bhGGYKiXp_fmGo4Ka2Z27DH_77xlyK2JhOr__Rw3AMC6tB9ypDh5rJ-I_AQuWv/s57/Google%252B%2520alt.png" /></a></li>
<li><a href="http://pinterest.com/mijadinhapost/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF54veEyatI5jREvKxr9GYAaDySrga_zCx9ZrJ4RByz2FJTrvUyDoQtsNj20oXII9g8DZjB9AFDfo1juYhbDBIIKQ57rC_BWZiNcMq0tZ_SNs_D3ULVA7sAtsm9WPUpWw8A7OXp5_LbdRZ/s57/Pinterest%2520alt.png" /></a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburner/ITZx&amp;loc=pt_BR"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64__EVp73KQmrjtmBcdrNeaWakZg5snbgdbLuC75s2w1zH-GIJeO1g7eyXMcHuqYe5w0iLyJFmF5HdAD7dQAL8ogR1ZKhkvri7wm1oFsjdkH29zbXsY6g_dze8PRAfjKGN7X7wnnho6AB/s57/RSS%2520Feed.png" /></a></li>
<li><a href="https://twitter.com/mijadinhapost"><img src="http://dl.dropbox.com/u/1708851/Web-Twitter-alt-4-Metro-icon%20(1).png" style="width:60px" /></a></li>
</ul>
</span>
</div></div>

O hack é simples e funciona bem em vários tipos de widgets e/ou imagens (eu já disse isso). 



Abraços !

tags: transparência, esmaecer,javascript,hack,imagens,widgets