Sidebar explicada

Чтобы сделать выезжающую панель Sidebar вставляем перед </head> следующий код:

<style type='text/css'>
  .elementoVisible {display:block;}
  .elementoOculto {display:none;}
  .linkContraido {
    ... propiedades de estilo para fuentes o imágenes ...
  }
  .linkExpandido {
    ... propiedades de estilo para fuentes o imágenes ...
  }
</style>

<script type='text/JavaScript'>
  function desplegarContraer(cual,desde) {
    var elElemento=document.getElementById(cual);
    if(elElemento.className == &#39;elementoVisible&#39;) {
      elElemento.className = &#39;elementoOculto&#39;;
      desde.className = &#39;linkContraido&#39;;
    } else {
      elElemento.className = &#39;elementoVisible&#39;;
      desde.className = &#39;linkExpandido&#39;;
    }
  }</script>

Содержание гаджета заключаем в следующие теги: 

<div class="linkContraido" onclick="desplegarContraer

('contenedorExterno',this);">НАЗВАНИЕ ГАДЖЕТА</div>
<div id="contenedorExterno" class="elementoOculto">
  <div>.... содержимое гаджета ...</div>
</div>

 http://vagabundia.blogspot.com/2008/01/sidebar-explicada.html 

 Border Radius herramienta online

.sidebar .widget {

border: 1px solid #cc6666;

código proporcionado

....................

....................

margin:10px;

padding:5px;

}

http://gemablog-.blogspot.com/2010/03/border-radius-herramienta-online.html

http://gemablog-.blogspot.com/2009/09/border-radius.html 

http://gemablog-.blogspot.com/2011/08/girar-imagenes.html