cara membuat efek hover kotak miring

Nih script saya coba hanya sekedar iseng2 ajjah,
saya gag tau apa yang saya tekan2,saya otak atik otak atik,eehh jadi nya kayag ginian !!
Nih bukti gambarnya bisa saya liatin :

hmmmmm......., bagaimana??

Bagi kalian yang pengen pasang script seperti gambar diatas kalian bisa ambil dari saya,hehehe... !!
Yuk cekidot scriptnya...
Eittzz,tapi ikuti dulu petunjuk di bawah ini,OK !!

1.Masuk ke blogger
2.Dari dasbor kemudian klik rancangan
3.kemudian klik Edit HTML
4.Lalu kamu cari yang mirip dengan code seperti berikut ini :

.sidebar .widget {
text-align:center;
background:#e3e3e3;
}

(Yang diatas khusus untuk sidebar.)
Lalu kamu tambahkan code seperti berikut ini di bawah code di atas :

transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);

Jadi jika di edit2 hasilnya akan seperti ini :

.sidebar .widget {
text-align:center;
background:#e3e3e3;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}

Dan tambahkan code ini lagi dibawahnya :

.sidebar .widget:hover {
text-align:center;
background:#e3e3e3;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}

Dan hasilnya akan seperti ini :

.sidebar .widget {
text-align:center;
background:#e3e3e3;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}
.sidebar .widget:hover {
text-align:center;
background:#e3e3e3;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}

Jika sudah kamu klik simpan dan lihat hasil nya

Tambahan Admin :

Jika kalian ingin menambahkannya pada kotak posting dan footer juga bisa.
Kalian tinggal cari code ini :

(Untuk kotak posting)