Widgets com efeito accordion

DEMO

Para quem economizar espaço no blog, que tal este efeito accordion em TODOS os widgets do Blogger ?





Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Depois dele cole o seguinte código:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<style type='text/css'>
.cegdicon { position:relative;float:right;height:9px;width:9px;top:3px;margin-top:0px;}
.cegdlink { display:block; }
.cegdclosed { background: url(data:image/gif;base64,R0lGODlhCQAJAKIAAO/v5/fz78TK1/f39wAAAIuRoP///wAAACH5BAAAAAAALAAAAAAJAAkAAAMeKLVcajCaFQkca2gywiwDIYpfEAAWREHpJ0VOwwgJADs=) center center no-repeat;}
.cegdopen { background: url(data:image/gif;base64,R0lGODlhCQAJAKIAAO/v5/fz78TK1/f39wAAAIuRoP///wAAACH5BAAAAAAALAAAAAAJAAkAAAMbKLVcajCaJeFYI+cwyyAg2AUBIFFVl05KswgJADs=) center center no-repeat;}
</style>
<script type='text/javascript'>
//<![CDATA[
// collapse/expand blogger sidebar gadgets
// MS-potilas 2012
var cegdGroups = {};
var cegdMargin = 6;
function cegdToggle(ee, closeonly) {
  if(!closeonly) closeonly = false;
  var ele = $(ee);
  var ene = ele.find(".widget-content:first");
  if(!ene.length) ene = ele.find(".gadgets-gadget-container:first");
  var h2 = ele.find("h2:first");
  if(closeonly || !ene.is(":hidden")) {
    ene.slideUp("fast");
    h2.find(".cegdicon").addClass("cegdclosed");
    h2.find(".cegdicon").removeClass("cegdopen");
  } else {
    ene.slideDown("fast");
    h2.find(".cegdicon").addClass("cegdopen");
    h2.find(".cegdicon").removeClass("cegdclosed");
  }
}
function cegdClose(ee) { cegdToggle(ee, true); }
function cegdDo(ee) {
  if(cegdGroups["#"+$(ee).attr("id")] && cegdGroups["#"+$(ee).attr("id")] != "") {
    var ccc=cegdGroups["#"+$(ee).attr("id")].split(",");
    for(var i=0; i<ccc.length; i++) cegdClose(ccc[i]);
  }
  cegdToggle(ee);
}
function cegdInit(ele, closed) {
  var h2 = $(ele).find("h2:first");
  if(h2.length) {
    if(!(h2.parent().is("a")))
      h2.wrap('<a title="Click para abrir/fechar" class="cegdlink" href="javascript:void(0)" onclick="cegdDo(&#39;'+ele+'&#39;);this.blur();"></a>');
    $(ele).css('margin-top', cegdMargin);
    $(ele).css('margin-bottom', cegdMargin);
    if(!(h2.find(".cegdicon").length))
      h2.prepend('<div class="cegdicon cegdopen"></div>');
    if(closed) cegdClose(ele);
  }
}
function cedgID(gdg) {
  if(gdg[0] == '#') return gdg;
  if($(gdg).length == 1) return gdg;
  if(gdg[0] != '#' && $('#'+gdg).length == 1) return '#'+gdg;
  if($(".widget h2:contains('"+gdg+"')").length == 1)
    return '#'+($(".widget h2:contains('"+gdg+"')").parents(".widget").attr("id"));
  return gdg;
}
function cedgAddOpen() {
  if(arguments.length > 1 && cegdGroups[cedgID(arguments[0])]) return;
  for(var i = 0; i < arguments.length; i++) {
    arguments[i] = cedgID(arguments[i]);
    cegdInit(arguments[i]);
    var oth = "";
    for(var j = 0; j < arguments.length; j++) {
      if(i!=j) {
        if(oth!="") oth += ",";
        oth += cedgID(arguments[j]);
      }
    }
    if(oth != "") cegdGroups[arguments[i]] = oth;
    if(i) cegdClose(arguments[i]);
  }
}
function cedgAddClosed(gdgid) {
  cegdInit(cedgID(gdgid), true);
}
$(window).load(function() {
  // call cedgAddOpen / cedgAddClosed for gadgets you want to expand/collapse
  // parameter: gadget id with # in front of it (CSS/jQuery selector)
  // cedgAddOpen can also create a group, from which only one is open at a time.
  //
  cedgAddOpen("About Me", "More info");
  // cedgAddOpen("#Subscribe1");
 
  $(".sidebar .widget").each(function() { cedgAddClosed("#"+$(this).attr("id")); });
});
//]]>
</script>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Salve.

Se quiser mudar a aparência de seus widgets, veja a explicação aqui, aqui, aqui ou aqui.