Skew and Rotate Blockquote

Assalamualaikum. morning and happy tuesday . awal-awal pagi lagi dah bangun, nak tidur pun tak lena. demamT_T. tapi bangun-bangun cari netbook .:D
OKEP-OKEPP ,ari ni amy na ajar korang cara buat skew and rotate blocquote macam gambar dekat bawah ni

maknanya,bila cursor sentuh blockquote tu,dia akan menyenget. anda pahemm ?== .*Tuto ni untuk yang tak tahu cara buat ja. haha XD

1) Mula-mula mestilah pergi dashboard->design->edit html->tick expand widget template(penting)
2) Lepas tu tekan ctrl+f dan cari code ini

.post blockquote {

3) Dah jumpa? oke good:D .copy code dekat bawah ni

background: #FFFFFF;border: 3px dotted #000000;padding: 7px;

}

4) And paste dekat bawah code yang korang cari tadi tu ye.
5) Lepas tu cari pulak code ini

.post blockquote:hover {

6) Ada tak ? kalau tak ada,korang copy and pastekan saja dekat code .post blockquote { yang terakhir sekali .anda pahemm ?:D
7) Lepas tu,copy pulak code ini

background: url(URL BACKGROUND); -webkit-border-radius: 36px 12px;-moz-border-radius: 36px / 12px;-moz-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); }

8) Dan paste dekat bawah code .post blockquote:hover {.
9) So,code penuhnye ialah

.post blockquote {background: #FFFFFF;
border: 3px dotted #000000;padding: 7px;

}

.post blockquote:hover { background: url(URL BACKGROUND);

-webkit-border-radius: 36px 12px;-moz-border-radius: 36px / 12px;-moz-transform: rotate(-2deg);

-webkit-transform: rotate(-2deg);

}

10) Dapat tak macam code di atas ? kalau dapat boleh la save . tapi kena preview dulu ye:)

NOTA KAKI:

1. Url background boleh cari dekat SINI
2. code warna pulak boleh cari dekat SINI

---

Thank you for reading

---

Tweet