Menu com efeito bubble

Cloque um menu de redes sociais com mais estilo em seu blog. Quando não esta com o mouse emcima dos ícones, eles ficam normais. 

Mas quando você passa o mouse emcima de um ícone, o ícone aumenta ea parece um texto abaixo. Quando você apassa o mouse no ícone do twitter por exemplo, aparece o texto “Siga-me”. Mas qunado você passa o mouse emcima de outro ícone, vai aparecer outro texto.

Vamos em “Layout” > “Editar HTML”. Procure o tag ]]></b:skin> e cole o código abaixo depois de ]]></b:skin>.

<script type='text/javascript'>
//<![CDATA[
// ================================================================
//                   ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ================================================================
var dock = function (dock, sMin, sMax) {
  /* ---- private vars ---- */
  var xm = xmb = ov = 0;
  var M = true;
  var icons = document.getElementById(dock).getElementsByTagName('img');
  var N = icons.length;
  var s = sMin;
  var ovk = 0;
  var addEvent = function (o, e, f) {
    if (window.addEventListener) o.addEventListener(e, f, false);
    else if (window.attachEvent) r = o.attachEvent('on' + e, f);
  }
  var pxLeft = function(o) {
    for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
    return x;
  }
  for(var i=0;i<N;i++) {
    var o = icons[i];
    o.style.width = sMin+"px";
    o.style.height = sMin+"px";
    o.className = "dockicon";
  }
  var run = function() {
    for(var i=0;i<N;i++) {
      var o = icons[i];
      var W = parseInt(o.style.width);
      if(ov && ov.className=="dockicon") {
        if(ov!=ovk){
          ovk=ov;
          document.getElementById("legend").innerHTML = ov.lang;
        }
        if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
        s = Math.min(sMax,s+.5);
      } else {
        s = Math.max(s-.5,sMin);
        W = Math.max(W-N,sMin);
      }
      o.style.width = W+"px";
      o.style.height = W+"px";
    }
    if(s >= sMax) M = false;
  }
  addEvent(document, 'mousemove', function (e) {
    if(window.event) e=window.event;
    xm = (e.x || e.clientX);
    if(xm!=xmb){
      M = true;
      xmb = xm;
    }
    ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
  });
  setInterval(run, 16);
};
window.onload = function() {
  dock("dock", 48, 128);
}
//]]>
</script>
<style type='text/css'>
  #dock { /* el rectángulo contenedor */
    position: relative; float:left;
    text-align: center;
    width: 100%;
  }
  #dock a, #dock a:visited { margin: 10px 0 0 3px; text-decoration: none; }
  #dock img { border: none; width: 0px; }
  #legend { /* el texto inferior */
    color: #000;
    font-size: 24px;
    text-align: center;
    width: 100%;
  }
</style>

Agora vá em “Layout” > “Elementos da Página” e adicione um gadget de HTML/JAVASCRIPT em uma de suas sidebars. Cole o código abaixo dentro do gadget de HTML/JAVASCRIPT e salve.

<div id="dock">
  <a href="ENDEREÇO DO TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNg_bbQOnqkgmUxNNPjEfCh6pUZSBgEQIy_6XI3CAvVb012pm59ObD7smZeALbxxn2x7HOs00mVDMS_r9Z_YR8N8hVZj-I9o_r-fb2QTzLhrf6kWI67TYW5TyHl4AF12zRuKQ0ZIYnd6w/s1600/twitter.png" lang="Siga-me" /></a>
  <a href="ENDEREÇO DO FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVqbsSERzMmDVen_k_xIMWMAfij5jSPPN4tDTXReAYSCNubHKgUN9haFjrXx0EuEDtWXd_bVBhGJqG-iBvPcPEAjWTARNy2l_3KxVr3ti_QOkeTPgeVjpHLS7e6Om4XFIa-F9PNYnXX_U/s1600/rss.png" lang="Assine" /></a>
  <a href="ENDEREÇO DO GOOGLE HEADER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vmvdJfgyqNIGsXTAOT0evti6IJ5rLo1dbgEsfjfM0jTupYSEe8ZB0uuQA5ERy18qY6Fsv5ZwodLEkP8QLSX-ApXmJnenWv32q-T_S2eX__e4_dlQTzgixMA4cIYN1kPilgkdAP_bmgk/s1600/google.png" lang="Google Header" /></a>
<a href="ENDEREÇO DO FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuBZiI7dZdbefbq_39P2XimAZzL6XDngg0CObPnYcrDvWLXBSrpAkbCm5IQUYm4uU0UJgKH7F5gv5gnSnqPIB0_h_Z_PVdzQ3oPVwU3a-ISDlDy2Xi7dWRAY4GBrTpQwISCFV-NFG1ig/s1600/facebook.png" lang="Facebook" /></a>
<a href="ENDEREÇO DO BLOGGER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YP_zBzvGDYMKboDdKvhBupp1D4PsT6SZgWy0JVVX8ep2y09obdFs0ZwGjozdIKPjd1fCfPhmRR2u6ROQnh-3FSCsv2KghBFfLSS4pyyROiVKynBc35i_mVGFbX_4vZoZRhYdr_7XbvA/s1600/blogger.png" lang="Logar" /></a>
</div>
<div id="legend"></div>