Tutorial - efeito sidebar

Oiii ursinhoa pretos!

Eu estava visitando, como sempre, o Kawaii World, e vi que na sidebar do blog, tem um efeito lindo. Então os creditos vão toooodos para o Kaeaii world amo esse blog sou fan #number1 efeito muito fofo. Você pode ver o live preview. É só passar o mouse por sima, e ver o efeito.

No HTML do seu blog, procure por /* Widgets 

Logo abaixo, vai ter uns códigos. Então, apague o código abaixo de /* Widgets até a primeira }

E no lugar, cole isso:

.sidebar .widget {
background: #ffffff; /* Fundo da sidebar */
box-shadow: inset 0 0 5px #e0dfdf, 0 0 4px #ccc; /* Sombra interna */
border-radius: 5px; /* Bordas arredondadas */
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 55px;
margin: 20px 0;
-webkit-transition-duration: .50s;
border-top: 6px solid #FFD700; /* Cor da borda de cima */
border-bottom: 6px solid #FFD700; /* Cor da borda de baixo */
}
.sidebar .widget:hover {
background: #ffffff; /* Cor da sidebar hover */
box-shadow: inset 0 0 30px #e4e2e2, 0 0 4px #ccc; /* Sombra interna hover */
border-top: 5px solid #FF82AB; /* Cor da borda de cima hover */
border-bottom: 5px solid #FF82AB; /* Cor da borda hover de baixo */
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
margin: 20px 0;
-webkit-transition-duration: .50s;
}

Edite com o que se pede e deseja, visualize, e se estiver tudo certinho, salve.

~ Espero que gostem!
Bjo de Luz