Como colocar Efeito Fancy no gadget "Autora"

Oi oi galerinha ^^ Tudo bem com vocês ? Hoje vim mostrar um tutorial para aquelas pessoas que estão com pouco tempo livre para ficar na net , e que não conseguem ficar postando todos os dias no blog . E existem pessoas igual a mim ^^ , que tem tempo de sobra pois é uma "vagabunda" que não faz nada e só fica no computador ! >.< Mas se você não é uma dessas pessoas esse tuts é pra você !

Clique em Leia +

1 > Vá em Modelo > Editar HTML > Ctrl+F e procure por : ]></b:skin>
2 > Após achar cole o seguinte código acima dela :

.imgholder{
    position:relative;
    width:70px;
 height:80px;
 border-radius:100px;
 float:left;
 margin-top:5px;
    margin-left:25px;
    margin-bottom:15px;
}


.imgholder img{
 position:absolute;
 left:0;
 top:0;
 width:70px;
 height:70px;
 z-index:5;
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 opacity:0.3;
 filter: alpha(opacity = 30);
 box-shadow:0 0 5px #000;
 -moz-box-shadow:0 0 5px #000;
 -webkit-box-shadow:0 0 5px #000;
 transform: scale(0.7,0.7);
 -ms-transform: scale(0.7,0.7);
 -moz-transform: scale(0.7,0.7);
 -webkit-transform: scale(0.7,0.7);
 transition: 
  opacity 1s,
  transform 1s ease-in-out 0.3s;
 -moz-transition: 
  opacity 1s,
  -moz-transform 1s ease-in-out 0.3s;
 -webkit-transition: 
  opacity 1s,
  -webkit-transform 1s ease-in-out 0.3s;
}


.imgholder:hover img{
 opacity:1;
 filter: alpha(opacity = 100);
 transform: scale(1,1);
 -ms-transform: scale(1,1);
 -moz-transform: scale(1,1);
 -webkit-transform: scale(1,1);
}


.imgholder figcaption{
 position:absolute;
 left:-5px;
 top:25%;
 width:80px;
 color:#262626;
 font-weight:bold;
 text-shadow:-1px -1px 0 #fff;
 z-index:4;
    font: normal 15px 'Yanone Kaffeesatz'; text-trasnform: uppercase;
 transition: 
  top 0.5s ease-out;
 -moz-transition: 
  top 0.5s ease-out;
 -webkit-transition: 
  top 0.5s ease-out;
}


.imgholder:hover figcaption{

 top:90%;
}


.imgholder .circle{
 position:absolute;
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
}


.imgholder .outer1{
 top:-8px;
 left:-8px;
 width:70px;
 height:70px;
 z-index:2;
 border:8px solid;
 border-color:#2d2d2d;
 background: transparent;
 background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
 background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
 transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 -moz-transform:rotate(90deg); 
 -webkit-transform:rotate(90deg);
 
 transition: 
  transform 1.8s ease-in-out,
  box-shadow 1s ease-out,
  border-color 1.5s;
 -moz-transition: 
  -moz-transform 1.8s ease-in-out,
  -moz-box-shadow 1s ease-out,
  border-color 1.5s;
 -webkit-transition: 
  -webkit-transform 1.8s ease-in-out,
  -webkit-box-shadow 1s ease-out,
  border-color 1.5s;
}


.imgholder:hover .outer1{
 border-color:#2d2d2d #dcdcdc #2d2d2d #dcdcdc ;
 transform:rotate(-10deg);
 -ms-transform:rotate(-10deg);
 -moz-transform:rotate(-10deg); 
 -webkit-transform:rotate(-10deg);
}

3 > Agora crie uma gadget Html/Javascript e cole:

<div class="imgholder">

<div class="outer1 circle"></div>

<figure>

<img src="Url da Imagem" />

<figcaption class="caption">Nome do Autor (a)</figcaption>

</figure>

</div>

É isso ai gente , espero que tenham gostado ^^ , queria agradeçer pelos comentários no post passado , adorei responder todas vocês , muito obrigado por visitar meu blog > SKW <  E espero que vocês me perguntem mais >.< , Tem a minha ask se quiserem . Kissus