Widget: Hover Box

Efeito simples. E tutorial fácil. (=

Visualize Aqui

Vá até seu HTML do blogger e procure ]]></b:skin>  . Acima dele cole o código abaixo:

@font-face {
font-family: "Simple";
src: url("http://static.tumblr.com/jxlyjkb/3LBmpn15n/bebasneue.otf");
font-weight: normal;
font-style: normal;
}
.sidebar h2 {
font-size: 20px;
color: Black;
font-family: "simple";
text-shadow:0 1px #dbdbdb;
padding: 9px;
margin: 2px;
border-bottom: solid 1px #D3D3D3;
text-align: center;
-webkit-transition-duration: .50s;
margin-bottom: 8px;
}
.sidebar h2:hover {
color: #696969;
-webkit-transition-duration: .50s;
}
.sidebar .widget:last-child {
box-shadow:0px 0px 7px navy;
border: 1px solid #FFBBFF;
border-radius: 30px;
padding-bottom: 0;
background:#fff; /*--------Cor do fundo------*/
padding: 5px; /*------------Espaço interno------*/
margin-left: -13px; /*------------Espaço externo da esquerda------*/
margin-top: 32px; /*------------Espaço externo de cima------*/
margin-bottom:25px; /*------------Espaço externo de baixo------*/
-webkit-transition-duration: .50s;
}
.sidebar .widget:last-child:hover {
-webkit-transition-duration: .50s;
box-shadow:0px 0px 12px #8B3A62;
}

Visualize. E depois salve.
- Gostou, deixe seu comentário.