Efek Blockquote Unik

Ini tutorial untuk memberi efek Blockquote yang unik,, ketika kursor menyentuh blockquote dia akan bergerak miring dan berganti background serta muncul icon lucu yang menghiasi kotak blockquote nya,, Mau tau gimana ? coba aja sendiri

Nih langkah-langkahnya :

1. Dashboard
2. Template
3. Edit HTML
4. Ctrl+F dan temukan kode .post-body { , jika sudah ketemu kurang lebih kodenya seperti ini kan ,

.post-body {

line-height: 1.4;

font-size: 110%;

position: relative;

}

5. Ok , selanjutnya tempelkan kode berikut ini , dan letakkan dibawah kode di atas :

.post blockquote {

background-image :url(URL Gambar); padding: 5px;

Border: 2Px dashed #000000;

colour:#000000}

blockquote:hover {

background-color: #000000;

border:2px dashed #000000 ;

-webkit-transition-duration: 3.5s;

background-image:url(URL ICON);

background-position:bottom right;

background-repeat:no-repeat;

-webkit-border-radius: 36px 12px;

-moz-border-radius-topleft: 25px 10px/25px 10px;;

-webkit-transform: skew(1.deg,1.5deg);

-moz-transform: rotate(3deg);

-webkit-transform: rotate(3deg); }

Border: 2px dashed #00000;

-moz-border-radius-topleft: 25px 10px/25px 10px;

border-radius :25px 10px/25px 10px;

}

6. Jadi nanti letaknya akan seperti ini

.post-body { line-height: 1.4;
font-size: 110%;
position: relative;
}
.post blockquote {
background-image :url(URL Gambar); padding: 5px;
Border: 2Px dashed #000000;
colour:#000000}
blockquote:hover {
background-color: #000000;
border:2px dashed #000000 ;
-webkit-transition-duration: 3.5s;
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
-webkit-border-radius: 36px 12px;
-moz-border-radius-topleft: 25px 10px/25px 10px;;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
Border: 2px dashed #00000;
-moz-border-radius-topleft: 25px 10px/25px 10px;
border-radius :25px 10px/25px 10px;
}