Efeito Circle

Acabei de mudar a URL do blog,até porque aquela não tinha nada haver com o nome do blog,agora é http://htmlforyou-blog.blogspot.com.br/,mas se você acessar pelo http://blog-foorever.blogspot.com.br/,você será redimensionado 

Meus nindos *-*,Vilu e Léon *u*

Boa Noite gente,

Como estão? eu to melhor que ontem,eu tava passando mal ontem e então por isso nem postei :c,enfim,hoje eu traga um efeito super lindo para moderadores,lembrando que esse efeito não é meu,eu peguei num tumblr (ainda estou trabalhando para fazer um efeito pra vocês)

Preview >> aqui

Bora ver? *-*

PS*Creditem o HTMLLuv se usarem,foi lá que eu peguei,e me credite por adaptar para o blog c: 

 Primeiro de tudo,vá no seu html e dê Ctrl+ F e procure por:

]]></b:skin>

Achou? ótimo,cole em CIMA dessa tag o seguinte código:

/** EFEITO **/
.circle li {width: LARGURApx; height: ALTURApx; display: inline-block;}
.circle {padding: 0px; list-style: none; display: block; text-align: center; width: 100%;}
.efeito {width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2);}
.imagem {width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 10px rgba(255,255,255, 0.5); -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; transform-origin: 95% 40%; -webkit-transition: all 1s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.efeito:hover .imagem {box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg);}
/** IMAGENS **/
.imagem-1 {background-image: url('IMAGEM'); z-index: 3;}
.imagem-2 {background-image: url('IMAGEM'); z-index: 2;}
.imagem-3 {background-image: url('IMAGEM'); z-index: 1;}
/** HOVER **/
.hover {position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #61a0f2 url('http://static.tumblr.com/ubiuxyg/5G4m9bgwy/noise.png'); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);}
.hover h3 {color: #fff; text-transform: uppercase; position: relative; letter-spacing: 1px; font-size: 12px; margin: 0 0px; padding: 30px 0 0 0; height: 40px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}
.hover p {color: #fff; padding: 0px 5px; margin: -20px 10px; font-size: 10px; border-top: 1px solid rgba(255,255,255,0.5);}

Gigante o código eu sei,mas depois é só personalizar ele c:

Depois disso cole esse código num HTML/JavaScript:

ul class="circle"> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-1"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-2"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-3"></div></div></li> </ul>

 Prontinho,não expliquei o código porque tava tudo explicado nele (entendeu? hahahaha' #parei)

É isso,comentem !

-Fui :*