Gadgets / Sidebar #1 para tu blog

Buenas tardes~  espero que  se encuentren bien y que estén pasando unos estupendos días. Hoy les traigo este bonito tutorial para su blog, como podrán ver en la imagen de arriba es para sus gadget . La ilustracion 1 es sin pasar el cursor por el titulo del gadget y la 2 es cuando pasas el cursor, pues tiene un efecto hover.

¡Recuerda dar créditos!  ¡No re-publicar!

• Ve a Plantilla  Editar HTML. Copia y pega el siguiente codigo antes de ]]></b:skin>

.sidebar h2{
background:url(http://i57.tinypic.com/e7gco3.jpg); /**Fondo del titulo del gadget**/
padding:10px;
color:#fff;
text-shadow: -1px 0 #ad7ebf, 0 1px #ad7ebf, 1px 0 #ad7ebf, 0 -1px #ad7ebf;
text-align:center;
border:1px solid  #E7F1F9;
border-bottom:5px solid #da9dc4;
line-height:20px;
font-size:15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
letter-spacing:1px;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
}
.sidebar h2:hover{
letter-spacing:10px;
}
.sidebar .widget {
background:url(http://i1081.photobucket.com/albums/j350/natasha359/tumblr_lxwynw0Pdg1r9g6hvo5_250_zps3004f5e6.png);
border-bottom: 4px solid  #f3cee6;/* Borde inferior*/
}